生成AI研修
Part 2: 開発ツール基礎Git

Chapter 8: Git 入門(実践編)

Git の基本操作を実際に手を動かして学ぶ

Chapter 8: Git 入門(実践編)

概念編で学んだ知識を元に、実際にGitを操作してみましょう。このページのコマンドは全て実際にターミナルで打ちながら進めてください。

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

インストール確認

まず Git がインストールされているか確認します。

git --version
# git version 2.43.0 のように表示されればOK

macOS へのインストール

# Homebrew を使ったインストール
brew install git

Windows へのインストール

Git for Windows からインストーラをダウンロードして実行します。

初期設定(必須)

Git を使う前に、名前とメールアドレスを設定する必要があります。これはコミット時に「誰が変更したか」を記録するためです。

# 名前を設定
git config --global user.name "山田太郎"

# メールアドレスを設定(GitHubに登録したものと同じが望ましい)
git config --global user.email "yamada@example.com"

# 設定を確認
git config --list

--global オプションをつけると、このPC全体での設定になります。プロジェクトごとに異なる設定をしたい場合は --global を外して実行します。

8.2 リポジトリの作成

新しいリポジトリを作る(git init)

# 練習用フォルダを作成
mkdir my-first-git
cd my-first-git

# Git リポジトリを初期化
git init
# Initialized empty Git repository in .../my-first-git/.git/ と表示される
# .git フォルダが作られたことを確認
ls -la
# drwxr-xr-x  .git  ← これが Git の管理フォルダ

リポジトリの状態を確認する(git status)

git status
# On branch main
# No commits yet
# nothing to commit (create/copy files and use "git add" to track)

git status は最もよく使うコマンドの1つです。現在の状態を把握するために、迷ったら git status を打ちましょう。

8.3 変更の記録

ファイルを作成する

# index.html を作成
echo "<h1>Hello Git!</h1>" > index.html

# 状態を確認
git status
# Untracked files:
#   index.html  ← まだ Git が追跡していない(赤色で表示)

ステージングに追加する(git add)

# index.html をステージングに追加
git add index.html

# 状態を確認
git status
# Changes to be committed:
#   new file:   index.html  ← ステージング済み(緑色で表示)
# 全ファイルを一括でステージングに追加する場合
git add .
# ※ ピリオドは「このフォルダ以下の全て」という意味

コミットする(git commit)

# メッセージをつけてコミット
git commit -m "最初のHTMLファイルを追加"
# [main (root-commit) abc1234] 最初のHTMLファイルを追加
#  1 file changed, 1 insertion(+)
#  create mode 100644 index.html

良いコミットメッセージの書き方:

  • 何をしたかを簡潔に書く(「〜を追加」「〜を修正」「〜を削除」)
  • 日本語でも英語でもOK(チームの規約に合わせる)
  • 「変更した」だけでなく「なぜ変更したか」も書くと後で助かる
# 良い例
git commit -m "ログインページのバリデーションエラー表示を修正"
git commit -m "fix: login validation error message display"

# 悪い例
git commit -m "修正"
git commit -m "update"

変更から記録までの流れ

8.4 履歴の確認

コミット履歴を見る(git log)

git log
# commit abc1234def5678...(コミットID)
# Author: 山田太郎 <yamada@example.com>
# Date:   Fri Mar 1 10:00:00 2024 +0900
#
#     最初のHTMLファイルを追加
# 1行で見やすく表示
git log --oneline
# abc1234 最初のHTMLファイルを追加

# グラフ表示(ブランチが複数ある場合に便利)
git log --oneline --graph --all

変更差分を確認する(git diff)

# index.html を変更してみる
echo "<p>Git の練習中</p>" >> index.html

# まだステージングに追加していない変更を確認
git diff
# diff --git a/index.html b/index.html
# --- a/index.html
# +++ b/index.html
# @@ -1 +1,2 @@
#  <h1>Hello Git!</h1>
# +<p>Git の練習中</p>    ← 追加された行(+が緑色で表示)
# ステージング済みの変更を確認
git add index.html
git diff --staged

8.5 変更の取り消し

ステージングを取り消す

# git add してしまったファイルをステージングから外す
git restore --staged index.html

ファイルの変更を取り消す

# 作業ディレクトリの変更を取り消し(元に戻す)
# ※ 注意:この操作は取り消せません
git restore index.html

コミットを取り消す

# 直前のコミットを取り消す(変更はステージングに残る)
git reset --soft HEAD^

# 直前のコミットを取り消す(変更も全て消える)
# ※ 注意:この操作は取り消せません
git reset --hard HEAD^

注意: git reset --hard は変更が全て消えます。チームで共有しているブランチでは使わないように注意してください。

8.6 .gitignore の書き方

.gitignore ファイルを使うと、Gitに管理させたくないファイルを指定できます。

# .gitignore ファイルを作成
touch .gitignore
# .gitignore の内容例

# MacOSが自動生成するファイル
.DS_Store

# エディタの設定ファイル
.vscode/
.idea/

# パスワードや秘密鍵などの機密情報
.env
secrets.json

# 依存関係のフォルダ(サイズが大きいため)
node_modules/

# ビルド生成物
dist/
build/

.env ファイルには API キーやパスワードが入ることが多いため、必ず .gitignore に追加しましょう。うっかり GitHub に公開してしまうと、悪意のある第三者に使われてしまいます。

8.7 練習問題

以下の手順で実際に操作してみましょう。

問題 1: 新しいリポジトリを作成し、README.md を追加してコミットしてください。

mkdir practice-repo
cd practice-repo
git init
echo "# 練習リポジトリ" > README.md
git add README.md
git commit -m "READMEを追加"

問題 2: style.css を追加し、コミット履歴が2つになることを確認してください。

touch style.css
git add style.css
git commit -m "CSSファイルを追加"
git log --oneline
# 2つのコミットが表示されることを確認

問題 3: style.css に何か文字を追記し、git diff で変更を確認してからコミットしてください。

echo "body { margin: 0; }" >> style.css
git diff              # 変更確認
git add style.css
git commit -m "bodyのマージンをリセット"
git log --oneline     # 3つのコミットになったことを確認

まとめ

この章で学んだコマンド:

コマンド用途
git initリポジトリを初期化
git status現在の状態を確認
git add <file>ステージングに追加
git commit -m "メッセージ"コミット(記録)
git log --oneline履歴を確認
git diff変更差分を確認
git restore <file>変更を取り消し

次のステップ: ブランチ運用 でチーム開発の本質を学びます。

On this page