profile

はじめに (対象読者・この記事でわかること)

この記事は、Web開発者やフロントエンドエンジニアを対象にしています。特に、古いブラウザとの互換性を考慮したWebサイトやアプリケーションを開発する必要がある方に役立つ内容です。

この記事を読むことで、JavaScriptを使用してInternet Explorer(IE)とEdge IEモードを正確に判定する方法を習得できます。ユーザーエージェント文字列に基づく判定方法と、機能検出による判定方法の両方を学び、それぞれのメリット・デメリットを理解できます。また、実際のコード例を交えて具体的な実装方法も解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

JavaScriptの基本的な知識
Webブラウザの基本的な理解
ユーザーエージェント文字列の基本的な概念

ブラウザ判定の重要性とIE/Edge IEモードの特殊性

Web開発において、ブラウザの種類やバージョンを判定することは非常に重要です。特に、Internet Explorer(IE)は独自の実装や古い標準に準拠しているため、他のモダンブラウザとは異なる対応が必要になることがあります。

さらに、Microsoft Edgeには「IEモード」という機能があり、このモードではIEのレンダリングエンジンが使用されます。これにより、従来のIE専用のWebサイトをEdgeでも表示できるようになりますが、開発者側から見ると、どのブラウザでアクセスされているのかを正確に判定する必要があります。

IEとEdge IEモードは、ユーザーエージェント文字列が似通っているため、単純な文字列での判定では誤判定が発生しやすくなっています。この記事では、この問題を解決するための正確な判定方法を解説します。

IEとEdge IEモードの判定方法

ユーザーエージェント文字列に基づく判定方法

ユーザーエージェント文字列は、ブラウザやOSに関する情報を含む文字列です。JavaScriptではnavigator.userAgentプロパティからこの文字列を取得できます。

IEとEdge IEモードのユーザーエージェント文字列には特徴的なパターンがあります。以下に判定のための正規表現を示します。

Javascript

function isIE() {
  return /MSIE|Trident/.test(navigator.userAgent);
}

function isEdgeIEMode() {
  return /Trident.*rv:11\.0/.test(navigator.userAgent) && /Edge\/\d+/.test(navigator.userAgent);
}

この方法は、ユーザーエージェント文字列のパターンを直接チェックするため、実装が比較的簡単です。しかし、ユーザーエージェント文字列はユーザーが変更できる可能性があるため、100%信頼できるとは限りません。

機能検出による判定方法

より信頼性の高い判定方法として、機能検出が挙げられます。ブラウザが特定の機能をサポートしているかどうかをチェックすることで、ブラウザの種類を判定します。

以下に、機能検出を用いた判定方法を示します。

Javascript

function isIE() {
  return 'ActiveXObject' in window;
}

function isEdgeIEMode() {
  return isIE() && 'MSInputMethodContext' in window && 'documentMode' in document;
}

この方法は、ブラウザの実装に依存するため、ユーザーエージェント文字列の変更の影響を受けにくく、より信頼性が高いです。

ユーザーエージェントと機能検出を組み合わせた判定方法

最も信頼性の高い判定方法として、ユーザーエージェント文字列と機能検出を組み合わせた方法が考えられます。以下にその実装例を示します。

Javascript

function isBrowser() {
  if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1) {
    if (navigator.userAgent.indexOf('Edge') !== -1) {
      // Edge IEモード
      return 'edge-ie';
    } else {
      // 通常のIE
      return 'ie';
    }
  }
  return 'other';
}

// または、より高度な判定

function isBrowserAdvanced() {
  const ua = navigator.userAgent;

  // Edge IEモードの判定
  if (/Trident.*rv:11\.0/.test(ua) && /Edge\/\d+/.test(ua)) {
    return 'edge-ie';
  }

  // 通常のIEの判定
  if (/MSIE|Trident/.test(ua)) {
    return 'ie';
  }

  return 'other';
}

この方法は、ユーザーエージェント文字列と機能検出の両方の利点を活かした、より包括的な判定が可能です。

実際の使用例

実際のWebサイトやアプリケーションでこれらの判定方法を使用する例を以下に示します。

Javascript

function applyBrowserSpecificStyles() {
  const browserType = isBrowserAdvanced();

  switch (browserType) {
    case 'ie':
      // IE固有のスタイルやスクリプトを適用
      document.documentElement.classList.add('ie-browser');
      break;
    case 'edge-ie':
      // Edge IEモード固有のスタイルやスクリプトを適用
      document.documentElement.classList.add('edge-ie-browser');
      break;
    default:
      // その他のモダンブラウザ向けのスタイルやスクリプトを適用
      document.documentElement.classList.add('modern-browser');
  }
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', applyBrowserSpecificStyles);

このように、判定結果に基づいて異なる処理を実行することで、ブラウザごとの差異を吸収できます。

判定方法の比較と選択基準

これまで紹介した判定方法を比較し、それぞれの特徴をまとめます。

ユーザーエージェント文字列に基づく判定 - メリット: 実装が簡単 - デメリット: ユーザーエージェント文字列は変更可能で信頼性が低い - 適したケース: 簡易的な判定が必要な場合
機能検出による判定 - メリット: ユーザーエージェント文字列の変更の影響を受けない - デメリット: 判定ロジックが複雑になる場合がある - 適したケース: 高い信頼性が必要な場合
ユーザーエージェントと機能検出を組み合わせた判定 - メリット: 両方の方法の利点を活かせる - デメリット: 実装が最も複雑 - 適したケース: 最高の信頼性が必要な場合

一般的には、ユーザーエージェントと機能検出を組み合わせた方法が最も信頼性が高く推奨されます。ただし、プロジェクトの要件やリソースに応じて適切な方法を選択することが重要です。

まとめ

本記事では、JavaScriptを使用してInternet ExplorerとEdge IEモードを正確に判定する方法を解説しました。

ユーザーエージェント文字列に基づく判定方法は実装が簡単ですが、信頼性に欠ける場合がある
機能検出による判定方法は信頼性が高いが、実装が複雑になる場合がある
ユーザーエージェントと機能検出を組み合わせた方法が最も信頼性が高く推奨される

この記事を通して、ブラウザ判定の重要性と具体的な実装方法を理解できたことと思います。古いブラウザとの互換性を考慮したWeb開発において、これらの知識は非常に役立つでしょう。

今後は、ブラウザ判定ライブラリの活用方法や、モダンブラウザ向けの代替実装についても記事にする予定です。

profile🌐