mzumi's blog

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

September 29, 2016

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

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

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

React と Rails の連携方法はこちらのクックパッドの記事を参考にした。

構成としては、上記のサイトと同様に、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"
},

これを設定することにより、

で実行できる。

React チュートリアル

クライアントサイド

ファイル構成としては、

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

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

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

サーバーサイド

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

所感

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

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