サヨナラ、IE
第34回目のコラムはエンジニアのMSさんです（入社4年目）
………….
皆様、お疲れ様です。
エンジニアのMSです。
普段は動画を扱うwebアプリケーションをちくちく弄っております。
―――2021年05月19日、その告知は公開されました。
Microsoft製（かつてMicrosoftが開発していた）のwebブラウザ Internet Explorer(以下IE)のサポートが遂に終了するというお知らせです。
この記事が投稿されている頃には、もう彼(もしくは彼女)とは会えなくなっていることでしょう。
今日はそんなIEのお話と、IEのサポート終了で得られる恩恵について、つらつらと書いていきたいと思います。
▼ IEの問題（例え話）
はじめに
この記事を目にしてくださっているIEに馴染みのない方へ、IEの抱える問題に関する例えば話を一つさせてください。
想像してみてください。
貴方は上司です。部下が6名います。
GCさん、Sさん、Fさん、Oさん、MEさん
そしてIEさんの6名としましょう。
彼らにはそれぞれ個性がありますが、同じ指示書を与えれば概ね同じレベルの成果で仕事をしてくれます。
……IEさんを除いては。
貴方がこう指示します。
「ヘッダーはwebページの上部に固定して動かないようにしてほしい。」
GCさんもSさんもこの指示を理解できます。
Fさんも対応してくれますし、Oさんもよしなにやってくれます。
MEさんも頷いてくれました。
けど、どうやらIEさんはこの指示を理解できないようです。
「できない。」わけではないのです。
ですが、IEさんには別の指示が必要になります。
彼の席まで足を運び、彼の顔をよく窺いながら、やや丁寧に説明する必要があります。
この手間は新しい仕事があるたびに発生して、貴方の時間を少しずつ(あるいは大きく）奪っていきます。
▼ IEの問題（現実）
例えの話から現実の話に戻して
このようなことが開発（そこまでモダンではない開発）の現場でしばしば、あるいは結構な頻度で発生します。
ちょっと気合を入れて作成したキャンペーンのランディングページの応募ボタンがなぜか縦並びになってしまったり、画像のアスペクト比が崩れてしまったり、ページの読み込み速度を上げるために画像形式を変更したら画像が全て消えてしまっていたり……。
しかも厄介なことにIEを普段から利用する人は開発の現場では極めて少なく、この問題はとても検知しづらいのです
「リリースしてから初めて気がつきました!!!」という事態も油断するとあり得る話でした。
「IEはこのページでサポートしませんではダメなの？」
と考えるで方もいらっしゃるかもしれません。
ですが、ことはそう簡単ではないのです。
なんとIEを利用する人はそこそこ（こと日本においては特に）いるのです。
あまりITに明るくない、ブラウザにこだわりがない、職場でなぜかIEを強制されている、様々な理由でIEを使う人たちが日本にはたくさんいます。
そんな人たちを門前払いする決断を下せるサービスは……実はあまり多くないのです。
なので貴方は今日もIEさんの席へ足を運ぶ必要があります。綺麗に画像を表示してもらうにはどうすればいいか頭をひねる必要があります。
そんなIEが現役を退き、ついに公式のサポートから外れたのです。
サポート終了後のIEの動作は詳細には分かりませんが起動時にMicrosoft Edgeが代わりとして起動するそうな。
IEを利用する人はいなくなるのです。
「ヘッダーはwebページの上部に固定して動かないようにしてほしい。」と、その一言で指示が済むようになるのです。
これはとても嬉しいことです。
以下ではIEをwebアプリケーションやwebページでサポート対象から外した場合に、大手を振って利用できるようになるスタイルやフォーマットを書いていこうと思います。
個人的に使用頻度が高いだろうと思うもの、使用できるようになることで恩恵が大きいだろうと思っている内容を3つに絞って紹介します。
（js関連は皆様トランスコンパイル等で対応しているだろうと考えて今回は省きました）
（EdgeのIEモードなど、やや特殊なルートでIEを利用されるケースがありますので、IEでの閲覧自体をブロックするような実装を別途おすすめします）
▼ IEのサポート終了後に利用しやすくなるスタイルやフォーマット
flexboxは現代の一般的なwebページやwebアプリケーションで要素のレイアウトに必ず利用されている言っても過言ではないスタイルです。
本当にありとあらゆる場所で利用されていて「こんな機能です。」と一言で書くと多分マサカリが飛んできます。
例えばGoogleの「よく利用するwebページへの導線用アイコン」などはflexboxで配置されています。
要素を柔軟にレイアウトしたい場合に利用できる非常に便利なスタイルで、最新版のIEであるIE11でも利用することは可能でした。
利用できたのですが……IE特有の問題がいくつか報告されており、利用の際にはやや注意が必要でした。
* アイテムが潰れる / min-height, min-widthが効かない
* アイテムにbasisが適用されない
* imgが崩れる
* アイテムがコンテナからはみ出る
* calcが効かない etc……
参考：https://developer.mozilla.org/ja/docs/web/CSS/object-fit
モダンブラウザで開発しているのであればIE11でのチェックなしでのリリースはちょっと無謀かなと思えるぐらいには問題があり、普段開発にMacBookを利用しているエンジニアもこのためだけに、脇にWindowsPCを置いていたりいなかったりしました。
またflexboxで利用できるプロパティにはIE11(と一部古いSafari)で未対応となるものがあり、こちらも開発現場を悩ませていました。
例えばgapプロパティはflexbox間の距離を平易に指定できるプロパティですがIE11(と一部古いSafari)では動作しません。
この問題のためにflexbox間の距離を直感的ではないマージンハックに頼りながらレイアウトしているエンジニアもいるのではないでしょうか。
サポート終了後はもはや上に書いたような問題に悩まされることはないでしょう。
要素は自由に配置され、要素間の距離は平易に指定できるようになり、世界は平和になります。
▽ object-fit
「四角の中に画像を表示したい、綺麗に」
という感情を抱くことはよくあります。
恐らく、多分、エンジニアでなくてもそういう経験があるはずです。
けれども、この四角と画像のサイズは違うのです。
そんなとき
「表示したい四角のサイズと画像のサイズは違うけど、なんかいい感じにこの四角の中に画像を表示したい」
というとき貴方に味方してくれるのがobject-fitというスタイルです。
https://developer.mozilla.org/ja/docs/web/CSS/object-fit
このコラムで紹介してしまっているので、お察しかと思いますがこちらもIEでは利用できません。
有志の作成しているpolyfillはありますが、こちらを導入する一手間を加えなければ「四角の中に画像を表示したい。綺麗に。」を叶えるのに一苦労がありました。
これからはそんな些細なことに悩む必要はありません。
いくらでも四角の中に画像を綺麗に表示できます。
枠の縁が丸くても、枠が横長なのに画像が縦長でも、なんとかなります。人類の夢は叶うのです。
▽ WebP
「ウェッピー」と読みます。
Googleが開発しているオープンな静止画フォーマットでトラフィック量軽減と表示速度短縮に重きをおいて実装されています。
要はjpegやpngやgifの仲間です。
大きく画像の品質を変えずに素早く表示できる新しい画像の形式です。
画像を多用するようなページであれば画像をWebPに置き換えることで体感できる程度のアクセス速度改善を期待できるため、利用したいと考えている開発現場はそこそこありました。
ですが、こちらもIEでは利用できない点がネックでした。
サイトの画像を全てwebPに置き換えるとIEで閲覧した際に画像が全て非表示になります。悪夢ですね。
アクセス速度を改善したいという気持ちはあるが、サイト全体でIEのサポートを切っていないためWebPを導入できないというサービスをいくつかみてきました。
リクエストでUserAgentを読んでブラウザを判定し、「IEならjpg」「それ以外ならWebP」のようなやや手間のかかる実装を仕込み、部分的にアクセス速度を改善しているサービスもありました。
こちらはIEだけでなくiOSやmacOSの古いバージョンでも同様の問題がありましたが、古いバージョンのシェアは徐々に減っていきます。
これからはページの画像形式をwebPに置き換えて速度改善が行えるのです。
阿部寛(さん)のホームページ化計画も夢ではないのです。
ここまで読んでいただきありがとうございました。
IEのシェアは06月15日以降、確実に減ります。
思い切ってサポートを切るまたとないチャンスですので、webアプリケーション、webページの保守をやられている皆様がいらっしゃいましたら是非ともご検討ください。
また、直接開発に携わりが少ない方も「そんなこともあるのか。」と心の片隅に留めておいていただければ幸いです。
最後になりますが、コラムのネタの都合上IEのよろしくない部分を多く書いてしまって点についてお詫び申し上げます。悪いことばかりではないのです。時代が時代であれば天下をとっていた……かもしれない偉大なブラウザの一つであると私は思っております。
IEのサポート終了で、全てのブラウザ間の動作の差異が完全になくなるわけではありませんが、少しでも皆様の開発現場が幸せになりますようにと願っております。
サヨナラ、IE。今までありがとうございました。
https://twitter.com/MicrosoftEdge/status/1537149896662339584