メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.12.01

プログラミング

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

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

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

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

webpackerのインストールの仕方

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

  1. Gemfilegem ‘webpacker’を追加して、下記のコマンドでそのgemを実行させる。
    bundle install
  2. webpackerをインストールする。
    rails webpacker:install
  3. 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がインストールできたので、これからRailsReactと繫がるように設定しましょう。

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

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

  1. app/javascriptフォルダの中にspreadsheetフォルダを作成します。
  2. 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!


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

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事