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



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

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

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

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

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

GoogleTrend_React_2013_1_-_2016_7

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

目次
  1. Reactの美点
  2. プログラムがシンプルになる
  3. 提供している機能が少ない
  4. Reactを触ってみよう!
  5. 準備・土台となるHTMLを作る
  6. 最小のサンプル作成
  7. Reactプログラムの基本
  8. コンポーネントを作る
  9. コンポーネントを画面に描画する
  10. Reactを使いこなす
  11. コンポーネントにプロパティを与える
  12. コンポーネントの入れ子
  13. 繰り返し(配列)を扱う
  14. 状態を扱う
  15. 実戦的に使うには
  16. Reactの今後
  17. Redux
  18. 最後に

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_hello

Mid_IV_Hatagishi

Reactプログラムの基本

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

コンポーネントを作る

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

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

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

react_hello_structure

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

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

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

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

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

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

react_hello_render

コンポーネントの指定が独特ですね。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')
);

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

react_nested_component

繰り返し(配列)を扱う

少し癖があるのが繰り返し(配列)の扱いです。配列の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_array_map

状態を扱う

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

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

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

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

react_state

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

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

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

  • 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')
);
  • 国の名前はcountriesという名前の配列として状態を管理
  • テキストの入力内容はtextという名前で状態を管理
  • ボタンが押されたらtextをcountriesに追加してthis.getState関数を呼び出し

実戦的に使うには

サンプルではJSXを直接HTMLの中に書きました。これは手軽さを重視したためですが、実は画面が表示される度にJSXをJavaScriptに変換する処理が動いています。このためプログラムが大きくなってくるとレスポンスの悪化を招きます。

実戦では次のような工夫が必要になるでしょう。

  • JSX→JavaScript変換を事前に実行(HTMLからは変換後のJavaScriptを参照する)
  • JSXファイルを分割して開発できるようにする

本エントリでは具体的な方法を割愛しますが、幸い上記のような開発環境を作る情報は豊富ですので、本格的に開発する際はまず環境構築の情報を求めるようにして下さい。例えば次のような記事が参考になると思います。

Reactの今後

Reactはシンプルで分かりやすいライブラリなのですが、弱点ももちろんあります。深刻なのはコンポーネントの親子間でのデータのやり取りが面倒、というものがあり、これを解決するためのライブラリが多く生み出されています。

Redux

そんな中で最近よく耳にするのがReduxというライブラリです。

まだ決定版と言えるほどではありませんが、現時点ではReactの弱点を補うライブラリのデファクトスタンダードの地位に最も近いようで、勉強してみても損はありません。

ぜひ一度、公式Webサイトをご覧になって下さい。

また日本語の情報も充実しています。

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

最後に

駆け足でここまで見てきましたが、もっとReactのことを知りたい!という場合には公式のチュートリアルを追いかけるのが最適です。日本語化されているのが嬉しいですね。

チュートリアルはびっくりするくらい量が少ないです。Reactのシンプルさが分かると伝わってくると思いますので、ぜひ一度ご覧になって下さい。

変化の激しいJavaScript業界ではありますが、ここしばらくはReactの盛り上がりが加速しそうです。もし廃れたとしても、Reactのコンセプトが今後のJavaScriptライブラリに大きな影響を与えるのは確実ですので、ぜひ触ってみていただきたいと思います。

tomo
この記事を書いた人
tomo
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp