【React】ソースコードを隠す方法

2409 ワード
reactnative React next.js redux JavaScript JavaScript テキストリンク

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でソースコードを隠す方法を紹介しました。
間違ったところなどがあれば是非ご指摘ください。また、他の方法をご存知の方はご教示いただければ幸いです。