$30 off During Our Annual Pro Sale. View Details »

JavaScriptのバージョンの話

Masaki Koyanagi
December 20, 2018
1.8k

 JavaScriptのバージョンの話

Masaki Koyanagi

December 20, 2018
Tweet

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