Reactアプリをローカルで起動するとタイムトラベラー呼ばわりされたので対処する

こんにちは、CX事業本部 IoT事業部の若槻です。

Greetings, time traveller ???

開発中のReactアプリケーションをローカル環境（localhost）で起動すると、下記のように警告が出ていました。

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Warning

Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Warning

Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.

CSSファイルの./src/index.cssと./src/App.cssに対して、Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.という警告が出ています。

ちなみに同じコードをサーバー（AWS）にデプロイした上でアクセスするとこの警告は出ません。

CSSがプレフィクスレス？

警告文を翻訳したのが次の文です。

ご挨拶、タイムトラベラー。私たちはプレフィックスのないCSSの黄金時代にあり、スタイルシートにAutoprefixerは不要になりました。

洒落っ気のある文章ですが、とても分かりづらいです。プレフィックスとAutoprefixerというのがキーワードのようです。それぞれについて調べてみます。

まずプレフィクスについてはベンダープレフィックスのことを指しているようです。

• Vendor Prefix (ベンダー接頭辞) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

ブラウザベンダーは試験的に提供したいCSSプロパティに下記のベンダープレフィックスを付けることにより、標準のプロパティと区別するようにしています。

• -webkit- (Chrome, Safari, 新しいバージョンの Opera, ほぼすべての iOS ブラウザー (Firefox for iOS を含む)。基本的に WebKit ベースのブラウザーすべて)
• -moz- (Firefox)
• -o- (WebKit 導入前の古い Opera)
• -ms- (Internet Explorer と Microsoft Edge)

使用例:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

一方Autoprefixerとは、CSSのプロパティを一つ書けば他のVendor Prefix付きのプロパティも自動で追加してくれるライブラリとのことです。

• postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

ここまで確認できたところでもう一度警告文を見てみます。

ご挨拶、タイムトラベラー。私たちはプレフィックスのないCSSの黄金時代にあり、スタイルシートにAutoprefixerは不要になりました。

すると今度は「今回のアプリを起動した環境ではCSSにはプレフィクスが不要であるため、Autoprefixerも不要」というのがなんとなく読み取れますね。

また、そもそもとしてブラウザベンダーはベンダープレフィックスを使用しないようになってきているようです。だからベンダープレフィックス（Autoprefixer）を使用するとタイムトラベラー（時代遅れ）呼ばわりしているんですね。

対処してみる

有効だった方法

結論としては、package.jsonでdevelopmentのbrowserslistをproductionと同じ指定とすれば解決できました。

• /javascript

$ git diff package.json
diff --git a/package.json b/package.json
index 30e0b6e..db83d56 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,9 @@
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ]
   },

browserslistではアプリケーションのターゲットブラウザを設定します。（指定の意味は下記参照）

• browserslist - npm

アプリのローカル起動時（react-scripts start実行時）はbrowserslistのdevelopmentの値を参照するようです。 しかし使用していたGoogle Chromeは最新版であるにも関わらずlast 1 chrome versionとあるのに警告が出るのはよく分からなかったです。

有効でなかった方法

• Autoprefixerを実行させないようにする

これは方法が分かりませんでした。Autoprefixerはcreate-react-app時にDependencyとして必ずインストールされるため、そもそも削除するのが難しいです。そしてreact-scripts start実行時に実行させないようにする方法も分かりませんでした。

• 原因となっているCSSプロパティを削除する

create-react-app時に既定で作成されるCSSファイルindex.cssとApp.cssは初回作成特から特に変更は行っていませんでした。試しに両ファイルから全てのCSSプロパティを削除しても警告は出続けました。

おわりに

Reactアプリをローカルで起動するとタイムトラベラー呼ばわりされたので対処した話でした。

ローカル環境でしか出ない警告であったため放置しても良かったのですが興味本位でここまで調べてみました。警告を消す方法は分かったのですが、消えた理由もそもそも出ていた理由も分からないため釈然としないです。

以上