Mac で React プロジェクトを作成し GitHub にデプロイする

これは、Mac で React プロジェクトを作成し、GitHub にデプロイする方法の覚え書きです。

Node.js と npm のインストール

まずは、React アプリケーションを開発するために必要な Node.js と npm を Mac にインストールします。

Node.js の公式サイトにアクセスし、LTS (Long Term Support) バージョンをダウンロードします
ダウンロードしたインストーラーを実行し、指示に従ってインストールを完了させます
インストールが完了したら、ターミナルを開いて以下のコマンドを実行し、正しくインストールされたか確認します
- バージョン番号が表示されれば成功です

node --version

npm --version

Create React App を使用して新しい React プロジェクトを作成

次に、Create React App というツールを使って、新しい React プロジェクトを作成します。

ターミナルで、プロジェクトを作成したいディレクトリに移動します
以下のコマンドを実行して、新しい React プロジェクトを作成します
- my-react-app の部分は、好きなプロジェクト名に変更してください

npx create-react-app my-react-app

プロジェクトの作成が完了したら、以下のコマンドで React プロジェクトのディレクトリに移動します

cd my-react-app

プロジェクトの構造と主要なファイルの説明

新しく作成されたプロジェクトの構造を確認しましょう。主要なファイルとディレクトリは以下の通りです：

src/: ソースコードを含むディレクトリ
- App.js: メインのアプリケーションコンポーネント
- index.js: アプリケーションのエントリーポイント
public/: 静的ファイルを含むディレクトリ
- index.html: メインの HTML ファイル
package.json: プロジェクトの依存関係と設定を管理するファイル

簡単なコンポーネントの作成と編集

React の醍醐味であるコンポーネントを作成してみましょう。

src ディレクトリに Greeting.js という新しいファイルを作成します
以下のコードを Greeting.js に追加します

import React from 'react';

function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

export default Greeting;

App.js を開き、以下のように編集します

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="React ビギナー" />
    </div>
  );
}

export default App;

ローカルでのプロジェクトの実行とテスト

作成したプロジェクトをローカル環境で実行してみましょう。

ターミナルで以下のコマンドを実行します

npm start

ブラウザが自動的に開き、http://localhost:3000 にアクセスします
“こんにちは、React ビギナーさん！“というメッセージが表示されれば成功です

Git のインストールと初期設定

プロジェクトをバージョン管理し、GitHub にアップロードするために Git を使用します。

Git の公式サイトからGitをダウンロードし、インストールします
ターミナルで以下のコマンドを実行して、Git の設定を行います

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

GitHub アカウントの作成

まだ GitHub アカウントを持っていない場合は、 GitHub の公式サイトでアカウントを作成してください。

新しい GitHub リポジトリの作成

GitHub にログインし、右上の “+” アイコンをクリックして “New repository” を選択します
リポジトリ名を入力し（例：my-react-app）、他の設定はデフォルトのままで “Create repository” をクリックします

ローカルプロジェクトを GitHub リポジトリに接続

ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを実行します

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/my-react-app.git
git push -u origin main

変更をコミットしプッシュする方法

今後、プロジェクトに変更を加えた際は、以下の手順でコミットとプッシュを行います

git add .
git commit -m "変更内容の説明"
git push

GitHub Pages を使用してプロジェクトをデプロイする手順

package.json ファイルを開き、以下の行を追加します

"homepage": "https://あなたのユーザー名.github.io/my-react-app",

以下のコマンドを実行して、必要なパッケージをインストールします

npm install gh-pages --save-dev

package.json の "scripts" セクションに以下の行を追加します

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

以下のコマンドを実行してデプロイします

npm run deploy

GitHub リポジトリの “Settings” ページで、“Pages” セクションに移動し、“Source” を “gh-pages” ブランチに設定します。

これで、React プロジェクトが GitHub Pages 上でライブになるはずです。

GitHub プッシュとデプロイの違い

GitHub へのプッシュ

目的: コードの変更を保存し、バージョン管理する
結果: コードがGitHubのリポジトリに保存される
ユーザーへの影響: なし（コードは公開されるが、ウェブサイトとしては機能しない）

GitHub Pages へのデプロイ

目的: アプリを実際にウェブ上で公開する
結果: ビルドされたアプリが公開用URLでアクセス可能になる
ユーザーへの影響: ウェブサイトとしてアクセスできるようになる

通常のワークフローでは、コードを変更するたびに GitHub にプッシュし、準備が整ったときにデプロイします。

デプロイは、アプリの新しいバージョンを公開する準備ができたときにのみ行います。

トラブルシューティング

npm start でエラーが発生する場合：
- node_modules ディレクトリを削除し、npm install を再実行してみてください。
GitHub へのプッシュでエラーが発生する場合：
- リモートリポジトリの URL が正しいか確認してください。
- GitHub の認証情報が正しく設定されているか確認してください。

Posted : 24.07.14