Roa run dev

GitとGitHubを利用してバージョン管理をしよう!【開発・編集】

GitとGitHubを使って効率的にバージョン管理を行いましょう。
👉 GitとGitHubのインストール・アカウント作成方法はこちら

【1】GitHub:アカウント作成 & リポジトリ作成

【1-1】Gitインストール & GitHubアカウント作成

詳しくはこちら→Gitのインストール・初期設定とGitHubアカウント作成を徹底的に解説!【環境構築】

【1-2】GitHubでのリポジトリ作成

  • GitHubにログイン
  • 右上「+」→「New repository」を選択
  • リポジトリ名(例:git-new)を入力し「Create repository」をクリック

【2】開発プロジェクト作成 & Gitの管理開始

【2-1】プロジェクトディレクトリの作成

まず、ローカル環境に新しいプロジェクト用のディレクトリを作成します。
以下のコマンドを使用して、任意のディレクトリを作成しましょう。

(例)プロジェクト名:git-new

ターミナル
mkdir git-new

cd git-new

code .
  • 「git-new」ディレクトリを作成!
  • 「git-new」プロジェクトに移動する!
  • 「git-new」プロジェクトでVsCodeを立ち上げる!

【2-2】ローカルリポジトリの初期化

  • Gitリポジトリを初期化
    • .git という隠しフォルダが作成され、Gitの管理対象になります。
ターミナル
git init

【3】GitHubと接続

【3A】HTTPS接続(初心者向け)

GitHubで作成したリポジトリをローカルに紐付けるために、git remote add origin コマンドを使用します。

ターミナル
git remote add origin https://github.com/〇〇/git-new.git

【3B】SSH(開発者向け・安全)

【3B-1】SSHキー作成(初回のみ)

  • パスフレーズは空でOK
  • ~/.ssh/id_ed25519.pub(公開鍵)と ~/.ssh/id_ed25519(秘密鍵)が作成されます。
SSHキー
ssh-keygen -t ed25519 -C "your_email@example.com"

【3B-2】GitHubに公開鍵を登録

  • GitHub → SettingsSSH and GPG keysNew SSH key
  • 公開鍵を貼り付けて保存
ターミナル
cat ~/.ssh/id_ed25519.pub

【3B-3】リモート接続設定

ターミナル
git remote add origin git@github.com:ユーザー名/my-project.git


>>>

Hi ユーザー名! You've successfully authenticated...

【4】初回コミット&プッシュ

【4-1】ファイル作成

まずはプロジェクト概要を書く README.md を作成します。

このコマンドにより、1行だけ「# My Project」と書かれた README.md ファイルが生成されます。

ターミナル
echo "# My Project" > README.md

【4-2】ステージング(git add)

作成したファイルをGitの管理対象(ステージ)に追加します。

  • . はカレントディレクトリ配下の全ての変更を対象にします。
ターミナル
git add .

【4-3】初回コミット(git commit)

ステージされた変更に対して、説明コメント(コミットメッセージ)を添えて記録します。

  • -m オプションでメッセージを直接記述。後から履歴として残ります。
ターミナル
git commit -m "初期コミット"

【4-4】mainブランチへの名称変更(git branch -M)

mainブランチへの名称変更(git branch -M)

  • -M は「強制的に名前変更する」オプションです(既存の main があっても上書き)。
ターミナル
git branch -M main

【4-5】初回プッシュ(git push)

ローカルの main ブランチを GitHub にアップロード(同期)します。

  • origin:先ほど追加したGitHubのリモートリポジトリ名
  • -u:以降このブランチとリモートが自動で連携されるようになります(初回のみ)

これでGitHubにプロジェクトが反映され、以後の変更は git push だけでアップロード可能になります。

ターミナル(VsCode)
git push -u origin main

【5】ブランチ運用での開発フロー

【5-1】ブランチ作成・切り替え(git checkout -b

ターミナル
git checkout -b base

【5-2】開発スタート(ファイル作成・編集)

  • index.html作成
  • style.css作成

【5-3】変更をステージング・コミット・プッシュ

  • ステージングgit add
ターミナル
git add .
  • コミットgit commit -m
ターミナル
git commit -m "index.htmlとstyle.cssを作成しました!"
  • プッシュgit push origin ブランチ名
ターミナル
git push origin base

GitHub上でのPR(プルリクエスト)

  • GitHubのリポジトリ画面にアクセス
  • 「Compare & pull request」ボタンをクリック
  • 差分を確認し、問題なければ「Merge pull request」→「Confirm」
  • ブランチを削除する(リモート)

ブランチ切り替え・削除〜プル

  • メインブランチに切り替えるgit checkout 切り替えたいブランチ名
ターミナル
git checkout main
  • プルするgit pull origin ブランチ名
    • リモートリポジトリの main ブランチの最新の変更をローカルに取得し、
      現在のローカルブランチにマージする
ターミナル
git pull origin main
  • 「base」ブランチを削除git branch -D 削除するブランチ名
ターミナル
git branch -D base

Git&GitHubの開発・運用時の注意点

.gitignoreファイルの管理

  • 不要なファイルやフォルダ(例: ログファイル、キャッシュファイル、ビルド生成物など)をコミットしないように、.gitignoreファイルを設定しておきましょう。
.gitignore
node_modules/
*.log
*.tmp

ブランチ管理の徹底

常に作業用のブランチを作成し、mainブランチは保護するように心がけましょう。
これにより、安定した状態を維持できます。

コミットメッセージの工夫

意味のあるコミットメッセージを記述し、他の開発者や未来の自分が理解しやすいようにしましょう。

  • (例)
    • “Fix header layout issue”
    • “Add user authentication”

レビューとマージ

他の開発者と共同で開発する場合は、レビューのプロセスをしっかりと行い、
問題がないことを確認してからマージしましょう。

まとめ

この開発フローを通じて、GitとGitHubを効率的に活用し、安定したバージョン管理が可能になります。
個人開発でも、チーム開発と同じようにブランチを活用し、リモートリポジトリをうまく管理することが成功の鍵となります。