本文へ移動

サポート対象ブラウザと機能

サポート対象ブラウザ​

デフォルトでは、生成されたプロジェクトはすべてのモダンブラウザをサポートしています。Internet Explorer 9、10、および11のサポートには、ポリフィルが必要です。古いブラウザをサポートするためのポリフィルセットを使用するには、react-app-polyfill を使用してください。

サポート対象の言語機能​

このプロジェクトは、最新のJavaScript標準のスーパーセットをサポートしています。ES6構文機能に加えて、以下の機能もサポートしています。

さまざまな提案のステージについて詳しく学習してください。

実験的な提案の使用には注意が必要ですが、Facebookでは製品コードでこれらの機能を積極的に使用しているため、これらの提案が将来変更された場合にもcodemodsを提供する予定です。

デフォルトでは、このプロジェクトにはポリフィルは含まれていません。

Array.from()やSymbolなど、**ランタイムサポート**が必要なその他のES6+機能を使用する場合は、適切なポリフィルを手動で含めるか、ターゲットとするブラウザが既にそれらをサポートしていることを確認してください。

サポート対象ブラウザの設定​

デフォルトでは、生成されたプロジェクトには、グローバルな使用率に基づいて幅広いブラウザをターゲットとする（本番ビルドでは> 0.2%、開発ビルドではモダンブラウザ）、browserslist構成がpackage.jsonファイルに含まれています。これにより、特にasync/awaitなどの言語機能を使用する場合に優れた開発エクスペリエンスが得られ、同時に本番環境でも多くのブラウザとの高い互換性が確保されます。

browserslist構成は、出力されるJavaScriptを制御し、生成されたコードが指定されたブラウザと互換性を持つようにします。buildスクリプトを実行して本番ビルドを作成する際にはproductionリストが使用され、startスクリプトを実行する際にはdevelopmentリストが使用されます。https://browserl.ist を使用して、設定されたbrowserslistでサポートされているブラウザを確認できます。

package.jsonに指定されているbrowserslistの例を以下に示します。

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

これは自動的にポリフィルを含まないことに注意してください。サポートするブラウザに基づいて、必要に応じて言語機能のポリフィルを適用する必要があります（上記を参照）。

browserslistの設定を編集すると、変更がすぐに反映されない場合があります。これは、babel-loaderのバグにより、package.jsonの変更が検出されないためです。簡単な解決策としては、node_modules/.cacheフォルダを削除して、再試行してください。