むじんブログ ”3歩進んで2歩下がる”

37歳未経験からのエンジニア転職を目指す営業部長

学習のアウトプット(Railsのフロントエンド開発)

今日の内容は少し難解。

 

【ブラウザの表示】

ブラウザの表示で使える言語は下記の4つのみ。

・HTML

CSS

JavaScript

・WebAssembly

 

サーバーサイド側ではERBなど様々な言語が使えるが、最終的にブラウザに表示させる段階では上記の4つだけにしなければ反映できない。

 

------------------------------------------------------------------------------------ 

高級言語

機械よりも人間が理解しやすく作られている言語。

対義語は低級言語で、例えば0と1の羅列のような言語のことをいう。

 

CSS→SCSSやSASS

JavaScript→TypeScriptやCoffeeScript

高級言語にあたる。

高級言語は開発には便利だが、機械が理解しやすいようにより多くの翻訳が必要になる。(そのままではブラウザが認識できない)

 

------------------------------------------------------------------------------------

コンパイル

高級言語を機械に認識されるように翻訳すること。

コンパイラというプログラムを用いて行われる。

コンパイラでもコンパイルできない言語はプリコンパイルが必要となる。

 

【プリコンパイル

コンパイラコンパイルできない言語を事前翻訳し、コンパイル可能な状態にすること。

 

------------------------------------------------------------------------------------

【アセットパイプライン】

CSSJavaScriptなどの静的ファイル(アセット)を小さくまとめる

高級言語のプリコンパイルを行う機能も追加できる

 

複数の静的ファイルをプリコンパイルし連結

→まとめて圧縮し軽量化

→publicディレクトリへ配置

→ブラウザへ渡す

 

------------------------------------------------------------------------------------

【モジュールパンドラ】

各モジュールをまとめ、かつ依存関係の問題が生じないように管理するツール。

 

例)

JavaScriptは各ファイルを連結させると、読み込み順の問題でエラーが生じる

→各ファイルを独立してモジュールにすれば解決するが、依存関係となる

→モジュールパンドラを活用すればクリアできる

(モジュールを一括で束ねる役目)

 

近年では、モジュールの中でもwebpackが主流となっている。

 

【webpack】

JavaScriptやそれ以外の言語の変換・圧縮したり、好きな場所に配置したりできる。

Ruby on Railsでもwebpackは使用できるが、設定ファイルの記述がやや難解なので、簡易化するためにwebpackerというGemを用いる。