Skip to main content

ブラウザ対応

Docusaurus allows sites to define the list of supported browsers through a browserslist configuration.

目的​

Webサイトでは、後方互換性とバンドルサイズのバランスを取る必要があります。 古いブラウザは最新のAPIや構文に対応していないため、同じ機能を実装するためにはより多くのコードが必要になります。

For example, you may use the optional chaining syntax:

const value = obj?.prop?.val;

しかしこれは残念ながら、2020年以降にリリースされたブラウザのバージョンでしか認識されません。 それ以前のブラウザバージョンと互換性を持たせるため、本番用のサイトを構築する際には、私たちのJSローダーがこのようなコードを次のようなより回りくどい構文にトランスパイル（変換）します。

var _obj, _obj$prop;

const value =
  (_obj = obj) === null || _obj === void 0
    ? void 0
    : (_obj$prop = _obj.prop) === null || _obj$prop === void 0
    ? void 0
    : _obj$prop.val;

しかし、この場合、29文字の行が168文字と6倍になるため、サイトのロード時間が長くなり、他のすべてのユーザーに不利益をもたらすことになります！ （実際には、使用される名前が短縮されるため、よりマシにはなります） トレードオフとして、JSローダーは、ブラウザリストに定義されているすべてのブラウザのバージョンでサポートされている程度までにしか構文を変換しません。

The browser list by default is provided through the package.json file as a root browserslist field.

警告

古いブラウザでは、コンパイルされた出力にサポートされていない（新しすぎる）JS構文が使用されるため、Reactの初期化に失敗し、HTML/CSSのみでJSがない静的なウェブサイトになってしまいます。

既定値​

Websites initialized with the default classic template has the following in package.json:

package.json
{
  "name": "docusaurus",
  // ...
  "browserslist": {
    "production": [">0.5%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  // ...
}

自然な言葉で説明すると、本番環境でサポートされるブラウザの条件は次のようになります。

  • With more than 0.5% of market share; and
  • Has official support or updates in the past 24 months (the opposite of "dead"); and
  • Opera Mini以外

また、開発環境でサポートされるブラウザは次の通りです。

  • The latest version of Chrome or Firefox or Safari.

You can "evaluate" any config with the browserslist CLI to obtain the actual list:

npx browserslist --env="production"

本番環境でサポートされるすべてのブラウザが出力されます。 2022年1月現在の出力は次の通りです。

and_chr 96
and_uc 12.12
chrome 96
chrome 95
chrome 94
edge 96
firefox 95
firefox 94
ie 11
ios_saf 15.2
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
opera 82
opera 81
safari 15.1
safari 14.1
safari 13.1

もっと読む​

You may wish to visit the browserslist documentation for more specifications, especially the accepted query values and best practices.