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 → Settings → SSH and GPG keys → New 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を効率的に活用し、安定したバージョン管理が可能になります。
    個人開発でも、チーム開発と同じようにブランチを活用し、リモートリポジトリをうまく管理することが成功の鍵となります。