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