高級言語と低級言語

・高級言語
高級言語は、機械よりも人間が理解しやすいように設計されたプログラミング言語のことです。
また、「高級」とは優れた言語という意味ではなく、機種やOSなどに固有の要素を抽象度の高い記述が可能であることを表しており、アプリケーションソフトの開発などに用いられる言語の多くは高級言語に分類されるから「高級」という表現を用いています。

・低級言語
機械が認識しやすい言語は低級言語と呼ばれます。
「低級」とは劣った言語であることを意味するのではなく、ハードウェアに近いことを意味
することから「低級」という表現を用いています。

ファイルをブラウザに表示させるには、高級言語で開発したあとに、それを機械が認識
できる低級言語に翻訳する必要があり、その翻訳の事をコンパイルと呼びます。

コンパイル

プログラミング言語を、動作する機械が理解できるように翻訳する作業のことです。
コンパイルは、コンパイラ（機会にやさしいプログラミング言語のこと）と呼ばれる
プログラムによって行われます。
もしコンパイラで認識できない言語があれば、あらかじめ認識できる言語にプリコンパイルしておく必要があります。

プリコンパイル

コンパイラが翻訳できない言語を翻訳できるようにする事前コンパイルのことです。あるいは、メインとなる処理に対して必要な前処理のことを指します。
つまり、コンパイルやメインの処理の前に行われるべきコンパイルが、プリコンパイルです。

たとえば、Webアプリケーションでは、Webブラウザが静的ファイルを読み込んで表示するというメインの処理ができるように、高級言語で書かれたファイルをプリコンパイルしてからブラウザに渡しています。

このようなプリコンパイルを行うための手法として、アセットパイプラインという仕組みがあります。

アセットパイプライン

JavaScriptやCSSなどのアセットと呼ばれる静的ファイルを小さくまとめてくれる機能です。
アセットパイプラインには、高級言語のプリコンパイルを行う機能も追加できるため、これを応用してSCSSやTypeScriptなどを使用した開発もできるようになります。

アセットパイプラインの処理は、**「①プリコンパイル」「②連結」「③圧縮」「④配置」**の流れで行われます。
複数の静的ファイルをプリコンパイルして連結したのち、圧縮して軽量化したものをpublicディレクトリに配置して、ブラウザへ渡せるようにします。

これまでRailsでは、CSSやJavaScript等をプリコンパイルするために、SprocketsというGemによるアセットパイプラインをデフォルトで用いていました。

しかし、近年JavaScriptのライブラリ機能を合わせて開発することが大体となってきたため、Railsではバージョン6以降から、モジュールバンドラを使用したプリコンパイルを主流とするようになりました。

モジュールバンドラ

モジュールバンドラは、JavaScriptのモジュールを依存関係を考慮しながら管理するツールです。

モジュールとは、機能を1つずつ分けて他のファイルから読み込めるようにした処理のまとまりのことです。
JavaScriptでは複数の機能をファイルごとに分割すると、1つのファイルへまとめる際に不具合が生じるため、Node.js環境では機能をモジュールという単位で扱います。

モジュールによって、大量の機能を複数のファイルに分けることができ、分けられた機能を1つのファイルにまとめても問題なく動作できます。
ただし、複数に分かれるため依存関係が生まれ、読み込みができてないモジュールがあると正しく動作できない問題があります。

これを解消するのが、モジュールを一括で束ねて管理してくれるモジュールバンドラです。
近年では、モジュールバンドラの中でもwebpackが主流となりつつあります。

webpack

webpackとは、Webアプリケーションを作成する際に必要な、さまざまなJavaScriptをひとまとめに管理するためのツールです。
webpackが行うことは、大きく分けて4つあります。

基本要素	役割
Entry	依存関係を解決するために、どのファイルを基準（エントリーポイント）とするかを決める
Output	エントリーポイントにされ、webpackによってまとめられたファイルを、どこへどのような名前で出力（アウトプット）するのか指定する
Loaders	JavaScript以外のCSSやHTMLなどのファイルをモジュールに変換する方法を読み込み（ロード）、指定した処理を行う
Plugins	圧縮などの、ファイルをまとめる以外でローダーが実行できないタスクを導入し、拡張（プラグイン）する

つまり、webpackを用いることで、JavaScriptのライブラリとJavaScript以外のさまざまな言語を変換・圧縮した上で、好きな場所に配置することが可能となります。

Railsにもwebpackを導入してコマンド操作が可能ですが、設定ファイルの記述がやや難しいことから、設定を簡易化してくれるWebpackerというGemがあります。

Webpacker

webpackをRails仕様にし、専用の設定ファイルやヘルパーメソッドを用意してくれるGemです。Railsバージョン6系以降からは、デフォルトでWebpackerが導入されます。
Webpackerによって、Sprocketsのアセットパイプラインと同じような静的ファイルのプリコンパイルに加え、JavaScriptのパッケージが利用できるようになります。