Code Splitting For JavaScript, within ES2015++

Transcript

1. Code splitting For JavaScript, within ES2015++
2. introduction library：React/Redux tools：Babel, webpack, gulp, ESLint, Lerna test：mocha, nyc, power-assert, enzyme, sinon, testdouble.js
5. varは死罪 functionは大罪
6. “ 変数はconst, letで宣言 関数は => で記述
7. Contents ➢ 変数宣言 ➢ アロー関数 ➢ テンプレートリテラル ➢ スプレッド演算子 ➢ 反復処理 ➢ 分割代入 ➢ モジュール ➢ クラス ➢ 非同期処理 ➢ ...other Proposal ES2015++ ➢ iterator/generator
8. Contents ➢ カリー化関数 ➢ オブジェクト操作 ➢ 配列操作 Co din g app ro ach
9. 変数宣言 const 再代入不可 let 再代入可能
11. letで宣言するべき...？
12. アロー関数 1. thisがレキシカルに決まる a. 宣言した箇所でthisが束縛される b. var that = this; の呪縛から開放される!! c. call(), apply() メソッドは不要!! 2. 書き方が何パターンかある =>
17. テンプレートリテラル ``
18. スプレッド演算子 ...
19. 分割代入 1. 必要なものだけ取り出せる 2. 別名で取り出すこともできる 3. やりすぎると可読性下げちゃうかも...
22. 反復処理 for-of 1. 反復可能なオブジェクトに対して使える 2. airbnb社は非推奨の制御構文に指定している a. iterator / generator 変換が重い b. ベストプラクティスが他にある 3. async IteratorがES2018から実装される予定 かなり難しめ...
25. モジュール 1. JavaScriptファイルのimport/exportが可能に 2. 変数の巻き上げやグローバル汚染は起きない 3. node.jsのrequireとはちょっと違う
26. ex t im t re e ex t
29. クラス 1. 他言語と同じようにクラス定義できる 2. ただし、prototypeベースのクラス継承 3. モジュールのように使うことが多い
30. Fish . prototype . call = function () { count++; return this.name; }
31. goldFish. . prototype = Object . create( Fish . protorype );
32. 非同期処理 1. コールバック地獄とはおさらば 2. Promise なんてもう古い!! 3. 時代は async/await だ!!
36. other ➢ コレクション ➢ 文字列パディング ➢ Symbol ➢ Array.isArray, Array.includes ➢ Object.values, Object.entries, Object.assign ➢ Object.getOwnPropertyDescriptors
37. iterator 1. 反復可能（イテラブル）なオブジェクトを取り出すオ ブジェクト 2. next()を必ず持ち、実行するとイテレータリザルト を返す 3. イテレータリザルトは必ず以下のキーを持つ a. value（取得値） b. done（全取得完了かを示す真偽値）
39. generator 1. iteratorを関数ベースで実行する 2. 処理を途中で止めることができる（同期的に実行 することができる） 3. generatorが停止している間、他の処理をブロッキ ングしたりはしない
42. Thanks! Any questions?