複数の静的ファイルがブラウザで適用されるまでの仕組み
サーバーサイドでは色々な言語が用いられますが、ブラウザはHTML、CSS、JavaScript、WebAssemblyといった4つの言語しか認識できません。つまりRubyが埋め込まれたHTMLであるERBなどは認識できないということです。
高級言語と低級言語
しかしHTML、CSS、JavaScript、WebAssembly以外にも、より書きやすくて読みやすい言語を作りたいと開発者は考えます。このような人間が理解しやすい言語のことを高級言語と言います。逆に機械が認識できる0と1のコードのことを低級言語と言います。
コンパイル
高級言語を低級言語に「翻訳」する作業のことをコンパイルと言います。コンパイラと呼ばれるプログラムによって行われます。しかしコンパイラでは認識できない言語もあります。
プリコンパイル
「コンパイラが認識できない言語」を翻訳できるようにする事前コンパイルのことをプリコンパイルと言います。またブラウザに表示させるという「メインの処理」に必要な事前の処理でもあります。
アセットパイプライン
プリコンパイルは、アセットパイプラインという流れの1部でもあります。高級言語で書かれたファイルをブラウザで表示させるまでには、「プリコンパイル」した複数の静的ファイルを「連結」させ、「圧縮」して軽量化したものをpublicディレクトリに「配置」するという「仕組み」があります。この仕組みがアセットパイプラインです。
Railsでは、「Sprockets」というGemによるアセットパイプラインがデフォルトで用いられています。これによってCSSやJavaScriptのプリコンパイルが可能になっています。
しかしRailsのバージョン6以降から、「モジュールパンドラ」を使用したプリコンパイルが主流となりました。これは、JavaScriptのライブラリ機能を合わせて開発することが増えたからです。
Sprocketsに関する記述
Ruby on Railsの雛形を作成した際、app/assets/stylesheets/application.cssに「*= require_tree .」という記述があります。require_treeは、引数として与えられたディレクトリ以下のCSSファイルをアルファベット順に全て読み込むという機能を持ちます。「.」(ドット)はカレントディレクトリを表すため、「require_tree .」の記述によって、app/assets/stylesheets/というディレクトリにあるCSSファイルは全てapplication.cssに読み込まれることになります。
このrequire_treeの前にある「*=」はコメントアウトに見えますが、GemであるSprocketsの特殊な記法(ディレクティブ)であり、その行を意味のある記述として認識してもらうためのものです。
モジュール
モジュールとは「処理のまとまり」のことです。JavaScriptにおいて、複数の機能をファイル単位で分割してしまうと、読み込み順によってエラーが生じるといった問題が発生します。そのため、Node.js環境下では、ファイル単位ではなく、モジュール単位で機能を扱います。モジュールは「他の部品と合体可能な部品」であり、機能を1つずつ分けて、他のファイルから読み込めるようにした「処理のまとまり」のことです。
このことによって、読み込み順によってエラーが発生するといった問題は解決します。しかし、複数に分かれたモジュールの依存関係によって、読み込みできていないモジュールがあると正しく動作できないといった問題が発生します。
モジュールパンドラ
この「モジュールの依存関係を解消」して、モジュールを一括で束ねて管理してくれるのが「モジュールパンドラ」です。
webpack
webpackは「モジュールパンドラの一種」です。様々なJavaScriptをひとまとめに管理するためのツールです。webpackは主にエントリー、アウトプット、ローダー、プラグインの4つのことを行います。
エントリー
依存関係解消のために「どのファイルを基準とするか」を決めることです。
アウトプット
基準にされたファイルを「どこへどのような名前で出力するのか」を指定することです。
ローダー
JavaScript以外のHTMLやCSSなどのファイルを「モジュールに変換する方法を読み込み」、指定された処理を行うことです。
プラグイン
圧縮のように、ファイルをまとめること以外で、ローダーが実行できないタスクを導入して「拡張」することです。
このwebpackを用いることで、JavaScriptのライブラリとJavaScript以外の様々な言語を変換、圧縮した上で、好きな場所に配置することが可能になります。
webpacker
webpackをRails仕様にした「Gem」です。Railsにwebpackを導入してコマンドで操作することができますが、設定ファイルの記述に難易度があります。この設定を簡易化してくれるのがwebpackerです。
このwebpackerはRailsバージョン6以降からデフォルトで導入されています。近年では「Sprockets」よりも「webpack」を利用する方針に転換されています。これはJavaScriptのライブラリが充実してきたからです。
webpackerはSprocketsのアセットパイプラインと同じような静的ファイルのプリコンパイルに加えて、JavaScriptのパッケージを管理できるといったメリットがあります。
