ReactプロジェクトをGitHubに公開する手順を解説！初心者でもできるGitHubの使い方
生徒
「Reactで作ったアプリって、どうやって他の人に見せられるんですか？」
先生
「それならGitHubを使えば、ネット上に公開できますよ。」
生徒
「GitHubって聞いたことあるけど、よくわからなくて…どうやって使うんですか？」
先生
「ひとつずつ順番に説明するので、安心してください。ReactアプリをGitHubにアップする流れを一緒に見ていきましょう！」
1. GitHub（ギットハブ）とは何かを理解しよう
GitHub（ギットハブ）は、自分が作ったプログラムやファイルをネット上に保存して、誰かと共有できるサービスです。無料で使えて、Reactプロジェクトの公開にもとても便利です。
GitHubを使うには、まずアカウントの作成が必要です。公式サイトからアカウントを作成しておきましょう。
また、GitHubは「Git（ギット）」という仕組みを使っています。Gitとは、ファイルの変更履歴を記録できるツールのことで、パソコンに「Git」をインストールする必要があります。
2. Gitのインストールと初期設定をしよう
ReactアプリをGitHubにアップするには、まずパソコンに「Git（ギット）」を入れる必要があります。以下の手順でインストールできます。
- 「https://git-scm.com/」にアクセス
- WindowsまたはMacのバージョンを選んでダウンロード
- そのまま案内に従って「Next」ボタンでインストール
インストールが完了したら、次は「ユーザー名」と「メールアドレス」の設定を行います。これは、誰が更新したのかを記録するためのものです。
git config --global user.name "YourName"
git config --global user.email "you@example.com"
3. Reactプロジェクトを作ってみよう
Reactアプリをまだ作っていない場合は、create-react-appを使って簡単に作成できます。
npx create-react-app my-app
cd my-app
このコマンドで「my-app」というフォルダにReactアプリが作られます。
4. GitHubリポジトリを作成しよう
次に、GitHub上でプロジェクトの置き場所「リポジトリ」を作成します。リポジトリとは、Reactのコードを入れるネット上のフォルダのようなものです。
- GitHubにログイン
- 画面右上の「＋」から「New repository」を選択
- リポジトリ名（例：my-app）を入力し、「Create repository」をクリック
5. ReactプロジェクトをGitで管理しよう
今度は、パソコン上のReactプロジェクトをGitHubに接続します。以下のコマンドで、プロジェクトのフォルダ内で操作します。
git init
git add .
git commit -m "最初のコミット"
ここで「git init」はGitの管理を始める合図、「git add .」は全ファイルを登録、「git commit」は変更を記録する操作です。
6. GitHubとプロジェクトをつなげよう
次に、先ほど作ったGitHubのリポジトリと、ローカル（自分のパソコン）のReactアプリを接続します。
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git branch -M main
git push -u origin main
これで、自分のパソコンのReactプロジェクトがGitHubにアップされます。
「push（プッシュ）」は、コードをGitHubに送る操作です。
7. GitHub PagesでReactアプリを公開するには
Reactアプリをブラウザで見られるように公開するには、GitHub Pages（ギットハブ・ページズ）という機能を使います。これは、GitHubが無料で提供しているWebページ公開機能です。
まず、Reactアプリに「gh-pages」というパッケージをインストールします。
npm install gh-pages --save-dev
次に、package.jsonに以下の設定を追加します。
"homepage": "https://あなたのユーザー名.github.io/リポジトリ名",
さらに、scriptsに以下を追加してください。
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
設定が終わったら、下記コマンドでアプリを公開できます。
npm run deploy
8. 公開されたReactアプリを確認しよう
GitHub Pagesが正しく設定されていれば、以下のURLでアプリを確認できます。
https://あなたのユーザー名.github.io/リポジトリ名
ページが表示されない場合は、しばらく待つか、GitHubの「Pages」設定を確認してみてください。
9. 変更した内容を再アップロードするには？
Reactアプリの内容を修正した後は、再度以下のコマンドで更新できます。
git add .
git commit -m "修正内容を記述"
git push
npm run deploy
これで、新しい内容が反映されます。
