本記事について
プログラミング初心者がブラウザに表示させるための処理に関する知識について学んだので、その備忘録として載せております。
どうかお手柔らかにお願いいたしますm (- -)(_ _)ペコリ
処理の概要
・サーバーサイドで色々な言語で記述されたとしても、HTML、CSS、JavaScript等となってブラウザに返される。
・最終的にHTML、CSS、JavaScript等の言語へ変換されていなければブラウザはページを描画できない。
→ブラウザで認識できる言語がHTML、CSS、JavaScript、WevAssmby
高級言語
・機械よりも人間が理解しやすいように設計されたプログラミング言語
・開発者が開発しやすいように設計
→高級言語は便利であるが、これらは動作する機械が認識できるように通常より多く翻訳する必要がある。
低級言語
・機械が認識しやすい言語
##コンパイル
・翻訳作業（人間の言葉で書いたコードをコンピュータがわかる言葉に翻訳）
・コンパイラというプログラムによりコンパイル（翻訳）は行われる。
プリコンパイル
・コンパイラが翻訳できない言葉を翻訳できるようにする事前コンパイルのこと。
・メインとなる処理に対して必要な前処理のこと。
→コンパイラにもコンパイルできる範囲があり、事前処理が必要になることもある。
・ブラウザに渡す静的ファイルはプリコンパイルする必要がある。
アセットパイプライン
・プリコンパイルを行う手法。
・プリコンパイル、連結、圧縮、配置を行う仕組み
・JavaScriptやCSSなど（のアセット呼ばれる静的ファイル）を小さくまとめてくれる機能
・高級言語のプリコンパイルを行う機能も追加できる。
静的
最初から用意しておいて途中で変わらない。
動的
最初からあるけど途中で変わったりする。
モジュール
機能を１つずつわけて他のファイルから読み込めるようにした処理のまとまり
システムの構成要素、交換可能な構成単位
・プログラミングの１パーツで、これだけでは機能しない。
・部品の意味で用いられるモジュールはそれだけで機能として成立する。
モジュールバンドラ
・JavaScriptのモジュールの依存関係を考慮しながら管理するツール
・モジュールの依存関係を解決しながら機能を一つにまとめる。
・Node.js環境では機能をモジュールという単位で扱う。
・モジュールパンドラによってJavaScriptのライブラリ機能を複数組み合わせれる。
・JavaScriptは複数の機能をファイルごとに分割すると、１つのファイルへまとめる際に不具合が生じるためモジュール単位で扱う。
・モジュールにより大量の機能を複数のファイルに分けることができ、分けられて機能を１つにまとめても問題なく動作できる。しかし複数に分かれるため依存関係が生じる問題がある。
→依存関係の問題を解決するのがモジュールバンドラ。モジュールをまとめて束ね管理できる。
webpack
・モジュールバンドラの一つ。JavaScriptを一まとめに管理するためのツール。JavaScriptの依存関係を束ねてくれる。
・webackが実行すること
・JavaScriptのライブラリとJavaScript以外の様々な言語を、変換、圧縮した上で好きな場所に配置できる。
Webpacker
・webpackをRails仕様にしたもの。専用の設定ファイルやヘルパーメソッドを用意するGem。
・Railsにもwebpackを導入できるが、設定ファイルの記述が難しくなっている。設定を簡略化してくれるのはWebpacker。
jQuery
JavaScriptでできることを、より簡単な記法で実現できるように設計されているJavaScriptのライブラリ。
以上です