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?