Rails5におけるJavaScriptの取り扱い(jQuery, React and ES6)

/

導入

Rails5でのJavaScriptの扱いに関して少し調べたのでメモっておきます。

JavaScriptのインクルード

Railsではアセットパイプラインという機能を使用してWebページにJavaScriptを読み込む事が出来ます。

アセットパイプラインとは

JavaScriptやCSSを結合したり圧縮したりする。また、CoffeeScriptやSass、ERBの言語を使ってJavaScriptやCSSを書くこともできる。

アセットパイプライン(Asset Pipeline) – Rails ドキュメント

短く言ってしまえばJavaScriptやCSSの依存関係を整理してまとめてくれる機能で、指定したパスにあるJSファイルを自動的に読みこんでWebページに適用してくれます。

読み込み対象となるJSファイルはapp/assets/JavaScripts/application.jsで指定する事が出来ますが、app/assets/JavaScripts/以下に置かれたJSファイルはデフォルトで読み込み対象となっているのでapp/assets/JavaScripts/app.jsのようにファイルを配置するだけでWebページにJavaScriptを適用させる事が出来ます。

//assets/JavaScripts/以下を読み込む
//= require_tree .

JavaScriptの実行

実際にJavaScriptを設置してアセットパイプラインを試してみます。

まずJavaScriptを適用させるためのviewを作成し

h1 StaticPages#home

ルーティングを設定します。

Rails.application.routes.draw do
  get 'static_pages/home'
  root 'static_pages#home'
end

次に以下のようなJavaScriptファイルを作成して/assets/JavaScripts/に配置します。

var str = "JS Test in Rails";
console.log(str);

Railsの組み込みサーバーを起動してlocalhost:3000に接続すると配置したJavaScriptが読み込まれている事が解ります。

rails server
アセットパイプラインによるJSの読み込み

jQuery

RailsではRails newコマンドでAppを作った時点でassets/JavaScripts/application.jsからjQueryが読み込まれているので、特に設定をしなくてもjQueryを利用する事が出来ます。

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
$(function(){
  $('h1').css('color','orange')
});
jQueryによるCSSの操作

React

Rails上でのReactの実行も試してみます。
Reactの導入はいくつか方法が考えられますが、Rails用のgemがあるようなので今回はこれを利用してみました。
react-rails

インストール

gem 'react-rails'
$ bundle install

以下のコマンドを実行するとRailsにReactをインストールするスクリプトが実行されます。

rails g react:install

インストールが完了するとマニフェストファイルとapp/assets/javascripts/components/ディレクトリが作成されるのでassets/JavaScripts/application.jsでReactをアセットパイプラインの読み込み対象に設定します。

//= require react
//= require react_ujs
//= require components

コンポーネントの作成

react-railsではReactのコンポーネントを作成してくれるコマンドも用意されています。

rails g react:component TestReact

コマンドを実行すると/assets/javascripts/components/にコンポーネントの雛形作られるので、これを元にページに見出しを表示するコードを作成します。

var TestReact = React.createClass({

  render: function() {
-    return <div />;
+    return <h2>Test React</h2>;
  }
});

作成したコンポーネントはテンプレートからreact_component()でコンポーネントの名前を指定して呼び出します。

= react_component('TestReact')

今回はslimを利用しましたがhamlだとこのように書きます。

<%= react_component('TestReact') %>
コンポーネントを呼び出して表示

ES6

Railsでの基本的なJavaScriptの扱い方をいくつか確認してみましたがそのきっかけがRails5は標準でBabelでES6に対応しているらしいという話を聞いたからで、噂だけでReactの導入方法などを試してしまったのですが肝心のRails5のリリース ノートを見てもES6が使えるという情報が確認出来ません。

もしやと思ったので確かめてみます。

デフォルトでRailsがES6に対応しているかどうかの確認なのでES6でコードを書けば検証出来るのですが、普段使っているChromeはブラウザがある程度ES6に対応していて都合が悪いので検証用のブラウザとしてMidoriを使います。

$ apt install midori

クラスを使ったコードを書く。

*document.write()はHTML5では非推奨のようですが単なる動作確認なので気にせずにいきます。

class App {
  constructor () {
    this.text = "Class Test in Rails";
  }
 
  write() {
    document.write("<p>" + this.text + "</p>");
  }
}

app = new App;
app.write();

組み込みサーバーを起動し同じページをそれぞれのブラウザから開くとChromeで開くと表示される内容がMidoriでは表示されません。
ブラウザで表示に違いが出るという事はRailsがES6のコードをコンパイルてくれているわけではないという事なので、現段階でRails5がES6にデフォルトで対応してくれているわけではないようです。
残念。

あとがき

らしいという話だけで思い込んで勇み足を踏んでしまいました。

ただ無駄だったかといえばreact-railsの使い勝手が良さそうという収穫もありました。
ページからのコンポーネントの呼び出しが思ったより簡単だったりしたので他にも色々試してみる価値ありそうです。