ゆったりWeb手帳

WebサイトにReactが使われているか確認する

Reactとは

ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。 最近ではjQueryに代わるフレームワークとして注目を集め、Reactに置き換えるWebサイトも多くあります。

Reactはいまでは様々なホームページで使われていますが、見ただけではわかりません。

今回はホームページにReactが使われているか確認する方法を紹介します。

Reactが使われているか確認する

React Developer ToolsをChrome拡張に追加する

WebサイトにReactが使われているか確認するにはChromeにReact Developer Toolsを追加します。

React Developer Tools - Chrome ウェブストア

chrome-webstore

「Chromeに追加」をクリックします。

add-chrome

「拡張機能を追加」をクリックします。

これだけ。

アドレスバーの横にアイコンが追加されます。

icon-not

表示されるアイコンの種類

Reactが使用されているページは以下のアイコン。

icon-prod

  • This page is using the production build of React.

使われていないページだとグレーアウトします。

icon-not

  • This page doesn’t appear to be using React.

Reactにはdevelop buildproduction buildがあって、developの状態だとこのアイコンになります。

icon-dev

  • This page is using the development build of React.

古いバージョンのReactを使っているサイトは以下のアイコンになります。

icon-old

  • This page is using an outdated version of React.

React Developer Toolsについて

React Developer Toolsは、もともとReactの開発補助のためのChrome拡張機能です。

Reactの開発に便利なStateやコンポーネントの状態の確認などができ、かなり高機能な拡張機能です。

Development Build と Production Build

Development Buildのままだとmapファイルが作成され、セキュリティも弱くなるので、デプロイするときはかならずProduction Buildにしましょう。

Create React App

Create React Appを使用しているプロジェクトは以下のコマンドを使用します。

shell
# npm run build

webpack

webpackを使用してbuildする場合は設定ファイルでmode: 'production'を指定しましょう。

webpack.js
module.exports = {
  mode: 'production'
}

参考: react-devtools | GitHub