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
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
140
ML.NETで始める機械学習
ymd65536
0
230
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
自力でTTSモデルを作った話
zgock999
0
100
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
280
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
GitHub's CSS Performance
jonrohan
1030
460k
Building Your Own Lightsaber
phodgson
104
6.2k
Practical Orchestrator
shlominoach
186
10k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Bash Introduction
62gerente
611
210k
A Tale of Four Properties
chriscoyier
158
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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?