Reactを開発したものをデプロイしたとき、ブラウザのDevToolsでソースコードが見えてしまうという経験はありますか。
ソースコードが見られるのはセキュリティ的にはよくないし、しかもカッコ悪い！！ので、なんとかしましょう！
方法１：Server Side Rendering(SSR)
根本的にFrontend側ではなく、Backend側で処理を書けば良いということです。
ソースコード隠蔽ができるだけではなく、Single Page Application (SPA)のデメリットを克服することもできます。
- FirstView表示時間の短縮：
SPAでは、「Backend側からレスポンスを返す→Frontend側でJavaScriptを実行→表示」という流れなので、FirstView表示時間は従来の方法より長くなります。SSRと組み合わせることで、FirstView表示時間を短縮することができます。 - SEOの改善：
SPAでは、Backendからレスポンスが返された時点で、まだHtmlが生成されないため、Search EngineのClawlerがコンテンツを認識するのは難しくなります。SSRと組み合わせることで、この問題も改善されます。 - Isomophic (Universal) JavaScriptの実現：
FrontendとBackendを分けることによって、色々メリットが生まれますが、その代わりFrontendとBackendとのロジックの共有ができなくなります。SSRと組み合わせることで、Isomophic (Universal) JavaScriptを実現でき、FrontendとBackendとのロジックの共有が可能になります。
Isomophic (Universal) JavaScriptについてより知りたい方はこちらを参考にしてください。
SSRを実現するためには色々な方法があると思いますが、Vercel社(旧名：Zeit社)が開発しているNext.jsを使うと簡単にできます。
方法２： Create-react-appのGENERATE_SOURCEMAP
SSRを導入するのは大変だ、という方はCreate-react-appのGENERATE_SOURCEMAPを無効化する方法もあります。
Create-react-appでビルドしているのであれば、下記のようにスクリプトに追記すれば良いです。
package.json
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
もしくは.envファイルに下記を追記しても良いです。
GENERATE_SOURCEMAP=false
上記はReactでソースコードを隠す方法を紹介しました。
間違ったところなどがあれば是非ご指摘ください。また、他の方法をご存知の方はご教示いただければ幸いです。