(WIP)2019年のJavaScriptエコシステムについていけていないので勉強する

JavaScriptエコシステムがわからなさすぎるので勉強することにした。
さすがにそろそろ逃げていられない。。

わかること/知っていること

• JavaScript文法
  • サイ本を通読した程度

わからないこと

• ES6
• ES2015
• node
• webpack
• react
• import, from, export

わかったこと

ES2015(ES6)

• ES2015 == ES6
• スコープあり変数
  • let => 再代入可能
  • const => 定数
• クラスの導入
  • class Klass {}
  • class Klass extends BaseKlass {}
  • コンストラクタは constructor(arg1, arg2)
  • this で自インスタンス参照
  • super で親クラス参照
• テンプレート文字列
  • `` でくくる
  • 例: title: ${title}, author: ${author}
• アロー関数
  • (args)=>{}
  • this のスコープが変わらない
• Promise
  • 非同期処理ライブラリ
  • asyncFunc().then().catch() のように実行できる

webpack

• module bundler
• 似たソフトウェア: grunt, gulp
• --mode オプションでdev/productionモードを切り替えられる
• https://webpack.js.org/configuration/mode/
• 設定ファイルは webpack.config.js
• Entry
  • ソースファイルの場所
• Output
  • 作られたbundleの出力先
• Loaders
  • ソースファイルの処理方法
  • test の正規表現にマッチしたファイルを処理する
  • use で指定したloaderを適用する
• Plugins
• webpack4
  • webpack-cli が分離された

HTMLとload

• src/index.html などを用意する
• HTMLファイル内で <script src="app.js"></script> などとJSファイルpathを指定する
• app.js をwebpackで生成する