JavaScriptのバージョンの話

998b440234ba4524a2c1ba1f130728f8?s=47 Masaki Koyanagi
December 20, 2018
860

 JavaScriptのバージョンの話

998b440234ba4524a2c1ba1f130728f8?s=128

Masaki Koyanagi

December 20, 2018
Tweet

Transcript

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

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

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

  4. ECMAScript とは?

  5. ECMAScript とは? • JavaScriptの仕様のこと ◦ ECMAScript (ES) = JavaScript (JS)

    という認識で良いと 思います • 新しいバージョンが使える ⇒ 古いバージョンも使える ◦ (例) Chrome 71ではES2017が使える ⇒ ES5も使える • すごくオタクくさい言い方... でも慣れましょう!
  6. ECMAScript のバージョンたち • ES5 ◦ Internet Explorer 11 ではここまで対応 •

    ES6 (ES2015) ◦ クラス、for/ofループ、アロー関数、テンプレート文字列、let、const、 Promise、Proxy、分割代入、可変長引数 など • ES2016 • ES2017 ◦ 非同期関数 (async/await)、String の padStart/padEnd など
  7. 注意!

  8. 注意! • IE11 は ES6以上の新しい文法や機能を理解できない! • しかし今、JavaScriptについて検索すると、新しい文法や機 能を使ったコードが普通にヒットしちゃいます ◦ うっかりコピペして使うと

    IE11 で動かないJSに... ◦ ES5の時代にはこんなことはなかったのに... 新しい文法 アロー関数 (ES6~)
  9. どうIE11と付き合うか?

  10. どうIE11と付き合うか? 1. トランスパイラ + Polyfill を使う ◦ トランスパイラで ES6+ の文法を

    ES5 に変換 ◦ Polyfill は ES6+ の機能を使えるようにするコード 2. トランスパイラが入っていない環境なら、ES6+ の文法や機 能を使わないように気をつける ※Polyfill できない機能もあります(Proxy など)
  11. 新しい機能 padStartメソッド (ES2017~) 新しい文法 テンプレート リテラル(ES6~) 人力で頑張る(別のやり方で頑張る ) padStartのPolyfill (num

    = 21 などの数値をゼロ埋めして 4桁の文字列にする例 ) トランスパイル
  12. よくわからん! トランスパイラは使ってない! どうしたらいい?

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

  14. None
  15. None
  16. None
  17. まとめ

  18. Webデザイナーさんへメッセージ • でも jQuery のサンプルコードはだいたい ES5 ◦ jQuery が ES5

    の時代に流行っていたなどの歴史的経緯 • jQuery を使わないときにバージョン気をつけてください ◦ Vue.js を使い始めたときとか • JS より CSS の方が IE11 対応大変かもしれません...
  19. エンジニアさんへメッセージ • むしろ IE11 対応はエンジニアの方がやらかしがち ◦ 特にトランスパイラが入っていないレガシー環境 • ES5 と

    ES6+ との間に線を引くことを常に心がける ◦ MDN とにらめっこしましょう
  20. IE11さんからのメッセージ • 僕だけがエラー吐いたら、Can I Use か MDN を見てね! https://ie-buster.qranoko.jp/