FrontEnd

Rails 7でフロントエンド開発が大きく変わる

投稿日:

はじめに

12月15日に Rails 7.0 がリリースされました。今回の変更の中でおそらく一番大きな変更になるのは、フロントエンド周りで、 Node.js が(標準で)使われなくなった点ではないでしょうか。

今回は、そのあたりの経緯と新たに追加されたGemについて紹介します。

脱Node.jsの経緯


DHH氏のブログ「Modern web apps without JavaScript bundling or transpiling」によると、3つの理由が挙げられています。

  1. 主要ブラウザがES6をサポート
  2. HTTP/2の普及
  3. Import Mapsの存在

まず1つ目の理由は、主要なブラウザが軒並み ES6 をサポートした事により、 ES6 で書かれたコードをトランスパイルすることなく、そのまま動作するようになったことです。
2つ目の理由は、 HTTP/2 が普及したことにより、 Webpack でファイルを結合するメリットが薄れたことです。

3つ目の理由は、 Import Maps によりインポートする ES Modules をモジュール名だけで記述できるようになったことにより、コード上での管理が容易になったことです。

Rails 7.0でのアセット管理

Rails 7.0 では、新たに4つのGemが登場します。これまでとは異なり、開発者はこれらのGemを自分のプロジェクトに合う組み合わせで採用することになります。

新たに追加されるGemは、propshaftimportmap-railsjsbundling-railscssbundling-railsです。これらを簡単に説明すると、 propshaftsprockets に替わるアセットパイプラインライブラリ。 importmap-railsRails 7.0 からのJavaScriptアセット処理のデフォルトとして採用されたライブラリ。 jsbundling-railscssbundling-rails はどちらも、JavaScript(またはCSS)を任意のbundlerで扱うためのライブラリです。

propshaftimportmap-rails については、後ほどもう少し詳しく紹介します。

importmap-railsjsbundling-railscssbundling-railspropshaft (もしくは sprockets )と併用する必要があります。

一般的には以下のような組み合わせで使われるのではないでしょうか。

  • propshaft(もしくはsprockets)+importmap-rails
  • propshaft(もしくはsprockets)+jsbundling-rails(+cssbundling-rails)
  • propshaft(もしくはsprockets)+webpacker(従来どおり)

propshaft

前述のとおり、 propshaftsprockets の替わりになるアセット管理ライブラリです。

propshaft は、必要な ES Modules ファイルをファイル名にダイジェストを付けて出力先にコピーします。その際、トランスパイル、バンドリング、圧縮などは行わないため、 sprockets と比べて高速に動作します。

assets:precompile を呼ぶと、 config.assets.paths に設定されたすべてのパスのアセットが public/assets にコピーされます。この際、 sprockets と同様にソースファイルは探査され、ファイル名にはダイジェストが付与されます。

また、 asset-path("ファイル名") というCSS関数が用意されており、プリコンパイル時に url("/assets/image-f2e1ec14d6856e1958083094170ca6119c529a73.svg") のように変換されます。

importmap-rails

Rails 7.0 よりJavaScriptアセット処理のデフォルトとして採用されているライブラリです。バージョン管理されたファイルやダイジェスト版に対応した論理名で、ブラウザから直接JavaScriptモジュールをインポートすることができます。

import maps は現在ChromeやEdgeなどの一部のブラウザでのみサポートされています。これら以外のブラウザで使用するには、 shim が必要です。

<%= javascript_importmap_tags %> タグを使用することで、 es-module-shim が読み込まれて使用できるようになります(この他にも、JSON設定のセットアップや app/javascript/application.js とのマッピングも行われます)

JavaScript CDN経由でのnpmパッケージの利用

importmap-rails では、npmパッケージをJavaScript CDNから取得するようになっています。ここではプリコンパイルされた配布用バージョンが利用可能になっており、それらを高速に配信します。

npmパッケージのピン留め・解除・更新は、 ./bin/importmap コマンドで行えます。このコマンドは JSPM.orgのAPI でパッケージの依存関係を解決し、 config/importmap.rb にファイルをピン留めします。コマンドの実行例は以下のようになります。

これで、以下のように application.js のエントリポイントから利用できるようになります。

さいごに

Rails 7.0からのフロントエンド開発環境の変更点を紹介しました。この他にも、Hotwireの変更もありRailsだけでもフロントエンド開発がやり易くなっているようです。

おすすめ書籍

改訂2版 パーフェクトRuby パーフェクト Ruby on Rails 【増補改訂版】

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

フォロー

blog-page_side_responsive

2021年12月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。