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.5k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
910
Pros and Cons で考える Vue 2 Composition API
mascii
4
970
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
470
TypeScript で Optional Chaining を使ってみた
mascii
1
640
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
Designing for Performance
lara
604
68k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Web Components: a chance to create the future
zenorocha
309
42k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Facilitating Awesome Meetings
lara
49
5.9k
Thoughts on Productivity
jonyablonski
66
4.2k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Automating Front-end Workflow
addyosmani
1365
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Writing Fast Ruby
sferik
623
60k
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/