Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Code Splitting For JavaScript, within ES2015++
Search
camcam_lemon
February 22, 2018
Programming
0
83
Code Splitting For JavaScript, within ES2015++
camcam_lemon
February 22, 2018
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
41
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
AIプログラミング雑キャッチアップ
yuheinakasaka
14
3.7k
Jakarta EE meets AI
ivargrimstad
0
220
バッチを作らなきゃとなったときに考えること
irof
2
490
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
color-scheme: light dark; を完全に理解する
uhyo
7
480
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
820
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
210
技術を改善し続ける
gumioji
0
110
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
440
React 19アップデートのために必要なこと
uhyo
7
1.3k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.4k
Making Projects Easy
brettharned
116
6k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Visualization
eitanlees
146
15k
Rails Girls Zürich Keynote
gr2m
94
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
4 Signs Your Business is Dying
shpigford
182
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Transcript
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
None
None
varは死罪 functionは大罪
“ 変数はconst, letで宣言 関数は => で記述
Contents ➢ 変数宣言 ➢ アロー関数 ➢ テンプレートリテラル ➢ スプレッド演算子 ➢
反復処理 ➢ 分割代入 ➢ モジュール ➢ クラス ➢ 非同期処理 ➢ ...other Proposal ES2015++ ➢ iterator/generator
Contents ➢ カリー化関数 ➢ オブジェクト操作 ➢ 配列操作 Co din g
app ro ach
変数宣言 const 再代入不可 let 再代入可能
None
letで宣言するべき...?
アロー関数 1. thisがレキシカルに決まる a. 宣言した箇所でthisが束縛される b. var that = this;
の呪縛から開放される!! c. call(), apply() メソッドは不要!! 2. 書き方が何パターンかある =>
None
None
None
None
テンプレートリテラル ``
スプレッド演算子 ...
分割代入 1. 必要なものだけ取り出せる 2. 別名で取り出すこともできる 3. やりすぎると可読性下げちゃうかも...
None
None
反復処理 for-of 1. 反復可能なオブジェクトに対して使える 2. airbnb社は非推奨の制御構文に指定している a. iterator / generator
変換が重い b. ベストプラクティスが他にある 3. async IteratorがES2018から実装される予定 かなり難しめ...
None
None
モジュール 1. JavaScriptファイルのimport/exportが可能に 2. 変数の巻き上げやグローバル汚染は起きない 3. node.jsのrequireとはちょっと違う
ex t im t re e ex t
None
None
クラス 1. 他言語と同じようにクラス定義できる 2. ただし、prototypeベースのクラス継承 3. モジュールのように使うことが多い
Fish . prototype . call = function () { count++;
return this.name; }
goldFish. . prototype = Object . create( Fish . protorype
);
非同期処理 1. コールバック地獄とはおさらば 2. Promise なんてもう古い!! 3. 時代は async/await だ!!
None
None
None
other ➢ コレクション ➢ 文字列パディング ➢ Symbol ➢ Array.isArray, Array.includes
➢ Object.values, Object.entries, Object.assign ➢ Object.getOwnPropertyDescriptors
iterator 1. 反復可能(イテラブル)なオブジェクトを取り出すオ ブジェクト 2. next()を必ず持ち、実行するとイテレータリザルト を返す 3. イテレータリザルトは必ず以下のキーを持つ a.
value(取得値) b. done(全取得完了かを示す真偽値)
None
generator 1. iteratorを関数ベースで実行する 2. 処理を途中で止めることができる(同期的に実行 することができる) 3. generatorが停止している間、他の処理をブロッキ ングしたりはしない
None
None
Thanks! Any questions?