対象読者
- Rails5.1より古いRailsを触ったことがある方
- Railsは触ったことがないが、Webフレームワークを触ったことがある方
- Railsは触ったことがないが、Reactを触ったことがある方
本記事で動作確認済みの環境
- OS X Yosemite
- Ruby 2.4.1
- Ruby on Rails 5.1
- Yarn v0.23.4
- webpack 2.5.1
- React 15.5.4
環境構築
まずは前提となる、以下の環境を構築します。
- Node.js
- Yarn
- Ruby on Rails
なお、Rubyのインストール手順は省略します。rbenv、ruby-buildによるRubyインストールは事前に済ませるようにしてください。
Node.jsのインストール
Node.jsは、nodebrew経由でインストールします。nodebrewは、Rubyでいうところのrbenvのような存在で、同一のPC内での複数バージョンを管理しやすくするライブラリです。
詳細な手順の解説は省略しますが、実行するコマンドを列挙しておきます。
# nodebrewインストール brew install nodebrew # Node.jsインストール nodebrew install-binary latest # Node.jsバージョン確認 nodebrew list # インストールしたバージョンを使う nodebrew use v7.10.0 # nodebrewへのパスを通す echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bashrc . ~/.bashrc # 指定バージョンのNode.jsが使えることを確認 node -v
Yarnのインストール
Yarnとは、JavaScriptパッケージマネージャーです。RubyでいうところのRubyGemsに該当します。YarnのインストールはHomeBrewで行います。
# Yarnインストール brew install yarn # バージョン確認 yarn --version
Rails 5.1環境構築
Railsのインストール手順については省略します。詳細な手順は以下のRails5連載記事を参照してください。
Railsプロジェクトを新規作成します。Rails 5.1より新たに--webpackオプションが追加されました。webpackは、モジュールバンドラと呼ばれ、アセットファイルを1つにまとめる役割を担います。--webpackオプションを指定すると、webpackerというwebpackをラップするgemを通してrailsコマンドにwebpackを操作するための拡張タスクが追加されます。追加された拡張タスクは、以下のコマンドで確認することができます。
bin/rails webpacker
Available webpacker tasks are: webpacker:install Installs and setup webpack with yarn webpacker:compile Compiles webpack bundles based on environment webpacker:check_node Verifies if Node.js is installed webpacker:check_yarn Verifies if yarn is installed webpacker:verify_install Verifies if webpacker is installed webpacker:yarn_install Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn webpacker:install:react Installs and setup example react component webpacker:install:vue Installs and setup example vue component webpacker:install:angular Installs and setup example angular2 component
--webpackオプションを指定せずRailsプロジェクトを作成した後、webpackの環境構築をしたい場合はこれらのタスクコマンドを使用します。
本記事ではReact.js連携アプリを扱うため、--webpackオプションの引数にJavaScriptのフレームワークであるreactを指定します。このようにRails新規作成時にオプションを指定すると、環境構築時にbin/rails webpacker:install、bin/rails webpacker:install:reactが実行されます。
以下のコマンドを実行してRailsプロジェクトを新規作成します。実行中にGemfileを更新するか確認を求められるので「Y」を入力します。
bundle exec rails new . --webpack=react
create README.md
create Rakefile
create config.ru
create .gitignore
conflict Gemfile
Overwrite /codezine/rails51_sample/Gemfile? (enter "h" for help) [Ynaqdh] Y
…（中略）…
* bin/rake: spring inserted
* bin/rails: spring inserted
ここまでの手順でReact.jsと連携するRailsアプリのベースが整いました。webpack=reactオプションによって追加される主なディレクトリ／ファイルの役割は以下の通りです。
| 追加されたディレクトリ／ファイル | 役割 |
|---|---|
| .babelrc | Babelの設定ファイル |
| .postcssrc.yml | PostCSSの設定ファイル |
| yarn.lock | Yarnパッケージの依存関係を記述したファイル |
| config/webpack/ | webpackの設定ファイルのディレクトリ |
| node_modules/ | YarnでインストールされるJavaScriptパッケージの格納先 |
| app/javascript/packs/application.js | webpackによるJavaScriptコンパイル対象を記述するファイル（後述） |
| app/javascript/packs/hello_react.jsx | React.jsのサンプルファイル（後述） |
| bin/webpack | webpackによってコンパイルするコマンド（後述） |
| bin/webpack-dev-server | webpackコンパイルを自動化するコマンド（後述） |
| bin/yarn | YarnでJavaScriptパッケージをインストールするコマンド（後述） |
