JavaScriptのバージョンの話
by
Masaki Koyanagi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
JavaScriptのバージョンの話 We Are JavaScripters! @27th Twitter: @mascii_k
Slide 2
Slide 2 text
自己紹介 小柳 昌生 (Koyanagi Masaki) Twitter: @mascii_k WeJS登壇は1年半ぶり(2017/06 @8th) 株式会社ビザスク エンジニア
Slide 3
Slide 3 text
このプレゼンのターゲット ● jQueryのコードを書いているWebデザイナーさん ● トランスパイラのないレガシー環境でJavaScriptを書い ている方 ● Internet Explorer 11のJS対応に苦戦している方
Slide 4
Slide 4 text
ECMAScript とは?
Slide 5
Slide 5 text
ECMAScript とは? ● JavaScriptの仕様のこと ○ ECMAScript (ES) = JavaScript (JS) という認識で良いと 思います ● 新しいバージョンが使える ⇒ 古いバージョンも使える ○ (例) Chrome 71ではES2017が使える ⇒ ES5も使える ● すごくオタクくさい言い方... でも慣れましょう!
Slide 6
Slide 6 text
ECMAScript のバージョンたち ● ES5 ○ Internet Explorer 11 ではここまで対応 ● ES6 (ES2015) ○ クラス、for/ofループ、アロー関数、テンプレート文字列、let、const、 Promise、Proxy、分割代入、可変長引数 など ● ES2016 ● ES2017 ○ 非同期関数 (async/await)、String の padStart/padEnd など
Slide 7
Slide 7 text
注意!
Slide 8
Slide 8 text
注意! ● IE11 は ES6以上の新しい文法や機能を理解できない! ● しかし今、JavaScriptについて検索すると、新しい文法や機 能を使ったコードが普通にヒットしちゃいます ○ うっかりコピペして使うと IE11 で動かないJSに... ○ ES5の時代にはこんなことはなかったのに... 新しい文法 アロー関数 (ES6~)
Slide 9
Slide 9 text
どうIE11と付き合うか?
Slide 10
Slide 10 text
どうIE11と付き合うか? 1. トランスパイラ + Polyfill を使う ○ トランスパイラで ES6+ の文法を ES5 に変換 ○ Polyfill は ES6+ の機能を使えるようにするコード 2. トランスパイラが入っていない環境なら、ES6+ の文法や機 能を使わないように気をつける ※Polyfill できない機能もあります(Proxy など)
Slide 11
Slide 11 text
新しい機能 padStartメソッド (ES2017~) 新しい文法 テンプレート リテラル(ES6~) 人力で頑張る(別のやり方で頑張る ) padStartのPolyfill (num = 21 などの数値をゼロ埋めして 4桁の文字列にする例 ) トランスパイル
Slide 12
Slide 12 text
よくわからん! トランスパイラは使ってない! どうしたらいい?
Slide 13
Slide 13 text
おすすめのサイトがあります ● Can I Use (caniuse.com) ● MDN (developer.mozilla.org)
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
まとめ
Slide 18
Slide 18 text
Webデザイナーさんへメッセージ ● でも jQuery のサンプルコードはだいたい ES5 ○ jQuery が ES5 の時代に流行っていたなどの歴史的経緯 ● jQuery を使わないときにバージョン気をつけてください ○ Vue.js を使い始めたときとか ● JS より CSS の方が IE11 対応大変かもしれません...
Slide 19
Slide 19 text
エンジニアさんへメッセージ ● むしろ IE11 対応はエンジニアの方がやらかしがち ○ 特にトランスパイラが入っていないレガシー環境 ● ES5 と ES6+ との間に線を引くことを常に心がける ○ MDN とにらめっこしましょう
Slide 20
Slide 20 text
IE11さんからのメッセージ ● 僕だけがエラー吐いたら、Can I Use か MDN を見てね! https://ie-buster.qranoko.jp/