更新日: 2019年10月3日
公開日: 2016年8月17日

今最も熱いJavaScriptライブラリ「React」を徹底解説

皆さんはあのFacebookが作ったReactというライブラリをご存知でしょうか。

Reactは、WebアプリにおいてHTMLによる画面を構築するのを支援するライブラリです。

この分野ではAngularJSなどが有名ですが、ここのところReact人気が急激に伸びているようです。

Googleトレンドによると、去年（2015年）くらいから急激に人気度が向上しています。

このエントリでは、Web開発者を主な対象として、Reactがどんなライブラリなのか、コード例を示しながらウォークスルーしてみることにします。

Reactの美点
プログラムがシンプルになる
提供している機能が少ない
Reactを触ってみよう！
準備・土台となるHTMLを作る
最小のサンプル作成
Reactプログラムの基本
コンポーネントを作る
コンポーネントを画面に描画する
Reactを使いこなす
コンポーネントにプロパティを与える
コンポーネントの入れ子
繰り返し（配列）を扱う
状態を扱う
実戦的に使うには
Reactの今後
Redux
最後に

Reactの美点

Reactの美点としましては以下のようなものがあります。

プログラムがシンプルになる

Reactを使ったプログラムは、乱暴に言えば「プロパティや状態（state）に応じて画面を描画するだけ」です。

DOM操作や状態の変更に応じた再描画などの複雑になりがちな処理はReactの中に隠され、我々プログラマが気にする必要はありません。

これによりプログラムがシンプルに保たれます。

提供している機能が少ない

意外に感じられるかもしれませんが、機能が少ないというのは良いことなのです。覚えることが少なくて済みますし、ある結果を得るためのプログラムが、誰が書いてももだいたい同じようになるという効果があるからです。

もちろん、機能が少ない代わりに出来ないことが多くなる、というのでは困るのですが、Reactはそんなことはありません。なにせFacebookでも使われており、実用性は充分です。

Reactを触ってみよう！

準備・土台となるHTMLを作る

それではReactを早速触ってみましょう！

まずはReactをすぐに試すことができるHTMLを作っておきましょう。次のコードを適当なファイルに保存してください。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      // ここにコードが入ります
    </script>
  </body>
</html>

以降で紹介するReactのプログラムは、「ここにコードが入ります」というところに書いて下さい。 ### 最小のサンプル作成まずは一番簡単なReactプログラムを見てみましょう。

const Hello = React.createClass({
    render: function() {
        return (
            <div>
              <h1>Hello,React!</h1>
              <h2>{(new Date()).toString()}</h2>
            </div>
        );
    }
});
ReactDOM.render(
  <Hello />,
  document.getElementById('content')
);

HTMLをブラウザで見ると、次のように表示されるはずです。

Reactプログラムの基本

では最小のサンプルの構成を見てみましょう。

コンポーネントを作る

Reactプログラミングの基本は、コンポーネントと呼ばれる部品を作ることです。

コンポーネントはReact.createClassという関数で作ります。この関数には１つのオブジェクトを渡すのですが、このオブジェクトはrenderという関数を持つ必要があります。

抜粋して見てみましょう。

このようにHTMLの中にJavaScriptのコードや変数を埋め込むことで、動的にHTMLを編集することができるのが、Reactの特徴の１つです。

この記法をJSXと言います。

JSXの文法の詳しい説明は割愛しますので、興味のある方は本家（Facebook）のドキュメントをご覧ください。

コンポーネントを画面に描画する

作ったコンポーネントを画面に表示するには、ReactDOM.renderという関数を使います。

この関数の引数は２つです。１つ目の引数はコンポーネントで、２つ目の引数はコンポーネントを描画する親のHTMLタグです。

コンポーネントの指定が独特ですね。HTMLタグのように記述できるのが面白いところです。

Reactを使いこなす

基本を押さえたところで、Reactの機能を掘り下げていきましょう。

コンポーネントにプロパティを与える

HTMLタグの属性のような感覚で、コンポーネントにはプロパティを与えることが出来ます。

先ほど作ったHelloコンポーネントを少し改造してみましょう。

const Hello = React.createClass({
    render: function() {
        return (
            <div>
              <h1>Hello,React!</h1>
              <h2>{this.props.time}</h2>
            </div>
        );
    }
});
ReactDOM.render(
  <Hello time={new Date().toString()} />,
  document.getElementById('content')
);

Helloコンポーネントを描画するときに、time属性を与えていることに注目して下さい。

  <Hello time={new Date().toString()} />,

Helloコンポーネントの中では、this.propsというオブジェクトを通してプロパティを使います。

              <h2>{this.props.time}</h2>

この仕組みは、単純でありながらとても強力です。コンポーネントの使い回しが効くようになりますから。

コンポーネントの入れ子

コンポーネントの中には、他のコンポーネントを埋め込むことが出来ます。

HelloCountryというコンポーネントを作り、Helloコンポーネントから使ってみましょう。

const HelloCountry = React.createClass({
    render: function() {
        return (
            <li>Hello, {this.props.country}</li>
        )
    }
});
const Hello = React.createClass({
    render: function() {
        return (
            <ul>
              <HelloCountry country="Japan" />
            </ul>
        );
    }
});
ReactDOM.render(
  <Hello />,
  document.getElementById('content')
);

次のように表示されます。

繰り返し（配列）を扱う

少し癖があるのが繰り返し（配列）の扱いです。配列のmap関数を使い、コンポーネントを返すようにします。

Helloコンポーネントを改造し、国の名前を配列で扱うようにしてみましょう。

const HelloCountry = React.createClass({
    render: function() {
        return (
            <li>Hello, {this.props.country}</li>
        )
    }
});
const Hello = React.createClass({
    render: function() {
        return (
            <ul>
              {this.props.countries.map(country => {
                   return ( <HelloCountry country={country} /> )
               })}
            </ul>
        );
    }
});
ReactDOM.render(
  <Hello countries={['Japan', 'States']} />,
  document.getElementById('content')
);

国の名前はReactDOM.render関数の中で指定するようにしてみました。

次のように表示されます。

状態を扱う

実用的なアプリを作る上では、ユーザの操作に応じて状態を変え、画面表示を適切に変更するのはとても重要なことです。

Reactは状態を上手に扱う機能が備わっています。

プログラムを改造して国を自由に追加できるようにしてみましょう。

今回は、先に画面を見ていただきます。

テキストとボタンを１つずつ追加しました。ボタンを押すと、下段の「Hello,◯◯」が追加されます。

ではプログラムを見てみましょう。

ポイントは次の２つです。

getInitialStateという関数を定義し、初期状態を返すようにする
ユーザ操作のタイミングははonXxxという関数で捕捉する
状態を変更したいタイミングで、変更の入った値を引数にしてthis.getState関数を呼び出す

const HelloCountry = React.createClass({
    render: function() {
        return (
            <li>Hello, {this.props.country}</li>
        )
    }
});
const Hello = React.createClass({
    getInitialState: function() {
        return {
            text: '',
            countries: [],
        };
    },
    onTextChange: function(e) {
        this.setState({ text: e.target.value });
    },
    addCountry: function() {
        this.setState({ countries: this.state.countries.concat([this.state.text]) });
    },
    render: function() {
        return (
            <div>
              <input type="text" value={this.state.text} onChange={this.onTextChange} />
              <button type="button" onClick={this.addCountry}>追加</button>
              <hr/>
              <ul>
                {this.state.countries.map(country => {
                     return ( <HelloCountry country={country} /> )
                 })}
              </ul>
            </div>
        );
    }
});
ReactDOM.render(
  <Hello />,
  document.getElementById('content')
);