WeJS @ 27th https://wajs.connpass.com/event/111736/
JavaScriptのバージョンの話We Are JavaScripters! @27thTwitter: @mascii_k
View Slide
自己紹介小柳 昌生 (Koyanagi Masaki)Twitter: @mascii_kWeJS登壇は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)
まとめ
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/