結論
最終的にはReduxを既存プロジェクト(Rails4)に導入するのは、フロントエンドエンジニアがほとんどいない現在のチームでは学習コストが高すぎるので、まずはReactのみを導入してコンポーネント単位でJSを書くことへの抵抗を無くすことを目指すことにしました。
この記事ではその決定に至るまでに学んだことを書いていきます。
Railsのフロントエンド開発環境の導入方法を調査
reactだけではなくES6やnpmを活用してJSのコードを書いていきたかったので、Webpackのビルド環境を入れることにしました。
Rails4にWebpackを導入する際には以下の2つの方針があります。
- 1. Webpackのコンパイルファイルを
app/assets配下に置く - 2. RailsのSprocketsは完全に捨ててWebpackで全てのビルドを行う
2の方針はJS/CSSの圧縮・結合、キャッシュ対策のダイジェスト追加、sass/AltJSの変換等を全てwebpackに置き換える必要があります。
結構大規模な既存プロジェクトでnamespace毎に異なるマニフェストファイルで多数のJSファイルを読み込んでいるような環境だったので、Sprocketsを捨て去るだけで一大プロジェクトになりそうだと思い、今回は1の方式を取ることにしました
Webpackの書き方を学習
Webpackの書き方については以下の2記事を押さえておけば大体理解できるようになるかと思います。
webpack.config.jsの読み方、書き方 - dackdive's blog http://dackdive.hateblo.jp/entry/2016/04/13/123000#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
【意訳】Webpackの混乱ポイント - Qiita http://qiita.com/chuck0523/items/caacbf4137642cb175ec
Reduxチュートリアルで学習(環境構築編)
Reactはある程度書けるようになっていたので、以下の記事を元にReduxを基本から学ぶことにしました。
Reduxチュートリアル動画を見ながらReduxを基礎の基礎から - Qiita http://qiita.com/insight3110/items/4d212ecef6992e8eaee5
以下学んだことの要点を整理します。
必要なnpmモジュールの用途理解
-
babel-core
- 以前は
babel,babel-cliが必要だったが、現在はbabel-coreに置き換わっている - ES6等のトランスコンパイルによく利用されるライブラリbabelを使うのに必要
- 以前は
-
babel-loader
- webpackでbabelを使ってトランスコンパイルするのに必要
- トランスコンパイルとはES6等のブラウザで直接表示できない新しい技術を使っているコードをブラウザが認識できるコードに変換する作業のこと
-
babel-preset-es2015
- ES6を素のJavaScriptにトランスコンパイルするのに必要
- 内部ではtransform-es2015-arrow-functions, transform-es2015-block-scoping等のpresetを読み込んでいる
-
babel-preset-react
- Reactを素のJavaScriptにトランスコンパイルするのに必要
- transform-react-jsx等のpresetを読み込んでいる
- これのおかげでReact内でJSXを使うことが出来る
-
expect
- テストで使うアサーションライブラリ
- テストはdescribeやit等のテストを書く上で便利なAPIを提供してくれるテスティングフレームワークと個々のテストの判定を行うアサーションライブラリで構成される
- テスティングフレームワークにはJasmine,mocha等があり、アサーションライブラリにはchai,expect等がある
- 今回のチュートリアルではexpectを使っている
- よくJSではさらにテスト実行環境用としてKarmaを別途使い、Karma+Jasmine+expectとかの構成でテストする
-
react
- その名の通り、reactを使うのに必要
-
react-dom
- DOMにコンポーネントを出力するのに必要
- reactv0.14からReactから分離されたため、別途読み込みが必要
- ちなみにReactのバージョンはv0.14->v15.xに一気にバージョンアップした
-
react-redux
- reduxとreactを連携させるために必要。reduxは状態管理のためのフレームワークなのでreact以外にも組み合わせることが可能。
-
redux
- Fluxにインスパイアを受けたフレームワークであるreduxを使うのに必要
-
webpack
- JS/CSS/画像等のファイルに対して圧縮/結合/変換等の処理を行うことが出来るツール。用意されたAPIを使った簡単な設定を書くだけで良いため、自身で処理内容を逐一書かなくてはいけなかった従来のgruntやgulpよりも遥かに楽
babelの設定方法
babelを使ったトランスコンパイルに使うデフォルトのpresetを指定する。
方法には以下の2つがある。今回は入門ということもあり.babelrcを用意することにした。
- 1 .babelrcを配置する
- 2 package.jsonのbabelオプションに指定する
次回の内容
環境構築は終わったので、次回はReduxチュートリアルをやってみて学んだReduxの構成要素・原則について書いていきます。
参考文献
Rails 4.2でSprocketsを捨ててwebpackに移行する - Qiita http://qiita.com/dakatsuka/items/c815a27b9740c843bee0
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ http://engineer.crowdworks.jp/entry/2016/05/24/174511
.babelrcと.eslintはpackage.jsonに - Qiita http://qiita.com/sakana/items/c64abe5db3f9ea76dbf2