GitとGitHubを利用してバージョン管理をしよう！【フロー】

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

まず、Gitをインストールしましょう。

Gitインストール

Gitが既にインストールされているか確認するには、ターミナルで以下のコマンドを実行します。

ターミナル

git --version

ターミナル

git --version

>>> git version 2.30.1 (Apple Git 300)

Git初期設定-ユーザー名設定

ターミナル

git config --global user.name 任意のユーザー名

ターミナル

git config --global user.name 任意のユーザー名

（例）git config --global user.name your-name

Git初期設定-メールアドレス設定

ターミナル

git config --global user.email メールアドレス

ターミナル

git config --global user.email メールアドレス

（例）git config --global user.email youremail@example.com

Git設定の確認

ターミナル

git config --list

ターミナル

git config --list

>>>
（中略）
user.name=your-name
user.email=youremail@example.com

GitHubアカウント作成・リモートリポジトリ作成

GitHubアカウント作成

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

GitHubでリモートリポジトリ作成

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

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

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

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

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

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

「git-new」ディレクトリを作成

ターミナル

mkdir git-new

「git-new」プロジェクトに移動する

ターミナル

cd git-new

「git-new」プロジェクトでVsCodeを立ち上げる！

ターミナル

code .

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

次に、作成したプロジェクトディレクトリ内でGitリポジトリを初期化します。

ターミナル（VsCode）

git init

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

＊下記はGitHubでコピペできるよ！

ターミナル（VsCode）

git remote add origin https://github.com/〇〇/git-new.git

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

初回コミット

ターミナル（VsCode）

git commit --allow-empty -m "初期コミット" 

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

初回プッシュ

ターミナル（VsCode）

git push origin main

ブランチ作成〜移動

現状のブランチ確認

ターミナル（VsCode）

git branch 

>>
*main

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

ターミナル（VsCode）

git branch base

ブランチの切り替え

ターミナル（VsCode）

git checkout base

ブランチが切り替わっているか確認をしよう！

ターミナル（VsCode）

git branch 

>>
 main
*base

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

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

開発や編集をステージングして、コミット > プッシュ

ステージングする

ターミナル（VsCode）

git add *

コミットする

ターミナル（VsCode）

git commit -m "ベース作成完了"

リモートにプッシュ

ターミナル（VsCode）

git push origin base

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

• GitHub上でプルリクエストボタンが表示されているのでそれを押す
• プルリクエストを送る
• Files Changesを確認する
• コメントを残してMerge pull requestボタン →Con…

mainブランチに切り替えてブランチを削除

• delete-branch
• ローカルのブランチも削除
• mainブランチに切り替え

ターミナル（VsCode）

git checkout main

>> 
*main
 base

baseブランチの削除

ターミナル（VsCode）

git branch -D base 

リモートにある新しいmainブランチをローカルに引っ張ってくる

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

ターミナル（VsCode）

git pull origin main

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

ブランチ作成・切り替え

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 commit -m ""

プッシュ

ターミナル

git push origin base02

プルリクエスト > マージ

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

ローカルブランチ削除

メインブランチに切り替える

ターミナル

git checkout main

「base02」ブランチを削除

ターミナル

git branch -D base02

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

ターミナル

git pull origin main

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

.gitignoreファイルの管理

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

.gitignore

node_modules/
*.log
*.tmp

ブランチ管理の徹底

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

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

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

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

レビューとマージ

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

まとめ

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