Maersk.com のお客様と開発者にとって、Internet Explorer のサポート終了はどんな意味を持ちますか？
Steve Workman です。Maersk.com のリード エンジニアです。Maersk は、統合型サプライ チェーン ロジスティクスの世界的リーダーで、118 年間にわたり顧客の商品を世界中に輸送できるよう支援し、20 年以上にわたってオンラインで予約を行っています。Microsoft が 2022 年 6 月に IE のサポートを正式に終了したことを受け、@Maersk は 2022 年 5 月の初めに顧客向けシステムでの Internet Explorer（IE）の公式サポートを終了しました。今こそ、ウェブの重要な時代の終わり、そして新しい時代の幕開けです。
私は 2018 年に Maersk に入社し、最初のプロジェクトは新しいグローバル ナビゲーション バーを構築することでした。完全にテスト可能であること、ダウンタイムなしでグローバルにデプロイして更新が簡単であること、モバイル ファーストであること、応答性が高いこと、複数のブランドをサポートしていること、構成できること、11 言語にローカライズできること、IE9 をサポートしている必要がありました。
2018 年、Windows 7 とデフォルトのブラウザ IE9 はまだ非常に人気があり、Windows 10 と IE11 は 2020 年初頭に重要な量に達しました（統計カウンタによると）。Google のデータを見ると、IE9、さらに悪いことには互換モードの IE11 を使用しているお客様の取引が大量に発生していることがわかりました。このトラフィックは、新興市場や Maersk の顧客ベースが急速に拡大している地域に向けて大きく傾いていました。
ナビゲーション メニューが機能しない場合は、ログインボタンを見つけにくい。ログインがうまくいかない場合、コンテナは予約できません。そして突然、従来のブラウザが原因で大きな問題が発生します。
この問題を解決するため、ナビゲーション コンポーネントと将来のすべてのウェブアプリで、漸進型のエンハンスメント体制を採用しました。これを「機能」させることはできますが、そのためにはかなりのポリフィルや制限があるかもしれません。たとえば、IE は Fetch API をサポートしていませんが、これらのブラウザには IE10 まで戻るポリフィルがあります。IE9 では、XMLHttpRequest 呼び出しを別のファイルにコーディングしました。これは、fetch をポリフィルできない場合にのみ読み込まれるようにしました。
IE9 のサポートを終了するとき、顧客がほんの一握りしかいなかったときに、最新のブラウザを使用しているユーザーにとって最小限の労力と最大のメリットで、アプリケーションからこのコードを削除するだけで済みました。
Maersk のデジタル トランスフォーメーションが進むにつれて、私たちはサイトの多くの部分を VueJS を活用したマイクロ フロントエンドで再構築しました。Vue には、高度なツリー シェイキングとバンドル最適化のための優れたプリセット構成と、アプリケーションの 2 つのバージョンがビルドされる最新モードまで、将来を見据えた多くの機能がありました。1 つはエバーグリーン ブラウザ用の最新の ES モジュール構文を使用し、もう 1 つは ES6 モジュールを理解しないレガシー アプリケーション用です。この旧バージョンは IE などのブラウザに配信されており、ブラウザに欠けている機能が多いために、多くの場合、gzip で圧縮されたポリフィル バンドルが 100 KB 大きくなります。
また、Microsoft が IE10 で仕様を開始したことから、CSS グリッドなどの最新の CSS レイアウト手法のほとんどを使用できることがわかりました。autoprefixer と こちらの「CSS Tricks」記事を活用して、ページのさまざまな領域に名前を付けられるようになりました。軽量で、あらゆるプロジェクトに適した、非常に柔軟なレイアウト システムを構築できました。しかし、互換性の問題もあり、修正に多くの時間を要しました。
突然費用便益分析段階に戻りましたが、今回はどのバージョンの IE でも、IE9 と同様に、すべての人をサポートすることと、各プロジェクトで数週間の手間のかかる開発時間のトレードオフとなります。お客様には最新のブラウザを使用した方が良いと確信しており、ウェブサイトを訪れるユーザーは IE を使わないようにしています。IE を開く習慣を身に付けて Google とのやり取りを行うアクティブ ユーザーについては、少量でも効果があったことがわかりました。このメッセージは良いものでしたが、数学をうまく機能させるには不十分でした。
IE からの訪問が減ったため、Maersk は IE の公式サポートを終了することを決定しました。なぜ今なのかというと、
簡単に言うと、ウェブ プラットフォームは進化しており、わずかな量のポリフィルがあったとしても、IE11 ではやるべきことを実行できません。ナビゲーション コンポーネントを取り上げます。最新のウェブ プラットフォームの世界では、これはカスタム要素であり、CSS 変数とコンテナクエリによって駆動される、独自のカプセル化スタイルを備えています。これにより、すべてを 1 つのコンポーネントで制御できます。これらのプラットフォームがなければ、コンポーネントのスタイルはアプリケーションから完全に変更され、スタイルが他のコンポーネントにリークしたり、アプリケーションに戻されたりする可能性があります。カスタム要素、ShadyCSS、ShadyDOM、template 要素など、ほとんどの機能をエミュレートできるポリフィルが用意されています。
実際には、これらのポリフィルは分離されたコンポーネントには適していますが、複雑なアプリケーションで複数のコンポーネントを組み合わせると、JavaScript ランタイムがスタイルツリーの計算を 40 秒間試みる間、IE は数十秒の白い画面で停止します。つまり、ブラウザをサポートするためにユーザー エクスペリエンスが著しく損なわれたということです。
以前は、小さい中断がありました。ポリフィルを使用すると、First Paint の 0.5 秒もかかっただけで、それだけでは不十分です。これが違うため、これらのアプリは使用できなくなりました。ポリフィルでできることは、最新のウェブ プラットフォームの複雑さに課題がある場合に限られます。
IE のサポートが終了してから何が起きたか、ご存知ですか？ほとんどない。カスタマー サポート チケットが大量に寄せられることや、否定的なフィードバックも発生していません。エンジニアの満足度も上がり、アプリケーションは Vue 3（プロキシ オブジェクトをポリフィルできないため IE11 はサポートしていません）にアップグレードし、バンドルサイズを小さくすることができます。CSS 変数と可変フォントを完全にサポートすることで、ブランド間でのテーマ設定を簡素化できます。また、Vue の単一ファイル コンポーネント内でトークンを使用できるため、認知の複雑さが軽減され、デベロッパー エクスペリエンスが向上します。
顧客の観点から見ると、IE の使用は緩やかに減少し続けています。サイトから IE がシャットダウンされてはいませんが、段階的な機能強化がグレースフル デグラデーションに変わるにつれて、機能とアプリケーションが動作しなくなります。お客様は Google のテクノロジーの進歩からメリットを得ることができます。ベスト プラクティス、ユーザー補助、デザインが進化する Lit ベースのデザイン システムに組み込まれるため、より一貫したエクスペリエンスがサイトで得られ、現在または将来のフレームワークとの完全な相互運用性を備えています。
新しいウェブ プラットフォーム機能が社内でどのように活用できるのか楽しみです。たとえば、船舶システムを夜間に使いやすくするためのダークモードの利用から、ウェブアプリがあらゆる状況で私たちの周りの世界とやり取りできるようにする Web Bluetooth、WebXR、PWA まで、さまざまな用途があります。ありがとう、Internet Explorer。今ではウェブプラットフォームについていくことが可能になりました。
ヒーロー画像 by Matt Botsford