Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Rails 5.1でReact.js連携アプリを構築してみよう

サンプルコードで学ぶRuby on Rails 5実践入門 番外編

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/06/12 14:00

 2017年4月27日に正式リリースされたRuby on Rails 5.1では、フロントエンド回りに大きな変更がありました。新たに採用されたYarnやwebpackなどを用いて、Rails上でReact.js連携アプリを構築する手順を紹介します。また、ReactベースのMaterial-UIを使ったサンプルも紹介します。

目次

対象読者

  • 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パッケージをインストールするコマンド(後述)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:サンプルコードで学ぶRuby on Rails 5実践入門

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5