カナダから来たCanadian Devです。初めての投稿です。よろしくお願いします。バックラウンドがRubyなので、記事の内容は主にRuby on Railsになるかなと思います。

今年Rails 5.1が公開されて、新しい特徴がいろいろ導入されました。特に、Webpackerという機能がRailsに導入されました。このgemの導入によって、RailsとともにReactとAngularのようなJavaScriptモジュールを使えるようになります。

RailsはもともとMPA(Multi-Page Application)が得意なフレームワークですね。RailsはjQueryやCoffeescriptなどでライブDOM変更ができるんですが、今までReactとAngularのような流行ったテクノロジーのサポートがありませんでした。そもそもマルチページアプリケーションが得意なRailsはReactのようなシングルページアプリケーションのモジュールと統合できるでしょうか？ReactもAngularもRailsにないライブ読み込みをするし、Railsにないwebpackというアセット用バンドラーが必要です。webpack機能はRailsがサポートできるのでしょうか？やってみたら、意外と簡単で楽しく使えます！

webpackerのインストールの仕方

webpackerはRailsでwebpackバンドラーが使えるようにするgemです。設定はとても簡単です。Railsアプリには、

1. Gemfileにgem ‘webpacker’を追加して、下記のコマンドでそのgemを実行させる。
   
   ターミナル

   bundle install

   1	bundle install

2. webpackerをインストールする。
   
   ターミナル

   rails webpacker:install

   1	rails webpacker:install

3. React, Angular, Vueのいずれかを使用したい場合、そのモジュールを入れる。例えば、Reactをインストールしたい場合は、rails webpacker:install:reactを実行する。
   
   ターミナル

   rails webpacker:install:react

   1	rails webpacker:install:react

最初からwebpackerが付いている新しいRailsアプリを作りたいなら、さらに簡単です。例えば、Reactを統合したいんだったら下記のコマンドのように指定します。

webpackの一つの特徴はライブ読み込みなので、Railsもその特徴を導入しています。別のターミナルで

を実行すると、Railsサーバーとともにwebpackのライブ読み込みサーバーが立ち上がります。

では、webpackがインストールできたので、これからRailsがReactと繫がるように設定しましょう。

ReactはRailsの中のどこにある？

webpackerのgemを導入したことで、app/javascriptという新しいフォルダが作られます。その中にpacksというフォルダが存在して、そこで全てのReactコンポーネントがコンパイルされます。Rails 5.1から新しいjavascript_pack_tagというタグがあって、そのタグでRailsがReactと繫がります。下記の二つのことを行いましょう。（spreadsheetは例の名前で、ファイル名は自由に変えてください。）

1. app/javascriptフォルダの中にspreadsheetフォルダを作成します。
2. app/javascript/packsフォルダの中にjsファイルを作成します。例えば、spreadsheet.jsを作成して、そのファイルの中に
   
   app/javascript/spreadsheet.js

   import 'spreadsheet'

   1	import 'spreadsheet'

   
   を記述します。spreadsheet.jsファイルにimport 'spreadsheet'を指定したことでRailsがspreadsheetというフォルダの中のコンポーネントを読み込みます。

Reactのコンポーネント

• app/javascript/spreadsheetフォルダの中にReactと同じようにindex.jsというファイルとコンポーネントを作成します。
• コンポーネントのシンタックスはReactと同じです。
  
  app/javascript/spreadsheet/Spreadsheet.jsx

  JavaScript

  import React, { Component } from 'react'; class Spreadsheet extends Component {  render() {   return (    <div>     <h1>動いています！</h1>    </div>   )  } } export default Spreadsheet;

  1 2 3 4 5 6 7 8 9 10 11 12

  import React, { Component } from 'react';   class Spreadsheet extends Component {  render() {   return (    <div>     <h1>動いています！</h1>    </div>   )  } } export default Spreadsheet;

• index.jsファイルにはコンポーネントの正しいパスが指定してあるのかを確認してください。
  
  app/javascript/spreadsheet/index.js

  JavaScript

  import React from 'react'; import ReactDOM from 'react-dom'; import Spreadsheet from './Spreadsheet'; document.addEventListener('DOMContentLoaded', ()=> { const container = document.body.appendChild(document.createElement('div')); ReactDOM.render(<Spreadsheet/>, container) }

  1 2 3 4 5 6 7 8

  import React from 'react'; import ReactDOM from 'react-dom'; import Spreadsheet from './Spreadsheet';   document.addEventListener('DOMContentLoaded', ()=> {   const container = document.body.appendChild(document.createElement('div'));   ReactDOM.render(<Spreadsheet/>, container) }

Railsのビューでフィニッシュ！

最後に、javascript_pack_tagでReactのコンポーネントをビューに渡します。読み込ませたいpackファイルをタグで指定して、head要素に必ず入れてください。

これでRailsフレームワークでReact開発ができるようになります。Reactだけではなく、AngularもVueもサポートしているので、Rails 5.1でいろいろな楽しい開発ができるでしょう。

That’s all, folks!