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)

No content

No content

No content

まとめ

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/