HTML Academy · レッスン

機能検出とブラウザー判定の比較

Q: 「機能検出とブラウザー判定の比較」で何を学びますか？

ユーザーエージェントの判定ではなく機能検出を使用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ユーザーエージェントの判定ではなく機能検出を使用します

「機能検出とブラウザー判定の比較」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

互換性に対する2つのアプローチ

現在のブラウザーが機能をサポートしているかを確認するには、機能を直接検出する（"IntersectionObserver" in window）方法と、ユーザーエージェント文字列を調べる（navigator.userAgent.includes("Chrome")）方法があります。一方は信頼できますが、もう一方は長年にわたってバグの原因となっています。

スニッフィングが失敗する理由

ユーザーエージェント文字列は正確とは限りません。EdgeはChrome（さらにはSafariやFirefox）を名乗ります。Android版ChromeはiOS版Chromeとは異なるUAを送信します。プライバシー保護のため、ブラウザーはUA文字列の「凍結」に対応しています。UA文字列に基づくロジックは、数か月おきに壊れてしまいます。

機能検出のパターン

コードが必要とする実際のAPIを確認します。if ("IntersectionObserver" in window) { ... }プロパティが存在すれば、ブラウザーはその機能をサポートしています。存在しなければ、フォールバックの処理に進みます。この確認は直接的で高速なうえ、将来の変更にも強い方法です。

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(handler);
} else {
  loadPolyfill().then(() => { /* use IntersectionObserver */ });
}

検出してから使う

機能の検出には、実際に機能するフォールバックを組み合わせてください。機能がないことを検出しても、ない場合に行う処理がなければ役に立ちません。ポリフィルを読み込む、静的な代替表示を描画する、または機能自体を完全に非表示にするなどの処理を用意します。

CSSの機能クエリ

CSSにも独自の機能検出機能があります。@supports (display: grid) { ... }ブロックは、ブラウザーがプロパティと値の組み合わせを理解できる場合にだけ適用されます。これを使えば、古いブラウザー向けにfloatベースのフォールバックを用意しながら、グリッドレイアウトを提供できます。

@supports (display: grid) {
  .grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
  .grid > * { float: left; width: 33%; }
}

User Agent Client Hints

最新のブラウザーは、navigator.userAgentData（Chromiumのみ）を通じて構造化された情報を公開します。自由形式の文字列ではなく、ブランドとバージョンの組み合わせを返します。それでも、まずは機能検出を優先してください。UAヒントは、プロパティの確認から機能を推測できない場合にだけ役立ちます。

スニッフィングが許容される場合

UA検出が狭い範囲で有効なのは、既知の不具合があるブラウザーを対象外にする場合です。たとえば、特定バージョンのiOS Safariに既知のバグがある場合です。その場合でも、機能ベースの対象外指定（CSS.supports("aspect-ratio: 1")）を優先してください。UA検出は最後の手段にするべきです。

Modernizr形式のライブラリ

Modernizrは多くの機能検出をまとめ、<html>要素のクラスとして公開します（html.flexbox、html.no-flexbox）。現代のプロジェクトで必要になることはほとんどありません。多くの検出は1行で書けるためです。ただし、レガシーシステムの移行には今でも役立ちます。

フォールバックのテスト

検出処理を組み込んだら、両方の経路をテストしてください。DevToolsを開き、機能をundefinedに上書きして、フォールバックが動作することを確認します。テストされていないフォールバックは劣化します。ユーザーが必要とする時期には、開発者が想像もしなかった形で失敗することがよくあります。

フレームワークでの検出

ReactやVueなどに特別な検出APIはありません。effect内またはコンポーネントの初期化処理で、通常のJavaScriptを使用してください。サーバーで描画するアプリではクライアント側で検出する必要があります。SSR中は"IntersectionObserver" in windowがundefinedになるためです。

機能推測のためのUAスニッフィングを避ける

機能を推測するためにUAを確認するチームもあります（「iPhoneですか。では、おそらくTouchに対応しています」）。これは無関係な2つの事柄を混同しています。タッチには"ontouchstart" in windowで直接検出するか、より適切には入力方式を抽象化するポインターイベントを優先してください。

理解度チェック

ブラウザーの機能に対応する際、ユーザーエージェントのスニッフィングよりも機能検出が優先されるのはなぜですか。

まとめ

ユーザーエージェントのスニッフィングよりも、機能検出（"API" in window）を優先してください。CSSには同じ目的の@supportsがあります。検出処理には必ず実際のフォールバックを組み合わせ、両方の経路をテストしてください。UAスニッフィングは、既知の不具合があるブラウザーのバージョンを対象外にする場合に限って使い、機能の推測には使わないでください。

よくある質問

「機能検出とブラウザー判定の比較」レッスンは無料ですか？

はい。「機能検出とブラウザー判定の比較」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「機能検出とブラウザー判定の比較」で何を学びますか？

ユーザーエージェントの判定ではなく機能検出を使用しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「機能検出とブラウザー判定の比較」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る