Rails←React導入

弊社は創業からRuby on Railsを使用していましたが、創業から3~4年が経過した時点で、

「あれ・・サイト表示重くない？？」

「画面遷移10秒くらい経たないと変わらないページあるよ・・」

とちらほら社内外からご意見（クレーム）をいただくことがあり、じゃあフロントエンド改善するかという流れになりました。React / Vueどちらか導入したいよねということになったのですが、ベースがrailsということで、erb / slimなどのviewの中でreactを使用できるgemがあるということでreact-railsを採用しました。

Gemの導入

gemfileにgemを記述し、gemインストール後コマンドを実行し、Reactをインストール。

※ rails5以前は、webpackerが導入されていない場合導入が必要でshakapackerが必要かと思います。

# Gemfile

gem 'react-rails'

$ bundle install

$ rails wepacker:install:react
$ rails g react:install

上記コマンドを実行することで、app/javascript配下にcomponentsというフォルダが作成されるはずです。

今後作成していく、Reactコンポーネントファイル（.jsxファイル）についてはcomponentsフォルダ内で管理します。フォルダ内の構成については各社各人によるので、弊社はAtomicデザイン（以下の記事を参照した）を採用しました。

ファイルの準備

# routes.rb

Rails.application.routes.draw do
  root "hoges#huga"
end

controller生成のため、rails g controller hogesを実行し、アクション名記載。

# hoges_controller.rb

class hogesController < ApplicationController
  def huga
  end
end

生成されたview/hogesディレクトリの中に、huga.html.erbを作成し、該当ファイル内にReactコンポーネントを記述していきます。

Reactコンポーネントの作成

$ rails g react:component <コンポーネント名>

※ ちなみに生成時に渡す予定のpropsについても記述することも可能。

$ rails g react:component <コンポーネント名> <props名:データ型>

試しに、testコンポーネントを作成する場合。

$ rails g react:component test

以下のファイルが生成される。

# test.jsx

import React from 'react';

const test = () => {
  return (
     <h1>Hello from React</h1>
  );
};

export default test;

※ 上記は関数コンポーネントだが、classコンポーネントでも機能する。

# test.jsx

class Test extends React.Component {
  constructor (props) {
    super(props)
  }
  
  render () {
   return (
     <h1>Hello from React</h1>
   )
  }
}

Railsのviewファイル内でReactコンポーネントを読み込ませる

該当のファイル（今回はhuga.html.erbとする）に先ほど作成したtest.jsxを読み込ませる場合は、以下のように記述します。

<%= react_component("Test") %>

また、viewファイルからコンポーネントにpropsを渡したい場合は、以下のように記述する。

<%= react_component("Test", {
  hoge: 'huga',
  fizz: true,
  buzz: false
}) %>

上記でrailsアプリケーションにreactを簡単に導入することができます。

ただ本gemについては、基本的にサーバとの通信はRailsを介さなければならないので、フロント・バックエンドを切り分け、react_componentメソッドを使用しないようにするためにはapplication.jsによしなに記述する必要があります。

READY TO FASHIONでは一緒に働くエンジニアを募集しています！

ファッションに興味があるエンジニアのご応募お待ちしております！