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.2k
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.8k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
980
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
540
TypeScript で Optional Chaining を使ってみた
mascii
1
710
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
160
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
The Invisible Side of Design
smashingmag
299
50k
Automating Front-end Workflow
addyosmani
1369
200k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
It's Worth the Effort
3n
184
28k
Rails Girls Zürich Keynote
gr2m
94
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for humans not robots
tammielis
252
25k
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/