Rails 5でバージョンアップしたTurbolinks 5
連載第1回でも紹介した通り、RailsはTurbolinksと呼ばれる機能を備えています。Turbolinksは、ページ遷移をAjax化しJavaScriptやCSSなどのパースを省略することで高速化する機能です。Turbolinksはgemとして提供されます。
Rails 5.0では、Turbolinks 5がデフォルトでインストールされるようにGemfileに記述されています。
…（中略）… # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' …（中略）…
既にこれまで開発してきたrails5_sampleプロジェクトでは、TurbolinksがONになっています。先ほど確認した通りですが、app/assets/javascripts/application.jsの//= require turbolinksという記述が該当箇所です。
次にレイアウトファイルを確認します。Railsでレンダリングするhtmlのひな形となるビューファイルはapp/views/layouts配下にレイアウトファイルとして配置します。app/views/layouts/application.html.erbを確認します。
…（中略）…
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
…（中略）…
headタグにスタイルシートとJavaScriptのタグを出力するstylesheet_link_tag、javascript_include_tagヘルパーがあります。いずれも、data-turbolinks-track: reloadと指定することで、TurbolinksがスタイルシートやJavaScriptの変更を検知することができるようになります。なお、Turbolinks 5以前では、data-turbolinks-track: trueと指定すればよかったのですが、Turbolinks 5から指定方法が変更になっています。
Turbolinks 5は以前のパッケージからiOSアプリやAndroidアプリのウェブビューへの対応など、新しい設計の元で全て書き換えられているため、使い方が大幅に変更になっており注意が必要です。その分、適切に使用することで、手軽にRailsアプリケーションの高速化を期待することができます。
Rails 5.1からのフロントエンド開発環境
Rails5.1では、前述の通り、フロントエンド環境に大幅に変更されることが決定しています。ここでは、Yarnパッケージのサポートとwebpackのサポート、Rails 5.1への取り込みは見送られたものの、将来の導入が見込まれるSprockets 4の変更点についてより詳細に紹介します。
Yarnパッケージのサポート
Rails 5.1では、新規Railsプロジェクトを作成するrails newコマンド実行時に、デフォルトでYarnパッケージがサポートされます。前提として、事前にyarnコマンドをインストールしておく必要があります。macOSであれば、以下のコマンドでYarnをインストールできます。
$ brew install yarn
Rails 5.1でYarnがデフォルトになったことで、vendor/package.jsonが追加されます。また、アセットパイプラインのパスにvendor/node_modulesが自動で追加されます。また、webpackによってJavaScriptライブラリ群がインストールされると、vendor/package.jsonに基づいたvendor/yarn.lockファイルが生成されます。Railsでいうと、vendor/package.jsonがGemfileに、vendor/yarn.lockがGemfile.lockに、vendor/bundleがvendor/node_modulesに、それぞれ相当します。このようにgemを管理する方法と類似の方法で、JavaScriptライブラリを依存関係も含めて管理することができます。
webpackのサポート
webpackは、webpackerというgemを追加でインストールすると有効になります。webpackerは、JavaScriptライブラリの依存関係の処理やYarnパッケージの管理を、webpackを通じて提供します。
webpackerを有効にした状態で新規Railsプロジェクトを作成するrails newコマンドを実行すると、最後にwebpackのインストールコマンドが実行されます。新しいYarnパッケージを追加した場合は以下のコマンドでインストールします。これは新たにgemをインストールする場合のコマンドである、bin/bundler installと似ています。
$ bin/rails webpack:install
なお、Facebook社が開発しているJavaScriptフレームワークであるReact.jsもrails newコマンドに--webpack=reactオプションを指定するとインストールして使うことができます。
Yarnパッケージとwebpackのサポートは、これまでのRailsでは統一したJavaScriptライブラリの管理方法が提供されていなかったことを考えると、大きな進歩といえます。
Sprockets 4の変更点
Sprockets 4は以下のような新機能が備わっています。
- ソースマップ
- BabelによるES2015のサポート
- node_modulesパスをサポート
各機能についてご紹介します。
Sprockets 4の変更点：ソースマップ
ソースマップは、アセット関連のデバッグを容易にする仕組みです。ソースマップと呼ばれるファイルをブラウザに読み込ませると、最小化／圧縮される前の元ファイルを見ながらアセットのデバッグを行うことができます。JavaScriptでソースマップファイルを指定するには、デバッグ対象のJavaScriptファイルの末尾に以下の記述を追加します。
//# sourceMappingURL=application.js.map
また、CSSでソースマップファイルを指定するには、デバッグ対象のCSSファイルの末尾に以下の記述を追加します。
/*# sourceMappingURL=application.css.map */
Sprockets 4の変更点：BabelによるES2015のサポート
Sprockets 4ではBabelによってES2015がサポートされます。BabelはES2015など新しい仕様のJavaScriptソースコードを、一般的なブラウザがサポートしているES5形式のJavaScriptに変換してくれるものです。coffee-railsがCoffeeScriptを実行可能なJavaScriptに変換するのと似ていますね。
BabelによるES2015サポートを有効にするには、babel-transpilerというgemをインストールする必要があります。このgemをインストールしてES2015を有効にすると、拡張子.es6というアセットをES2015と見なしてES5形式のJavaScriptコードへの変換を自動で行ってくれるようになります。
Sprockets 4の変更点：node_modulesパスをサポート
前述の通り、webpackeによるYarnモジュールの管理を行う場合、vendor/node_modules配下にYarnモジュールがインストールされます。これらのJavaScriptパッケージを読み込むためのRails側の設定が必要になります。例えばconfig/application.rbなどで以下のようにアセットのパスを追加すると、Sprockets形式の//= requireでvendor/node_modules配下のJavaScriptパッケージを指定して利用できます。
config.assets.paths << Rails.root.join('vendor/node_modules')
まとめ
今回はRails 5が提供するフロントエンドの開発環境を解説しました。次回はRails 5目玉機能の1つであるAction Cableのサンプルアプリ実装を通してAction Cableへの理解を深めていきます。
