0Pricing
Frontend Academy · レッスン

ブラウザー互換性とcaniuse.com

caniuse.comでブラウザーごとの機能対応状況を確認し、ベンダープレフィックスを理解し、必要に応じてポリフィルやフォールバックを使います。

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

互換性が重要な理由

ブラウザーによって、Web標準への対応速度は異なります。Chrome 130で利用できるCSSプロパティやJavaScript APIが、古いSafariやFirefoxのバージョンには存在しないことがあります。互換性をテストして計画に含めることで、ユーザーの利用環境で表示や動作が壊れるのを防げます。

caniuse.com — 互換性を確認するリファレンス

caniuse.comにアクセスし、任意のCSSプロパティ、JavaScript API、HTML属性を入力します。主要なすべてのブラウザーとその最近のバージョンについて、色分けされた対応状況の表を確認できます。利用統計や、一部対応に関する注記も表示されます。

caniuseの表を読む

緑色は対応済み、黄色は一部対応、赤色は未対応、灰色は不明を表します。上部にある世界全体の利用率を確認してください。97%以上のユーザーが利用できる場合は、通常フォールバックなしで使えます。

browser-compat-dataとMDN

MDN Web Docsの各APIリファレンスページの末尾には、ブラウザー互換性の表があります。caniuseと同じデータを使用しており、ブラウザーベンダー自身によって頻繁に更新されています。

Baselineイニシアチブ

Baselineイニシアチブ（web.dev/baseline）では、Chrome、Edge、Firefox、Safariでの対応状況に基づいて、機能を「新たに利用可能」または「広く利用可能」として示します。「広く利用可能」な機能は、ポリフィルなしで安全に使用できます。

ポリフィル

ポリフィルとは、古いブラウザーで新しいAPIを実装するJavaScriptコードです。代表的な提供元には、必要なポリフィルだけを配信するpolyfill.io、包括的なJavaScriptポリフィルを提供するcore-js、Babel helpersがあります。

// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>

@supports — CSSの機能クエリ

@supportsを使うと、あるプロパティがサポートされている場合にのみ適用されるCSSを記述できます。メディアクエリでレスポンシブ対応の上書きを行うのと同様に、CSSのフォールバックを提供できます。

/* Fallback for all browsers */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* Enhancement for browsers that support grid */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

ベンダープレフィックス（レガシー）

以前のCSS機能では、ベンダープレフィックス（-webkit-、-moz-、-ms-）が必要でした。現在ではほとんど廃止されており、最新のブラウザーではプレフィックスのない標準プロパティが使われます。Autoprefixer（PostCSSプラグイン）は、まだ必要な場合に自動的に追加します。

Babelによるトランスパイル

Babelは最新のJavaScript（ES2022以降）を、古いブラウザーでも実行できるES5へコンパイルします。Viteとwebpackはプラグインを介してBabelと統合できます。package.jsonのbrowserslistで対象ブラウザーを設定します。

// package.json
"browserslist": [
  "last 2 versions",
  "not dead",
  "> 0.5%"
]

実際のブラウザーでのテスト

DevToolsのデバイスエミュレーションは、実際のブラウザーでのテストの代わりにはなりません。真のクロスブラウザー検証には、BrowserStack、Sauce Labs、または実際のSafariブラウザー（macOSまたはiOSが必要）を使用してください。

エバーグリーンブラウザーの状況

Chrome、Edge、Firefox、Safariはいずれも自動更新されます。古いブラウザーのロングテールは年々短くなっています。ほとんどの一般消費者向け製品では、各ブラウザーの直近2つのメジャーバージョンを対象にすれば、95%以上のユーザーをカバーできます。

確認問題

caniuse.comのサポート表にある緑色のセルは何を示しますか？

まとめ：ブラウザー互換性

新しいAPIを使う前にcaniuse.comを確認します。MDNの互換性表を読みます。browserslistで適切なブラウザーの組み合わせを対象にします。CSSの機能クエリには@supportsを使います。必要なものだけポリフィルします。Babelで最新のJavaScriptをトランスパイルします。重要な機能は実際のブラウザーでテストします。

よくある質問

「ブラウザー互換性とcaniuse.com」レッスンは無料ですか？

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

「ブラウザー互換性とcaniuse.com」で何を学びますか？

caniuse.comでブラウザーごとの機能対応状況を確認し、ベンダープレフィックスを理解し、必要に応じてポリフィルやフォールバックを使います。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ブラウザー互換性とcaniuse.com」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Chrome DevTools: Elements、Console、Network
  2. VSCode: 拡張機能、Emmet、ショートカット
  3. PrettierとESLintの設定
  4. ブラウザー互換性とcaniuse.com
← Frontend Academyに戻る