Reactの基礎知識

Reactとは

React(リアクト)とは、Facebookが開発しているJavascriptのライブラリでありフロントエンドの開発に大きな影響を与えています。

公式サイトはこちらです。

公式サイトを訪れると、次の3つの言葉が出てきます。

  • Declarative (宣言的である)
  • Component-Based (コンポーネントベースである)
  • Learn Once, Write Anywhere (一度学ぶことで何もで書くことができる)

これらはReactの特徴を示しており、Reactが人気の理由でもあります。

Declarative

Reactは、記述が宣言的です。

どんな条件でどんな処理をし、どんな結果になるのか。これが明確でわかりやすいため、コードを見るとどんなことをしているのかが理解しやすく、機能の追加や削除、またはデバッグも容易です。

Component-Based

Reactは、コンポーネントと言う小さい部品に分解してアプリケーションを記述していきます。

オブジェクト指向のプログラミング言語をやったことのある方は理解しやすいと思いますが、小さく分解できることで複雑なUIも作りやすく、保守や拡張、何より再利用も容易となります。

この考え方はReactに限らず、今後もプログラミングを続けていく上で必須の解釈であると思っています。

Learn Once, Write Anywhere

ReactはWeb開発だけではなく、React Nativeと言うライブラリを使用することでスマートフォンのアプリケーションも製作できたり、またReactの思想を理解することで他のプログラミング言語にも応用することができます。

Reactを学ぶことは、エンジニアとして生きていく上で無駄にはならないことだと考えます。

 

また、Reactは基本的にはJavascrptの構文そのままで記述するので、独自の記法を一生懸命覚えなければならなかったりすることもなく、将来性もあります。

Reactの魅力を少しわかってもらえたでしょうか、これからは開発環境や実際の書き方を説明していきます。

 

開発環境

Reactの開発はスクラッチで行うことはほとんどなく、基本的には多く公開されているパッケージを利用して行なっていきます。

そのパッケージ類はnpmと言うパッケージマネージャーで管理され、またその実行環境がNode.jsです。

Node.jsをインストールするとnpmも自動的に含まれます。こちらからインストールしましょう。

また、Reactは雛形を作成しすぐに開発に移ることのできるパッケージを公開しています。create-react-appです。

$ npm install -g create-react-app

このコマンドでインストールし、以下のコマンドでプロジェクトを作成しましょう。

$ create-react-app my-app

また、以下のコマンドでローカルサーバーを立ち上げ、ブラウザで動作を確認することができます。

$ npm start

詳しい説明はここでは割愛します。

 

また、もっと手軽に始めたい方はオンラインエディタであるCodeSandboxがおすすめです。

こちらは環境が全て整っており、すぐに開発を始めることができます。

codesandbox

 

JSX

JSXとは、Facebookが開発している拡張構文であり、JavaScriptでもHTMLの表現が容易になります。

下の二つのコードは上がJSXで下がReact標準の書き方なのですが、どちらも同じ意味です。

// JSX
const element = (
 <h1 className="greeting">
 Hello, world!
 </h1>
);
// React標準
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

これを見ると、どれだけ直感的にかけるかわかると思います。ネストもHTMLと同様に書くことが可能です。

 

Components

それではいよいよReactの基本であるコンポーネントについて考えていきましょう。

せっかくなのでcreate-react-appの雛形を見ていきます。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();
// App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
 export default App;

これをブラウザで表示するとこのようになります

create-react-app

JSXで書かれているところとブラウザを見比べると、HTMLを触ったことのある方は何となくわかると思います。

 

どちらも1行目ではReactをimportしていますが、これは必須となります。

App.jsではComponentもimportしていますが、これを継承することでコンポーネントを作っていきます。

 

renderと言うメソッドが、その名の通りコンポーネントをレンダリングするメソッドです。一つ気をつけなければならないのは、renderメソッドでは返すのは1つの親要素だけであり、例えばトップレベルにdivが二つあったりしたらエラーになります。

そして、index.jsnのReactDOM.renderでid=”root”の要素にコンポーネントAppを描画していることがわかります。

 

Reactでは、このように要素ごとにコンポーネントを記述し、それをインポートすることでプロジェクトを大きくしていきます。

また、Reactは基本的なJavascriptの構文を使えるため、コンポーネントは以下のように記述することも可能です。

// 全て同じ描画を行う
class Hello extends Component {
  render() {
    <h1 className="greeting"> Hello, world! </h1> 
  }
}

const Hello = () => {
  return <h1 className="greeting"> Hello, world! </h1>;
}

function Hello() {
  return <h1 className="greeting"> Hello, world! </h1>;
}

 

Props

Propsとはコンポーネントと外部とのインターフェースであり、コンポーネントに必要な値を受け取ることができます。

状態によって値が変わるようなものは次に説明するStateに任せるため、Propsはimmutableで変更してはいけません。

例えば次の例では、Propsとしてname=”react”をコンポーネントHelloに渡してそれを表示しています。

/**
 * Hello, react!
 * Happy hacking!
 */
class Greeting extends Component { 
  render() {
    <div>
      <Hello name="react" />
      <p>Happy hacking!</p>
    </div>
  }
}

const Hello = (props) => {
  return <p>Hello, {props.name}!</p>;
}

Propsは関数も渡すことができ、子のクリックイベントを親で記述するようなことも可能です。

class AlertLink extends Component {
  handleClick() {
    alert('danger!');
  }

  render() {
    <Alert onClick={this.handleClick} />
  }
}
const Alert = (props) => {
  return <a href="#" onClick={() => props.handleClick()}>Click me</a>;
}

 

 

State

それでは、最後にStateについて見ていきましょう。

Propsはコンポーネントが外部から受け取った値でしたが、Stateは変更可能なオブジェクトであり、自身の状態を表しています。

 

注意しなければならないのは、StateはReact.Componentを継承するクラスでしか利用できないため、他の記述で書いたコンポーネントではStateを使うことができません。このため、Stateを持つことのできないコンポーネントはStateless Functional Components(SFC)と呼ばれます。

 

次のコードは、公式に載っているもので現在時刻をStateに設定しています。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
       </div>
    );
  }
}

また、Stateの状態を変える時には必ずsetStateメソッドを使って変える必要があります

this.setState({ data: Date.now() });

 

 

今回はこれで終わります、とりあえずCSSで見た目を整えてみたい人はstyled-componentsを、
非同期処理など複雑なことがしたい!と言う人はReduxを見てみるといいと思います。

tic-tac-toeゲームを作る公式チュートリアルもなかなか楽しかったので是非やってみてください。(完成品)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です