Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに

Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。

Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7

— Ruby on Rails (@rails) December 15, 2021

Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。

Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパイラのBabel、モジュールハンドラのWebpack、Node.jsなどのツールが用いられていました。

これによりECMAScript 2015（ES6）のような新しいJavaScript言語仕様でプログラミングでき、Node.jsのさまざまなパッケージなどを開発に活用できて、Webアプリケーションを構成する複数のモジュールやファイルを結合するといった処理が実現されていました。

今回リリースされたRails 7では、これらのツールを用いない構成がデフォルトとなりました。Railsの開発者であるDHH氏はこれらを持ってRails 7を「Fullfilling a vision」（ビジョンを完全に満たすもの）と、ブログのタイトルにしています。

DHH氏が指摘した3つの理由。ES6、HTTP/2、Import map

DHH氏が、BabelやWebpack、Node.jsといったツールを使わなくても優れたフロントエンドの開発環境が実現できると考えた理由が、同氏による8月12日付けのブログ「Modern web apps without JavaScript bundling or transpiling」で説明されています。

"So despite what a leap forward ES6 everywhere, ubiquitous HTTP2, and import maps combine to present, there's clearly still a class of apps that'll need Webpack. Not everyone can take these things out yet, but those who can will be mightily pleased." https://t.co/PUXa1j44wb

— DHH (@dhh) August 12, 2021

理由の1つ目は、主要なブラウザでES6がサポートされ、レガシーなInternete Explorer 11は事実上サポートが不要になったことです。DHH氏はブログに次のように書いています。

This means we don't need a transpiling step to turn ES6 into something that'll run in the browser. It runs just fine, no changes needed. That's huge.

これはつまり、ブラウザで実行するためにES6をトランスパイルして変換する必要がなくなったことを意味する。そのまま変更なしに走るのだ。これは大きい。

2つ目はHTTP/2が普及したことが挙げられています。これによりWebpackによりファイルを結合するメリットが薄れたのです。これもDHH氏のブログから引用します。

With HTTP2, you no longer pay a large penalty for sending many small files instead of one big file. A single connection can multiplex all the responses you need. No more managing multiple connections, paying for multiple SSL handshakes. This means that bundling all your JavaScript into a single file loses many of its performance benefits (yes, yes, tree-shaking is still one).

HTTP2では、1つの大きなファイルの代わりに多くの小さなファイルを送信しても、大きなペナルティを受けなくなった。シングルコネクションで、必要とされるすべてのレスポンスを多重化できるのだ。複数の接続を管理したり、複数のSSLハンドシェイクを払い出す必要はない。つまりこれは、すべての JavaScript を単一のファイルにバンドルしてしまうと、この性能上の利点の多くを失うことを意味する (そうそう、ツリーシェイクはまだその1つだ)。

開発者にとっても、多くのJavaScriptモジュールを1つのファイルにまとめてしまうと、どこかに変更があったときにはいちいち全体を結合し直し、Webブラウザがそれを全部ダウンロードし直すことになることで、手間や時間がかかることになるとしています。

そして3つ目の理由がImport MapsだとDHH氏。

The final piece that's pushing the two first crucial changes over the paradigm hill is import maps. They allow the use of logical references for modules in ES6 (also known as ESM), rather than explicit file references. The problem with explicit file references is that they pair poorly with the standard approach of long-life caches with digest-stamped file names.

先の2つの重要な変更点をパラダイムの頂点へと押し上げる最後のピースがImport Mapsだ。これはES6（あるいはESM）のモジュールにおいて、明示的なファイル参照ではなく、論理的な参照を使用できるようにする。明示的なファイル参照が抱える問題は、ダイジェストスタンプ付きのファイル名と長寿命のキャッシュという標準的なアプローチでの組み合わせが悪いのだ。

Import MapsによりWebブラウザ上でインポートするモジュールをモジュールの名称だけで記述できるようになり、コード上での管理が容易になります。

DHH氏はこれらによって刷新されたフロントエンド開発環境を次のように表しています。

It's hard to convey what a difference it makes to the development experience to cut out this massive tumor of complexity. It feels like a new lease on life.

複雑さの大きなしこりを切り離すことで、開発体験がどれほど違うものになるのか、言葉で表すことなどできない。まるで、新しい生命を吹き込まれたような気分だ。

これがDHH氏の「Fullfilling a vision」である、という思いが伝わってきます。

HotwireのTurboとStimulusを搭載

Rails 7では、Hotwireに含まれている、TurboとStimulusという2つのフレームワークが搭載されました。

Hotwireは「HTML over the wire」の略とされています。サーバサイドでHTMLを生成し、それをWebSocketでWebブラウザへ送信する方法を用いてWebブラウザで表示する機能を備えたフレームワークです。

これによりサーバサイドにロジックを集中できて、フロントエンドのJavaScriptをほとんど書かなくて済むという利点があります。

Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 https://t.co/Pa4EG8Av5E

— DHH (@dhh) December 22, 2020

TurboはHotwireの中心的な機能を提供するフレームワークとして、Webページをいくつかのコンポーネントに分割し、変更があった部分をフロントエンドに送信することで、高速かつ動的にWebページの表示を書き換えることができます。

StimulusはHTMLに対して手軽にさまざまな機能を組み込むことができます。

（私の理解が間違っていなければ……）この2つを活用することで、JavaScriptのプログラミングをほとんど行わずにSPA（Single Page Application）のようなWebアプリケーションが実現できるようになります。

Rails 7ではこのように、フロントエンドの開発における複雑性や手間に対する大胆なソリューションを提案するものになっていると言えるのではないでしょうか。