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