【Rails6】RailsアプリでReactを使う!『react-rails』のインストールから使い方まで

はじめに

JavaScriptフレームワークといえば長らくjQuery一強でした。しかしここ数年はAngularJSやReact、Vue.jsといった新しいフレームワークがどんどんと登場しています。

1

過去5年間の検索回数の推移です。2018年5月頃にjQueryとReactが逆転してますね。時代はReactだということです。
今最も旬なJavaScriptフレームワークであるReactをRailsアプリで使ってみようと思います。

  • Rails 6.0.1

インストール

Gemfileに以下を追記してbundle installを行います。

# Rails 5.xは以下も追記
# gem 'webpacker'
gem 'react-rails'

Rails 5.xの場合はgem 'webpacker'を追記してください。ReactのインストールはWebpacker経由で行います。

続いてReactのインストールを行います。

# Rails 5.xは以下も行う
# $ rails webpacker:install
$ rails wepacker:install:react
$ rails g react:install
  • app/javascript/components/ディレクトリが追加されました。Reactの処理はこの中に作成していきます。
  • app/javascript/packs/application.jsにReactを組み込む処理が追加されました。
  • app/javascript/packs/server_rendering.jsが追加されました。サーバー側のレンダリング処理を行っています。

Rails 5.xの場合はapp/views/layouts/applicationi.html.erbのヘッダーに以下を追加します。

<%= javascript_pack_tag 'application' %>

以上でReactを使う準備ができました。

使い方

では、実際にReactを使っていきましょう。
以下のコマンドを実行します。

$ rails g react:component HelloWorld greeting:string
Running via Spring preloader in process 12477
      create  app/javascript/components/HelloWorld.js

モデルを作るときに似てますね。HelloWorldがメソッド名で、greeting:stringが引数名と型でしょうかね。
作成されたコンポーネントは以下のようになっています。

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

実はReactを使ったことがないんですが… 受け取った引数に文字列を付け足して返却しているだけのよくあるサンプルコードのようですね。

では呼び出し側も作っていきます。
まず適当にコントローラーとインデックスを作成します。

$ rails g controller Sample index

app/views/sample/index.html.erbに以下を追記します。

<h1>Sample#index</h1>
<p>Find me in app/views/sample/index.html.erb</p>

<!-- 以下を追記 -->
<h2>
  <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
</h2>

react_componentというヘルパーの第1引数にメソッド名、第2引数に引数を渡しています。

画面表示も確認してみましょう。

$ rails s

2

引数で渡した文字列に「Greeting:」という文字列が付け足されてます。

まとめ

Reactのインストールから使い方を説明しました。
React自体の特徴や書き方を知らないので現時点ではjQueryと比べて特に優れているという気はしませんが、これからReactの勉強をしてRailsアプリに活かせるようにしていきたいと思います。