<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。最近ではjQueryに代わるフレームワークとして注目を集め、Reactに置き換えるWebサイトも多くあります。 Reactはいまでは様々なホームページで使われていますが、見ただけではわかりません。 今回はホームページにReactが使われているか確認する方法を紹介します。 <h2 id="h19047066cc">Reactが使われているか確認する</h2> <h3 id="hcd75268028">React Developer ToolsをChrome拡張に追加する</h3> WebサイトにReactが使われているか確認するにはChromeにReact Developer Toolsを追加します。 <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja" target="_blank" rel="noopener noreferrer">React Developer Tools - Chrome ウェブストア</a> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/4c472d3f31ca4f2b867c10c42081fcd7/react_check-react_chrome-webstore.png" alt=""> 「Chromeに追加」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/095bd37d995d41ae93b864d3babdfcc3/react_check-react_add-chrome.png" alt=""> 「拡張機能を追加」をクリックします。 これだけ。 アドレスバーの横にアイコンが追加されます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <h3 id="hb989abdf8d">表示されるアイコンの種類</h3> Reactが使用されているページは以下のアイコン。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8afc6494808c431cbd042970bfffafff/react_check-react_icon-prod.png" alt=""> <blockquote>This page is using the production build of React.</blockquote> 使われていないページだとグレーアウトします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <blockquote>This page doesn't appear to be using React.</blockquote> Reactには<code>develop build</code>と<code>production build</code>があって、developの状態だとこのアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/a66f5ef378e24713baf62537f2b44d60/react_check-react_icon-dev.png" alt=""> <blockquote>This page is using the development build of React.</blockquote> 古いバージョンのReactを使っているサイトは以下のアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/b4f413d9ede94a7ca2feeb638b0618fb/react_check-react_icon-old.png" alt=""> <blockquote>This page is using an outdated version of React.</blockquote> <h2 id="h9683392855">React Developer Toolsについて</h2> React Developer Toolsは、もともとReactの開発補助のためのChrome拡張機能です。 Reactの開発に便利なStateやコンポーネントの状態の確認などができ、かなり高機能な拡張機能です。 <h3 id="hf50973b858">Development Build と Production Build</h3> Development Buildのままだとmapファイルが作成され、セキュリティも弱くなるので、デプロイするときはかならずProduction Buildにしましょう。 <h4 id="he0625ed872">Create React App</h4> <code>Create React App</code>を使用しているプロジェクトは以下のコマンドを使用します。 <pre><code>[shell:shell]
# npm run build</code></pre> <h4 id="h0123682dfe">webpack</h4> <code>webpack</code>を使用してbuildする場合は設定ファイルで<code>mode: 'production'</code>を指定しましょう。 <pre><code>[javascript:webpack.js]
module.exports = {
 mode: 'production'
}</code></pre> 参考: <a href="https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up" target="_blank" rel="noopener noreferrer">react-devtools | GitHub</a>

ゆったりWeb手帳

気になったことをのんびり書くよ