自分の中でフワフワしてて、毎回も調べてる言葉をちゃんと定着させるために少しずつ整理。
用語
ECMAScript
- JavaScriptの標準規格。
- ES6の時から毎年更新しようということになったのでバージョン表記が西暦になった。ES6=ES2015。
- 今はES5～6くらいが主流。それ以上はブラウザが追い付いてない。
トランスパイル（transpile）
- あるバージョンで記述されたJavaScript/TypeScriptから別のバージョンのJavaScriptを生成すること。
- 新しすぎるとブラウザの種類やバージョンによっては対応していないので、広く対応している形式にする。
ポリフィル（Polyfill）
バンドル（bundle）
- ファイルを1つにまとめる。
- 例えば、node_modulesにあるjsを一纏めにbundleして、HTML側ではそのファイルだけ読み込む、とかすると、モジュールが新しくインストールされてもいちいちHTML側を触る必要がない。
ミニファイ（minify）
- サイズを小さくする。読み込みが早くなる。
プラットフォーム
Node.js
- サーバーサイドで動くJavaScript。フレームワークやライブラリではなく、JavaScriptアプリケーションのプラットフォーム。
- 非同期。I/Oの結果を待たないで処理を進める。
- リアルタイムなアプリケーションに合う。SPAとか
- 何かのイベントを受けて動き始める。
- 例えばC10K問題の解決に使われる。ディスクへの書き込みには時間がかかって、それをCPUやメモリが待たないといけないのは時間の無駄。書き込みの命令だけ出して、結果を待たずにどんどん次の処理に行くことで、大量のリクエストがあってもすごく早く捌けるようになる。
パッケージ管理
npm
- Node.jsのパッケージのバージョン管理ツール。
- インストールしたパッケージはnode_modulesに入る。
yarn
- JavaScriptのパッケージマネージャー。
- npmに対して後発で、より速くて簡潔。
- インストールしたパッケージは、やはりnode_modulesに入る。
タスク自動化ツール
gulp
- Node.js を使ったタスク自動化ツールで、フロント周りのビルド（CSSやJavascriptの結合（bundle）や圧縮（minify）、Sassのコンパイルなど）を任せられる。
- Javaの世界でいえばGradleとかAntみたいな。
- Gruntの後発。
Grunt
- Node.js を使ったタスク自動化ツールで、フロント周りのビルド（CSSやJavascriptの結合（bundle）や圧縮（minify）、Sassのコンパイルなど）を任せられる。
- Javaの世界でいえばGradleとかAntみたいな。
- gulpよりも先輩。
モジュールバンドラー
webpack
- cssファイルのbundle化が簡単にできる。
- gulpとかGruntが自力でもやれるけどwebpackの方が簡単にできる
- と言いつつ、webpackもそんなに簡単じゃないので、簡単にするためのラッパーも出てきてる
トランスパイラー
Babel
- ES6(2015)以上をES5に変換する
CSS関係
PostCSS
SASS
参考にさせて貰ったページ
gulpとbabelとwebpackというフロント開発３銃士
https://qiita.com/bakira/items/3c4e2d10aae085767817
Webpack の考え方について
https://mizchi.hatenablog.com/entry/2018/11/26/164523
フロントエンド知らない私のwebpack入門 その1
https://qiita.com/knjname/items/b8ca62c12238ade9c263
Node.js を5分で大雑把に理解する
