メニューを閉じる

テクノモバイルグループ

メニューを開く

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を実行させる。
  2. webpackerをインストールする。
  3. React, Angular, Vueのいずれかを使用したい場合、そのモジュールを入れる。例えば、Reactをインストールしたい場合は、rails webpacker:install:reactを実行する。

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

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

を実行すると、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を作成して、そのファイルの中に

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

Reactのコンポーネント

  • app/javascript/spreadsheetフォルダの中にReactと同じようにindex.jsというファイルとコンポーネントを作成します。
  • コンポーネントのシンタックスはReactと同じです。
  • index.jsファイルにはコンポーネントの正しいパスが指定してあるのかを確認してください。

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

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

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

That’s all, folks!


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

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

採用情報の詳細はこちら


Qangaroo(カンガルー)

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

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE