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