ちなみに

火曜日の空は僕を押しつぶした。

Internet Explorer のサポートを切ると何が嬉しいのか

技術

f:id:Sixeight:20211027203958p:plain

社内勉強会向けにまとめた資料から社内特有なところを削除したものです。

ゴール

Internet Explorerとは

Chakraとは

JavaScriptエンジンとは

ECMAScriptとは

  • JavaScriptの仕様
  • 策定プロセスの歴史
    • 全ての仕様の合意が取れたらリリースしていた
      • リリースまでに膨大なリソースが必要で大変
    • 合意出来たプロポーザルからリリースする
      • 常に最新が公開されている
  • ES2015とかって？
    • 年に一回リリースされる仕様のスナップショット
    • ES6(2015)以降の仕様書のバージョン名

Web APIとは

Web標準とは

  • Webの技術を標準化する動き
    • 戦国時代を経て世界平和へ
  • W3C
    • 標準化団体
  • WHATWG
    • Living Standard

(おさらい) JavaScriptとWeb API

(余談) ES2015以降のECMAScriptの歩み

クラス 追加された機能の代表例
ES2015 クラス、let / const、Arrow Function
ES2016 Array.prototype.includes
ES2017 async/await
ES2018 オブジェクトのスプレッド構文
ES2019 Array.prototype.flatMap
ES2020 オプショナルチェイニング演算子 ?.、Null合体演算子 ??
ES2021 String.prototype.replaceAll、Logical Assignment Operators

(余談) トランスパイル / Polyfill

  • トランスパイル
    • 特定の機能を(古い)ブラウザでも動くように変換すること
  • Polyfill
    • 特定の機能を(古い)ブラウザでも動くように実装したコード

ところで

互換性をどうやって調べるのか

一部を紹介します

  • 2021/10/27時点で Internet Explorer 11 以外が対応している機能
  • なんか分かりやすいのを挙げています

JavaScript

ECMAScript 2015

Web API

Fetch API

URL API

Intersection Observer API

Resize Observer API

まとめ

JavaScript と Web API の違いが分かる

Internet Explorer のサポート終了によって何が変わるのかが分かる

  • ある機能が特定のブラウザで動くのか調べられるようになりましたか？
  • Internet Explorer のサポートを切ると出来ること
    • ECMAScript 2015 で策定された機能が使える
    • 最近のWeb APIが使える

(おまけ) TypeScript

  • JavaScriptのスーパーセット
    • 新しい仕様もどんどん取り入れている
    • TS4.5はES2022の一部を実装している
  • 出力対象のECMAScriptのバージョン
    • ECMAScript 3 以降、プロポーザルを含むES Nextまでを選択できる
    • 提供する対象によって適切なバージョンを選べる
  • 今なら何を設定すべきか
    • ES2016
    • ES2021でもいける
      • ただしSafariが以下に対応していない
        • shared memory and atomics
        • RegExp Lookbehind Assertions

参考文献