Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/04/26 14:00

 前回は作成したログインフォームに対し、ユーザー登録時にパスワードを設定できるようにした上で、ログイン/ログアウトフォームを開発しました。今回は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ライブラリを使用した開発が可能になる。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2017/05/02 12:42 Rails 5.1正式リリースに伴いSprockets 4に関する記述を修正。

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:サンプルコードで学ぶRuby on Rails 5実践入門
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5