概要
JSを触っていく上でどのように解釈してブラウザに表示されているのだろう？と思いました。この機会に裏で何をやっているのか理解をしておこうとおもったのでまとめていきます。
ブラウザが認識できる言語
まず、ブラウザで認識されるのはHTML, CSS, JavaScript, WebAssemblyという言語です。
たとえば、Railsでコードを書いていったとしても最終的に開発者ツールなど見たらHTMLなどに変換されています。
高級言語
高級言語とはプログラミング言語の分類のひとつで、人間がわかりやすいように設計されているものです。反対に、機械がわかりやすい言語のことを低級言語と呼びます。たとえば、開発するときに効率的にはやく書きたいときに扱うのが高級言語でSCSSなどの人間が便利だと思うもののことです。
コンパイル
コンピュータが分かる言葉にするには、コンパイルをして表示させています。プログラミング言語は機械に認識してもらわないと動きません。端的に言うと、機械に認識してもらう作業、要するに機械が理解できるようプログラミング言語を翻訳する作業のことをコンパイルといいます。
コンパイルの流れ
コンパイルはコンピュータがわかるように翻訳する作業のことで、翻訳作業を行ってくれているのはコンパイラというプログラムです。
一度整理すると
1.プログラミング言語をコンピュータに理解してもらうには翻訳をしなければならない。
2.翻訳作業のことをコンパイルと呼びコンパイラというプログラムで翻訳される。
ただコンパイラはなんでも翻訳してくれるわけではありません。そこで出てくるのがプリコンパイルというものです。
プリコンパイルとは
コンパイラが言語の翻訳ができるように、事前に準備することです。コンパイラに翻訳をお願いする前に、もっとコンピュータのわかりやすい言葉にしてあげることです。
アセットパイプライン
アセットパイプラインとは、JavaScriptやCSSなどのアセットを小さくしたり圧縮したりしてまとめてくれる機能のことです。複数のアセットファイルを一つにまとめてブラウザに表示するために必要な機能です。処理の流れを簡単にいうと、複数のアセットファイルをプリコンパイルして連結して、最小化または圧縮して最終的に軽量化されたものをブラウザに渡せるようにpublicディレクトリに配置します。
Sprockets
Railsでは、プリコンパイルするために、SprocketsというGemを用いてアセットパイプラインをしていました。しかし、JavaScriptの使用が多くなり、Railsのバージョン6系からモジュールバンドラによるプリコンパイルが主流になりました。
モジュールバンドラ
モジュールバンドラとはJavaScriptの依存関係を考慮しながら管理してくれるものです。依存関係を考慮しながらというのが大切で、複数あるJavaScriptファイルを１つにまとめることでブラウザで読み取ることができるようにしています。また、１つのファイルにすることで通信の高速化を可能にしています。
JavaScriptではwebpackというモジュールバンドラを利用しています。
webpackとWebpacker
webpackを使えば依存関係の管理ができるのですが、Railsではもっと簡単に管理できるものが用意されています。それはWebpackerというものです。専用の設定ファイルやヘルパーメソッドを用意してくれるGemでRailsのバージョン6系からはデフォルトでWebpackerというGemが用意されているので、導入のことを意識せずとも使えています。Webpackerによってプリコンパイルに加え、JavaScriptのパッケージを管理することを可能にしています。
npmとyarn
Webpackerにパッケージをインストールして入れていくにはパッケージ管理ツールを使います。パッケージ管理ツールにはnpmというものがありますが、Railsではyarnというものを使います。yarnはpackage.jsonとyarn.lockで使用するパッケージを管理します。RailsのGemfileとGemfile.lockのように管理されるようになります。簡単にいうと、package.jsonで使用するパッケージを管理して、yarn.lockで使用するパーケージのバージョンを管理しているということです。
まとめ
- コンパイルとはコンピュータが理解できることばに翻訳すること。
- コンパイラというプログラムが翻訳している。
- ブラウザは一つのファイルしか読み取ることができない。
- プリコンパイルとは、コンパイラが理解できるように事前に準備をすること。
- アセットパイプラインとは
プリコンパイル、連結、圧縮、配置する機能のこと。 -
publicディレクトリに配置することでブラウザが読み込めるようにしている。 -
SprocketsというGemでのプリコンパイルからWebpackerというGemが使われるようになり、プリコンパイルに加えJavaScriptのパッケージ管理を行ってくれている。 - 最近は
webpackerというモジュールバンドラで管理しており、依存関係を解決しながらモジュールを一つにまとめることでブラウザに表示されるような仕組みになっている。 -
webpackerにパッケージを入れるにはnpmを使うがRailsではyarnというものが使われていてパッケージを管理している。