Rails 5.0から5.1のバージョンアップで大きく変わるフロントエンド開発環境

サンプルコードで学ぶRuby on Rails 5実践入門 第6回

　前回は作成したログインフォームに対し、ユーザー登録時にパスワードを設定できるようにした上で、ログイン／ログアウトフォームを開発しました。今回はRails 5が提供するフロントエンドの開発環境を解説します。

Rails 5.1で大きく変更されるフロントエンド開発環境

　Rails 5が提供するフロントエンド環境を解説する前に、現在開発が進められているRails 5.1におけるフロントエンド環境の変化に触れておきます。Rails 5.1では、これまでRailsの歴史の中で培われてきたフロントエンド環境を刷新し、新しい環境へと移行する方向で開発が進められています。

表1　Rails 5.0までのフロントエンド環境の主な特徴

主な特徴	説明
アセットパイプライン	sprockets-railsというgemとして提供されている。JavaScriptやCSSなどのアセットを最小化／圧縮する機能を提供する。
JavaScriptライブラリにjQueryを採用	jquery-railsというgemとして提供されている。Rails 5.0まで、デフォルトで有効。

　一方、Rails 5.1では、採用されてきたこれらのフレームワークをリプレイスする方向です。近年、HTML5やCSS3、JavaScriptの開発フレームワークは進化のスピードが日に日に増してきています。JavaScriptの次期バージョンであるECMAScript 2015（ES2015）など、「最新の環境でフロントエンド開発を行いたい」「よりリッチなUIを持つSPA（シングルページアプリケーション）を開発したい」などの要件が増えてきた背景があります。Rails 5.1での主な変更点は以下の通りです。

• jQuery依存からの脱却
• JavaScriptライブラリ管理にYarnやwebpackをサポート

　これまでjQueryに依存していた箇所がありましたが、JavaScriptの実装に書き換えられ、jQuery依存がなくなりました。

　また、JavaScriptライブラリのインストールにYarnがサポートされ、同様にライブラリ間の依存関係を管理するwebpackもサポートされます。RubyにおけるGemに対応するのがJavaScriptにおけるYarnであり、RubyにおけるBundlerに対応するのがJavaScriptにおけるwebpackです。

　Rails 5.1では、その他にもフロントエンド環境における変更点があります。今年のリリースに向けて開発が進められており、最新の動向を注視する必要がありそうです。

表2　Rails 5.1のフロントエンド環境の主な特徴

主な特徴	説明
jQuery依存からの脱却	これまでjQueryで実装されていた箇所がJavaScriptで書き換えられた。これによりjQuery依存がなくなる。
JavaScriptライブラリ管理にYarnやwebpackをサポート	Yarn、webpackをサポートし、最新のJavaScriptライブラリを使用した開発が可能になる。