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.3k
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.9k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
560
TypeScript で Optional Chaining を使ってみた
mascii
1
730
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
180
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Into the Great Unknown - MozCon
thekraken
40
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Adaptive Systems
keathley
43
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A designer walks into a library…
pauljervisheath
207
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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/