Roa run dev

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

●目次

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

    GitHub：アカウント作成 & リポジトリ作成

    公式：https://github.co.jp

    GitHub管理画面で、「Create Repository」ボタンをクリック！

    （例）リポジトリ名：git-new

    開発プロジェクト作成

    プロジェクトディレクトリの作成

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

    （例）プロジェクト名：git-new

    • 「git-new」ディレクトリを作成！
    • 「git-new」プロジェクトに移動する！
    • 「git-new」プロジェクトでVsCodeを立ち上げる！
    ターミナル
    mkdir git-new

cd git-new

code .

    ローカルリポジトリの初期化とリモートリポジトリの紐付け

    Gitリポジトリを初期化

    ターミナル（VsCode）
    git init

    GitHubで作成したリポジトリをローカルに紐付けるために、
    git remote add origin コマンドを使用します。
    ＊下記はGitHubでコピペできるよ！

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

    初回：Git & GitHub開発・運用フロー

    初期コミット＆初期プッシュ

    初回コミット（git commit -m）

    ターミナル（VsCode）
    git commit --allow-empty -m "初期コミット" 

>> 
[main (root-commit) 426bc59] 初期コミット

    初回プッシュ（git push origin main）

    ターミナル（VsCode）
    git push origin main

    ブランチ作成・切り替え

    現状のブランチ確認（git branch）

    ターミナル（VsCode）
    git branch 

>>
*main

    ブランチを作成（git branch ブランチ名）
    （例）ブランチ名：base

    ターミナル（VsCode）
    git branch base

    ブランチの切り替え（git checkout）

    ターミナル（VsCode）
    git checkout base

    現状のブランチ確認（git branch）

    ターミナル（VsCode）
    git branch 

>>
 main
*base

    作成したブランチで開発・編集をスタート

    • index.htmlを作成
    • style.cssを作成
    • assetディレクトリを作成
      • cssディレクトリを作成
        • reset.cssを作成
      • jsディレクトリを作成

    ステージング > コミット > プッシュ

    ステージングする（git add）

    ターミナル（VsCode）
    git add .

    コミットする（git commit -m “コメント”）

    ターミナル（VsCode）
    git commit -m "ベース作成完了"

    リモートにプッシュ（git push origin ブランチ名）

    ターミナル（VsCode）
    git push origin base

    GitHub上でプッシュを確認してプルリクエストしてマージする

    1. GitHub上でプルリクエストボタンClick！
    2. プルリクエストを送る
    3. Files Changesを確認する
    4. コメントを残してMerge pull requestボタン → Con…
    5. ブランチを削除する（リモート）

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

    mainブランチに切り替え（git checkout ブランチ名）

    ターミナル（VsCode）
    git checkout main

>> 
*main
 base

    baseブランチの削除（git branch -D ブランチ名）

    ターミナル（VsCode）
    git branch -D base

    プルする（git pull origin ブランチ名）
    リモートにある新しいmainブランチを引っ張ってくる

    ターミナル（VsCode）
    git pull origin main

    2回目：Git & GitHub開発・運用フロー

    ブランチ作成・切り替え（git checkout -b ）

    git checkout -b
    ブランチ作成と作成したブランチに切り替わるコマンド

    （例）ブランチ名：base02

    ターミナル
    git checkout -b base02

    開発・編集スタート

    • index.html
    • archive.htmlを作成
    • single.htmlを作成
    • assetディレクトリ
      • cssディレクトリ
        • layout.cssを作成
        • component.cssを作成
      • jsディレクトリ
        • layout.cssを作成

    ステージング > コミット > プッシュ

    ステージング（git add ）

    ターミナル
    git add .

    コミット（git commit -m）

    ターミナル
    git commit -m ""

    プッシュ（git push origin ブランチ名）

    ターミナル
    git push origin base02

    GitHub上でプッシュを確認してプルリクエストしてマージする

    1. GitHub上でプルリクエストボタンClick！
    2. プルリクエストを送る
    3. Files Changesを確認する
    4. コメントを残してMerge pull requestボタン →Con…
    5. ブランチを削除する（リモート）

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

    メインブランチに切り替える（git checkout 切り替えたいブランチ名）

    ターミナル
    git checkout main

    「base02」ブランチを削除（git branch -D 削除するブランチ名）

    ターミナル
    git branch -D base02

    プルする（git pull origin ブランチ名）
    リモートリポジトリの main ブランチの最新の変更をローカルに取得し、
    現在のローカルブランチにマージする

    ターミナル
    git pull origin main

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

    .gitignoreファイルの管理
    不要なファイルやフォルダ（例: ログファイル、キャッシュファイル、ビルド生成物など）をコミットしないように、.gitignoreファイルを設定しておきましょう。

    .gitignore
    node_modules/
*.log
*.tmp

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

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

    • （例）
      • “Fix header layout issue”
      • “Add user authentication”

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

    まとめ

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