Ruby on RailsでReact開発をしてみました！ | GROUP DEV BLOG

2017.12.01

プログラミング

Ruby on RailsでReact開発をしてみました！

カナダから来た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アプリには、

Gemfileにgem ‘webpacker’を追加して、下記のコマンドでそのgemを実行させる。
```
bundle install
```
webpackerをインストールする。
```
rails webpacker:install
```
React, Angular, Vueのいずれかを使用したい場合、そのモジュールを入れる。例えば、Reactをインストールしたい場合は、rails webpacker:install:reactを実行する。
```
rails webpacker:install:react
```

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

rails new アプリの名前 --webpack=react

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

./bin/webpack-dev-server

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

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

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

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

app/javascriptフォルダの中にspreadsheetフォルダを作成します。
app/javascript/packsフォルダの中にjsファイルを作成します。例えば、spreadsheet.jsを作成して、そのファイルの中に
```
import 'spreadsheet'
```
を記述します。spreadsheet.jsファイルにimport 'spreadsheet'を指定したことでRailsがspreadsheetというフォルダの中のコンポーネントを読み込みます。

Reactのコンポーネント

app/javascript/spreadsheetフォルダの中にReactと同じようにindex.jsというファイルとコンポーネントを作成します。

コンポーネントのシンタックスはReactと同じです。

import React, { Component } from 'react';

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

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

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要素に必ず入れてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Rails 5.1 app</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'spreadsheet' %>
  </head>
  <body>
    ...
  </body>
</html>

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

That’s all, folks!

【記事への感想募集中！】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！