JavaScriptのバージョンの話

WeJS @ 27th
https://wajs.connpass.com/event/111736/

Transcript

1. JavaScriptのバージョンの話
   We Are JavaScripters! @27th
   Twitter: @mascii_k
   

   View Slide

2. 自己紹介
   小柳 昌生 (Koyanagi Masaki)
   Twitter: @mascii_k
   WeJS登壇は1年半ぶり(2017/06 @8th)
   株式会社ビザスク エンジニア
   

   View Slide

3. このプレゼンのターゲット
   ● jQueryのコードを書いているWebデザイナーさん
   ● トランスパイラのないレガシー環境でJavaScriptを書い
   ている方
   ● Internet Explorer 11のJS対応に苦戦している方
   

   View Slide

4. ECMAScript とは？
   

   View Slide

5. ECMAScript とは？
   ● JavaScriptの仕様のこと
   ○ ECMAScript (ES) = JavaScript (JS) という認識で良いと
   思います
   ● 新しいバージョンが使える ⇒ 古いバージョンも使える
   ○ (例) Chrome 71ではES2017が使える ⇒ ES5も使える
   ● すごくオタクくさい言い方... でも慣れましょう！
   

   View Slide

6. ECMAScript のバージョンたち
   ● ES5
   ○ Internet Explorer 11 ではここまで対応
   ● ES6 (ES2015)
   ○ クラス、for/ofループ、アロー関数、テンプレート文字列、let、const、
   Promise、Proxy、分割代入、可変長引数 など
   ● ES2016
   ● ES2017
   ○ 非同期関数 (async/await)、String の padStart/padEnd など
   

   View Slide

7. 注意！
   

   View Slide

8. 注意！
   ● IE11 は ES6以上の新しい文法や機能を理解できない！
   ● しかし今、JavaScriptについて検索すると、新しい文法や機
   能を使ったコードが普通にヒットしちゃいます
   ○ うっかりコピペして使うと IE11 で動かないJSに...
   ○ ES5の時代にはこんなことはなかったのに...
   新しい文法
   アロー関数 (ES6~)
   

   View Slide

9. どうIE11と付き合うか？
   

   View Slide

10. どうIE11と付き合うか？
    1. トランスパイラ + Polyfill を使う
    ○ トランスパイラで ES6+ の文法を ES5 に変換
    ○ Polyfill は ES6+ の機能を使えるようにするコード
    2. トランスパイラが入っていない環境なら、ES6+ の文法や機
    能を使わないように気をつける
    ※Polyfill できない機能もあります(Proxy など)
    

    View Slide

11. 新しい機能
    padStartメソッド
    (ES2017~)
    新しい文法
    テンプレート
    リテラル(ES6~)
    人力で頑張る(別のやり方で頑張る )
    padStartのPolyfill
    (num = 21 などの数値をゼロ埋めして 4桁の文字列にする例 )
    トランスパイル
    

    View Slide

12. よくわからん！
    トランスパイラは使ってない！
    どうしたらいい？
    

    View Slide

13. おすすめのサイトがあります
    ● Can I Use (caniuse.com)
    ● MDN (developer.mozilla.org)
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. まとめ
    

    View Slide

18. Webデザイナーさんへメッセージ
    ● でも jQuery のサンプルコードはだいたい ES5
    ○ jQuery が ES5 の時代に流行っていたなどの歴史的経緯
    ● jQuery を使わないときにバージョン気をつけてください
    ○ Vue.js を使い始めたときとか
    ● JS より CSS の方が IE11 対応大変かもしれません...
    

    View Slide

19. エンジニアさんへメッセージ
    ● むしろ IE11 対応はエンジニアの方がやらかしがち
    ○ 特にトランスパイラが入っていないレガシー環境
    ● ES5 と ES6+ との間に線を引くことを常に心がける
    ○ MDN とにらめっこしましょう
    

    View Slide

20. IE11さんからのメッセージ
    ● 僕だけがエラー吐いたら、Can I Use か MDN を見てね！
    https://ie-buster.qranoko.jp/
    

    View Slide