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
5
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
660
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
130
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.2k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.9k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Fireside Chat
paigeccino
32
3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Ruby is Unlike a Banana
tanoku
96
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Cult of Friendly URLs
andyhume
78
6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The Invisible Side of Design
smashingmag
297
50k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
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/