React Tutorial を ES6 で書き直してみた

Comments

最近の Javascript 周りをキャッチアップできていなかったので、React のチュートリアルを ES6 で書き直すということをしてみた。（作成したプロジェクトはここにおいた。）

ただ、チュートリアルでは jQuery を使用している箇所があったのだが、今回は jQuery の代わりに axios を使用するようにした。

なお、React のチュートリアルを動かすためには、サーバーサイド側の実装も必要だったため、普段使い慣れている Rails を使用した。

React と Rails の連携方法はこちらのクックパッドの記事(https://techlife.cookpad.com/entry/2016/07/27/101015)を参考にした。

構成としては、上記のサイトと同様に、RAILS_ROOT の直下に、client というディレクトリを作成し、そのディレクトリ内で ES6 で Javascript を記述し、トランスパイルしたものを app/assets/javascript/webpack 以下に配置するようにした。 そして、トランスパイルしたものを assets precompile する。

開発環境構築

まず最初に、Rails のプロジェクトを作成する。その後、client ディレクトリを作成し、そのディレクトリ内で React の環境を構築していく。

$ npm init

を実行し、 次に下記のように、webpack, babel, react などをインストールする。

$ npm install -D webpack babel-core babel-loader babel-preset-es2015 babel-preset-react
$ npm install -S react react-dom remarkable axios

webpack.config.js には、出力先が app/assets/javascript/webpack になる設定を行う。

package.js の script 部分は、ビルドコマンドの build と、ファイル変更があったら自動でビルドするようにする watch を記述した。

"scripts": {
  "watch": "webpack -w",
  "build": "webpack -p"
},

これを設定することにより、 * ビルドは npm run build * ファイルが変更されたら、自動でビルドするのは npm run watch

で実行できる。

React チュートリアル

クライアントサイド

ファイル構成としては、

client
├── package.json
├── src
│   ├── app.jsx
│   ├── comment-box.jsx
│   ├── comment-form.jsx
│   ├── comment-list.jsx
│   └── comment.jsx
└── webpack.config.js

という感じになっている。

javascript は基本的には ES6 に書き換えていけば良いのだが、何箇所かハマった点があった。

  • React.createClass を使用する場合と React.Component を継承する違い。
    • 継承した場合、state の初期化は getInitialState メソッドではなく、コンストラクタで行う。
    • また、イベントハンドラを設定する際は、.bind(this) と明示的に指定する必要がある。（ ファットアローでメソッドを定義するのと同じ。）
  • Rails の CSRF 対策。
    • コメントを作成する際、普通に POST すると CSRF エラーになり、登録できない。
    • 対応としては、meta タグの token を取得して、リクエストヘッダーに付与する事で登録できる様になった。jQuery を使用しないため、document.querySelector で代用。

サーバーサイド

Rails 側では React のエントリーページを表示する TopController とコメントの一覧、作成が行える CommentsController を作成する。モデルは Comment モデルを作成。 今回は React メインなのでサーバーサイドの実装は最低限にした。

所感

今更ながら、React.js はなかなかいいなと感じた。数年前に複雑な SPA を開発していた時があったが、この時に仮装 DOM があればもう少し簡単に実装できたかなと思う。

また、Railsとの連携についてだが、もう CoffeeScript は使わず、ES6 を使うようにした方が良いかなと思った。 それと、JS 周りのエコシステムが発達しているので、なるべく Rails のレールには乗らず、JS のエコシステムを使うようにした方が良いかなと思う。しかし、assets precompile を完全に取り除くのは難しそう。。（個人的にはそこまで頑張れないかな。。）

Contents

comments powered by Disqus