Code Splitting For JavaScript, within ES2015++

Code splitting For JavaScript, within ES2015++

introduction library：React/Redux tools：Babel, webpack, gulp, ESLint, Lerna test：mocha, nyc, power-assert,
enzyme, sinon, testdouble.js

varは死罪 functionは大罪

“ 変数はconst, letで宣言関数は => で記述

Contents ➢ 変数宣言 ➢ アロー関数 ➢ テンプレートリテラル ➢ スプレッド演算子 ➢
反復処理 ➢ 分割代入 ➢ モジュール ➢ クラス ➢ 非同期処理 ➢ ...other Proposal ES2015++ ➢ iterator/generator

Contents ➢ カリー化関数 ➢ オブジェクト操作 ➢ 配列操作 Co din g
app ro ach

変数宣言 const 再代入不可 let 再代入可能

letで宣言するべき...？

アロー関数 1. thisがレキシカルに決まる a. 宣言した箇所でthisが束縛される b. var that = this;
の呪縛から開放される!! c. call(), apply() メソッドは不要!! 2. 書き方が何パターンかある =>

テンプレートリテラル ``

スプレッド演算子 ...

分割代入 1. 必要なものだけ取り出せる 2. 別名で取り出すこともできる 3. やりすぎると可読性下げちゃうかも...

反復処理 for-of 1. 反復可能なオブジェクトに対して使える 2. airbnb社は非推奨の制御構文に指定している a. iterator / generator
変換が重い b. ベストプラクティスが他にある 3. async IteratorがES2018から実装される予定かなり難しめ...

モジュール 1. JavaScriptファイルのimport/exportが可能に 2. 変数の巻き上げやグローバル汚染は起きない 3. node.jsのrequireとはちょっと違う

ex t im t re e ex t

クラス 1. 他言語と同じようにクラス定義できる 2. ただし、prototypeベースのクラス継承 3. モジュールのように使うことが多い

Fish . prototype . call = function () { count++;
return this.name; }

goldFish. . prototype = Object . create( Fish . protorype
);

非同期処理 1. コールバック地獄とはおさらば 2. Promise なんてもう古い!! 3. 時代は async/await だ!!

other ➢ コレクション ➢ 文字列パディング ➢ Symbol ➢ Array.isArray, Array.includes
➢ Object.values, Object.entries, Object.assign ➢ Object.getOwnPropertyDescriptors

iterator 1. 反復可能（イテラブル）なオブジェクトを取り出すオブジェクト 2. next()を必ず持ち、実行するとイテレータリザルトを返す 3. イテレータリザルトは必ず以下のキーを持つ a.
value（取得値） b. done（全取得完了かを示す真偽値）

generator 1. iteratorを関数ベースで実行する 2. 処理を途中で止めることができる（同期的に実行することができる） 3. generatorが停止している間、他の処理をブロッキングしたりはしない

Thanks! Any questions?

Code Splitting For JavaScript, within ES2015++

Code Splitting For JavaScript, within ES2015++

camcam_lemon

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript