はじめてのReact.jsで詰まった - 米を買い忘れうどんを食べる

クッソ久々の更新

この記事は"coins Advent Calendar 2016" 20日目の記事です。
www.adventar.org

ひょんなことからReactを触ってみたのでその時困ったことなどを書きたいと思います。

Reactってなに

Reactは、Facebookが開発したJavaScriptライブラリです。
主にWebページ上のUI部品の構築・描画に関する機能を提供します。

細かい機能や扱い方などは、公式チュートリアルなりWeb上の記述なりを探していただければと思いますが、ざっくりと特徴を挙げると以下のようになります。

画面上の各パーツをコンポーネントと呼ばれるカプセル化された構造で管理
コンポーネントは状態(state)を持ち、状態の変化に応じて自動で画面を描画
MVCで言う所のViewの部分のみを管理する、各種フレームワークと共存化

こんな感じでしょうか。

一応コードの例を挙げてみたいと思います。
コンポーネントの作成例です。ボタンを表示し、押すとその数だけ下に「ほげ」が表示されます。

class ClickButton extends React.Component {

   constructor(props) {
      super(props);
      this.state = {
         text: ""
      };
      this.addHoge = this.addHoge.bind(this);
   }

   // "hoge"を追加する関数
   addHoge() {
      this.setState({
         text: this.state.text + "hoge"
      });
   }

   // 実際にDOMに追加されるHTMLを記述
   render() {
      return (
         <div className="clickButton" >
            <button onClick={this.addHoge}>{this.props.name}</button>
            <div>
               {this.state.text}
            </div>   
         </div>   
      );
   }
}

上記のコードで作成したコンポーネントは、以下のような記述で呼び出し、idが"wrapper"のdiv要素の中に追加することができます。

ReactDOM.render(
   <ClickButton name="おしてね" />,     // name属性の値はコンポーネント内でthis.prop.nameで参照できます
   document.getElementById("wrapper")
);

こちらで実行結果を確認できます。

ボタンを押すと、onClickに指定されているaddHoge関数が呼び出され、this.state.textの値が変更されます。この時、コンポーネントは、stateの変更を自動でキャッチし、render関数が再度実行され再描画されます。

このように、Reactは画面のパーツをコンポーネントとして管理し、ユーザーの入力に応じた変化への対応に長けたライブラリと言えます。

Reactをいきなり使おうとして困ったこと

そんなReactですが、初めて触ってみるにあたって、ブラウザ上で動かせる状況になるまでに詰まった点がいくつかあったので挙げてみたいと思います。

「なんかJSの中にHTMLが混じってるんだけど」

先述のコードのように、Reactに関連するコードにはJavaScriptの内部にHTMLのような記述が混じる構文が頻繁に出てきます。これは"JSX"と呼ばれるJavaScriptの独自拡張構文です。厳密にはHTMLのタグがそのまま使える訳ではありませんが、ほぼ似たような形で書くことができます。

最終的には普通のJavaScriptに変換して実行するため、厳密には必ずJSX構文で書く必要はありませんが、使ったほうが分かりやすく書けると思います。

「どうやって読み込むの」

npmのようなパッケージマネージャーを使えばよいと思いますが、単純に使うだけなら以下の記述でソースコードを読み込めば十分です。

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

「これどうやって実行するの」

JSX構文のJavaScriptはそのままではブラウザ上で実行できないため、JSX構文でない通常のJavaScriptに変換する必要があります。

変換する方法はいくつかありますが、一番簡単なのは"JSXTransformer"を使用することです。

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="path/to/jsxfile.jsx" type="text/jsx"></script>

これでページをロードする際にJSXファイルをその場で変換し、JavaScriptとして実行することができます。しかし、本番環境でこの方法を使用することは推奨されていません。（読み込みが明らかに遅くなります）

他の手段として、Babelというコンパイラを使用し、あらかじめJavaScriptに変換しておく方法があります。

$ npm install -g babel-cli babel-preset-react

上記のようにBabel本体とJSX用のプラグインをインストールすると、以下のコマンドで変換することができます。

$ babel input_jsx_file.jsx > output_js_file.js

他にもwebpackやbrowserifyを使用する等の方法があるようですがこの辺りは使った事が無いので省略します。

「JavaScriptにclass構文ってあったっけ」

これは厳密にはReactとは関係無いですが、Reactに関して調べる際に公式チュートリアルや他サイトのサンプルコード等で頻繁に見かけたので一応。

2015年5月に公開されたECMAScript2015*1(ES6)より、JavaScriptにclass構文が追加されました。

以下はclass構文を使用しない例です。

var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
})

これをclass構文を使用すると以下のように記述することができます。

class Hello extends React.Component {
  render(){
    return (
      <div>Hello {this.props.name}</div>
    );
  }
}

他にもアロー関数やlet, constを使った変数宣言の機能などが追加されていますがそれは省略します。

このES6の構文は、記事を書いている現在ではIE11等のブラウザがまだ未対応*2なので、それ以前の構文に変換する必要があります。

先述したJSXTransformerでは、JSXファイルを読み込む際に以下のように"harmony=true"を追加することで、class構文やアロー関数など、ES6の構文の一部が使用できます。

<script src="path/to/jsxfile.jsx" type="text/jsx;harmony=true"></script>

Babelの場合は、ES6用のプラグインを追加で導入することで変換の際にES6の構文に対応できます。

$ npm install -g babel-preset-es2015

おわりに

ここで挙げた点はReactの公式Docsやチュートリアルをちゃんと読めば分かる事かもしれませんが、私のような英語流し読みマンはもしかしたら同じような所で詰まるかもしれませんので、参考になれば幸いです。

Reactはライブラリという位置づけからも言えますが、JavaScriptは各種フレームワークと比べて、学習コストが低く手が出しやすい割に慣れればかなり便利に扱えると思います。触った事が無い人も、もし興味が湧いたらとりあえずチュートリアルを読んで雰囲気だけでも掴んでみると良いのではないでしょうか。

おわり。
マサカリはお手柔らかにお願いします。

*1:ECMAScript : Ecma Internationalによって策定されている、JavaScriptの標準仕様

*2:参考 : http://caniuse.com/#search=ES6