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
JavaScriptのバージョンの話
Search
Masaki Koyanagi
December 20, 2018
1
2.1k
JavaScriptのバージョンの話
WeJS @ 27th
https://wajs.connpass.com/event/111736/
Masaki Koyanagi
December 20, 2018
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
Vitestを使った型テストの始め方
mascii
6
2.6k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
930
Pros and Cons で考える Vue 2 Composition API
mascii
4
1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
490
TypeScript で Optional Chaining を使ってみた
mascii
1
670
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
140
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
Happy Clients
brianwarren
98
6.7k
We Have a Design System, Now What?
morganepeng
50
7.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
For a Future-Friendly Web
brad_frost
175
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Rails Girls Zürich Keynote
gr2m
94
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
GitHub's CSS Performance
jonrohan
1030
460k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Transcript
JavaScriptのバージョンの話 We Are JavaScripters! @27th Twitter: @mascii_k
自己紹介 小柳 昌生 (Koyanagi Masaki) Twitter: @mascii_k WeJS登壇は1年半ぶり(2017/06 @8th) 株式会社ビザスク
エンジニア
このプレゼンのターゲット • jQueryのコードを書いているWebデザイナーさん • トランスパイラのないレガシー環境でJavaScriptを書い ている方 • Internet Explorer 11のJS対応に苦戦している方
ECMAScript とは?
ECMAScript とは? • JavaScriptの仕様のこと ◦ ECMAScript (ES) = JavaScript (JS)
という認識で良いと 思います • 新しいバージョンが使える ⇒ 古いバージョンも使える ◦ (例) Chrome 71ではES2017が使える ⇒ ES5も使える • すごくオタクくさい言い方... でも慣れましょう!
ECMAScript のバージョンたち • ES5 ◦ Internet Explorer 11 ではここまで対応 •
ES6 (ES2015) ◦ クラス、for/ofループ、アロー関数、テンプレート文字列、let、const、 Promise、Proxy、分割代入、可変長引数 など • ES2016 • ES2017 ◦ 非同期関数 (async/await)、String の padStart/padEnd など
注意!
注意! • IE11 は ES6以上の新しい文法や機能を理解できない! • しかし今、JavaScriptについて検索すると、新しい文法や機 能を使ったコードが普通にヒットしちゃいます ◦ うっかりコピペして使うと
IE11 で動かないJSに... ◦ ES5の時代にはこんなことはなかったのに... 新しい文法 アロー関数 (ES6~)
どうIE11と付き合うか?
どうIE11と付き合うか? 1. トランスパイラ + Polyfill を使う ◦ トランスパイラで ES6+ の文法を
ES5 に変換 ◦ Polyfill は ES6+ の機能を使えるようにするコード 2. トランスパイラが入っていない環境なら、ES6+ の文法や機 能を使わないように気をつける ※Polyfill できない機能もあります(Proxy など)
新しい機能 padStartメソッド (ES2017~) 新しい文法 テンプレート リテラル(ES6~) 人力で頑張る(別のやり方で頑張る ) padStartのPolyfill (num
= 21 などの数値をゼロ埋めして 4桁の文字列にする例 ) トランスパイル
よくわからん! トランスパイラは使ってない! どうしたらいい?
おすすめのサイトがあります • Can I Use (caniuse.com) • MDN (developer.mozilla.org)
None
None
None
まとめ
Webデザイナーさんへメッセージ • でも jQuery のサンプルコードはだいたい ES5 ◦ jQuery が ES5
の時代に流行っていたなどの歴史的経緯 • jQuery を使わないときにバージョン気をつけてください ◦ Vue.js を使い始めたときとか • JS より CSS の方が IE11 対応大変かもしれません...
エンジニアさんへメッセージ • むしろ IE11 対応はエンジニアの方がやらかしがち ◦ 特にトランスパイラが入っていないレガシー環境 • ES5 と
ES6+ との間に線を引くことを常に心がける ◦ MDN とにらめっこしましょう
IE11さんからのメッセージ • 僕だけがエラー吐いたら、Can I Use か MDN を見てね! https://ie-buster.qranoko.jp/