ReactをGitHubを使わずに利用可能にする方法

create-react-appはGitHubにアクセスしないで利用する方法はいくつかありますが、それぞれに一定の手間や制限があります。以下に代表的な方法を紹介します。

• create-react-appの代わりに、CodeSandboxというオンラインの開発環境を使う方法です。CodeSandboxでは、Reactのテンプレートを選択して、ブラウザ上でReactアプリを作成できます。CodeSandboxはGitHubと連携できますが、必須ではありません。CodeSandboxで作成したReactアプリは、ZIPファイルとしてダウンロードできます¹。
• create-react-appの代わりに、webpackやbabelなどのツールを自分で設定して、Reactアプリの開発環境を構築する方法です。この方法では、create-react-appが自動的に行ってくれる設定を手動で行う必要がありますが、より細かくカスタマイズできます²。
• create-react-appを使う方法ですが、GitHubへのアクセスを回避するために、npmのキャッシュやミラーを利用する方法です。この方法では、create-react-appが必要とするパッケージを事前にダウンロードしておき、インターネットに接続しなくてもインストールできるようにします³。

以上の方法の中で、最も簡単なのはCodeSandboxを使う方法だと思います。しかし、CodeSandboxはオンラインであることや、機能やパフォーマンスに制限があることなど、注意点もあります。自分の目的や環境に合わせて、最適な方法を選択してください。

ソース: Bing との会話 2023/10/31
(1) 脱create-react-app ~ 真面目に express × react 環境を構築する~. https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439.
(2) create-react-appで作成したReactアプリをgh-pages無しで .... https://trialanderror.jp/create-react-app-github-pages/.
(3) create-react-appが消えてしまったことの調査 - Zenn. https://zenn.dev/laravelstudy/articles/bad11d64eeac42.
(4) Windows での React のインストール | Microsoft Learn. https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-on-windows.
(5) github-pageにReact appをデプロイしてみた #JavaScript - Qiita. https://qiita.com/Ham4690/items/4535d744a78db9e403d7.
(6) undefined. https://github.com/ohs30359-nobuhara/react-starter.
(7) undefined. https://github.com/webpack/webpack-dev-server.
(8) undefined. https://github.com/jantimon/html-webpack-plugin.
(9) undefined. https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site.
(10) undefined. https://create-react-app.dev/docs/deployment/.

ReactフレームワークをHTML内のscriptタグのsrc属性でReactのソースコードを読み込んで利用することは可能ですが、おすすめしません。その理由は以下の通りです。

• ReactはJSXというHTMLに似た構文を使ってUIを記述しますが、ブラウザはそのままではJSXを解釈できません。JSXをJavaScriptに変換するためには、Babelなどのコンパイラーが必要です¹。
• ReactはコンポーネントというUIの一部分を表すコードの単位で構成されますが、コンポーネント間のデータや状態の管理には、Reactだけでは不十分です。ReduxやReact Routerなどのライブラリーを組み合わせて使うことが一般的です²。
• Reactはウェブサイトのパフォーマンスや保守性を向上させるために、ビルドツールやモジュールバンドラーなどのツールチェーンを必要とします。WebpackやParcelなどのツールは、複数のJavaScriptファイルやCSSファイルを一つにまとめたり、画像やフォントなどのリソースを最適化したりします³。

以上のように、ReactフレームワークをHTML内のscriptタグで読み込んで使うだけでは、Reactの本来の機能やメリットを十分に活用できません。Reactフレームワークを使う場合は、専用の開発環境をセットアップすることが望ましいです。

Reactフレームワークを使ってウェブアプリケーションを開発するためには、create-react-appというツールを使うと便利です⁴。create-react-appは、Reactに必要なツールチェーンや設定ファイルを自動的に生成してくれるコマンドラインツールです。create-react-appを使う方法は以下の通りです。

• Node.jsとnpmというプログラムをインストールします⁵。
• ターミナルやコマンドプロンプトで以下のコマンドを実行します。npx create-react-app my-app このコマンドは、my-appという名前のディレクトリにReactアプリケーションの雛形を作成します。
• 作成したディレクトリに移動して、以下のコマンドで開発サーバーを起動します。cd my-app npm start このコマンドは、ブラウザで http://localhost:3000 にアクセスすると、Reactアプリケーションが表示されるようにします。
• srcディレクトリ内のファイルを編集して、自分のアプリケーションに合わせてUIやロジックを作成します。開発サーバーはファイルの変更を検知して自動的にブラウザを更新してくれます。

以上が、Reactフレームワークを使ってウェブアプリケーションを開発するための基本的な手順です。詳しくは公式ドキュメントやチュートリアルなどを参照してください。

ソース: Bing との会話 2023/10/31
(1) Reactで<script>タグを動的にロードする方法 - Zenn. https://zenn.dev/kenta0313/articles/b81eefc1f0de62.
(2) React を始める - ウェブ開発を学ぶ | MDN - MDN Web Docs. https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started.
(3) Reactで タグを生成しスクリプトを実行/外部スクリプトを .... https://www.aruse.net/entry/2019/11/02/132904.
(4) HTMLでscriptタグを使う方法を徹底解説！ - WEBCAMP MEDIA. https://web-camp.io/magazine/archives/82766.
(5) Reactでスクリプトタグを含んだHTMLを挿入する(SSG/SSR対応 .... https://zenn.dev/akira_miyake/articles/0f5a00b035f9fe2d93e2.