IE11の考慮が不要となった場合に、特定のブラウザバージョン以降で使えるようになる機能一覧を列挙して表示するサイトを作った。
the-world-after-ie-left.vercel.app
リポジトリはこちら github.com
デフォルトでは
以降で使える機能を確認できる。
※ ちなみに雑にVercelにデプロイしてるので、レスポンスが巨大すぎるとVercel自体の制限に引っかかって死ぬことがあるので、落ちる場合は絞り込み用のブラウザバージョンをちゃんと入れてください。
IE卒業式という社内イベント
先日、IE卒業式というイベントが開催された。これ自体は公のイベントで、とてもいい内容だった。
それとはまた別で、社内でも似たようなIEサポート終了に伴うちょっとしたイベントが開催され、その中でLTをすることになった。お題としては「IE11を考慮から外すと◯◯ができるよ！」といったものをリクエストされた。
最初は単純に MDN のドキュメントからいくつかの機能を感覚でピックアップして終わろうかなと思っていたが、実際調べていくと、山のように機能があることに気付いた。
「これはそもそも機能を洗い出すこと自体に何らかの仕組みが必要では？？」という考えに至り、LT用にサイトを作ってみることにした。5分の発表のために私は一体何を。
仕組み
至ってシンプルで、MDNのドキュメントのベースにもなっている mdn/browser-compat-data のデータをもとにフィルタリングして表示しているだけです。
ちなみに最初はリポジトリ内に含まれるデータのJSONファイルを全てパースして、JavaScriptで取り扱いやすいデータオブジェクトを作って、かつ型定義も自分で書いて頑張ってたが、実は mdn/browser-compat-data はそもそも npm パッケージとして公開されており、データも型も全部公開してくれていることに後で気付いて「ｳﾜｰ!!!」ってなった。ちゃんとリポジトリの中を確認しましょうね、という学びを得た。
（ちなみに、意外と自分で書いた型定義は概ね正しかったようで、パッケージ提供のものに差し替えたあともすんなり型チェックがパスしてビックリした）
作ってみて
単純に機能を眺めているだけでも結構おもしろかった。
普通に知らない機能もあったし、Transpile/Polyfillを当然のように使ってたので、たとえば Array.prototype.findIndex とかは「そうか、IEってコレも使えなかったのか...」みたいな気持ちになった。
公開したままにしとくので、興味があれば見てみてください。
おわり
