ゆったり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 ウェブストア
post-image
「Chromeに追加」をクリックします。
post-image
「拡張機能を追加」をクリックします。
これだけ。
アドレスバーの横にアイコンが追加されます。
post-image

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

Reactが使用されているページは以下のアイコン。
post-image
This page is using the production build of React.
使われていないページだとグレーアウトします。
post-image
This page doesn't appear to be using React.
Reactにはdevelop buildproduction buildがあって、developの状態だとこのアイコンになります。
post-image
This page is using the development build of React.
古いバージョンのReactを使っているサイトは以下のアイコンになります。
post-image
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
次の記事socket.ioでidが取得できない