はじめてのコミット

プロジェクトを作成し、Git で最初の変更を記録してみましょう。

このコースについて

自己紹介ページ（HTML）を題材に、Git の基本操作から GitHub でのチーム開発フローまでを一気通貫で体験します。

HTML の説明は最小限にして、Git / GitHub の操作にフォーカスします。コードはすべてコピペで進められるので安心してください。

前提条件

Gitの基本操作やCLIの操作が分かる前提で進めます。コースを進めていく中で、難しいと感じた場合は以下のガイドを参照することをお勧めします。

ガイド	内容
Git & GitHub	Git の仕組み・基本コマンド・GitHub の概念を理解する
CLI入門	の基本的な使い方
エディタ入門	VS Code のインストールと基本操作

プロジェクトフォルダを作る

を開いて、お好きな場所にフォルダを作成します。

mkdir my-profile
cd my-profile

Git リポジトリを初期化する

ガイドで学んだ git init を実際に使ってみましょう。

git init

これでこのフォルダが Git リポジトリになりました。

初期化が終わり、my-profileディレクトリに.gitフォルダを作成した状態です。上には.gitフォルダは表示されませんが、エクスプローラー等で確認すると.gitフォルダを確認できるはずです。

ここに変更履歴などを保存していきます。基本的にこのフォルダは操作不要です。

次にgit status で状態を確認してみましょう。

git status

まだファイルがないので「コミットするものがない」と表示されます。

自己紹介ページを作る

VS Code で index.html を作成しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介</title>
</head>
<body>
    <h1>自己紹介</h1>
    <p>名前: あなたの名前</p>
</body>
</html>

保存したら git status で確認します。

index.html が Untracked files（追跡されていないファイル）として表示されています。Git はこのファイルの存在を認識しましたが、まだ管理対象にはしていません。

最初のコミットを作る

ガイドで学んだ add → commit の2ステップを実践します。

ステップ 1: ステージに追加する

git add index.html

warning: in the working copy of 'index.html', CRLF will be replaced by LF the next time Git touches it という警告が出ることがあります。

これは 改行コード の違いが原因です。Windows は改行に CRLF（2文字）を使いますが、Git は LF（1文字）を標準としています。そのため「次回 Git が触るとき CRLF を LF に変換するよ」と教えてくれています。

以下のコマンドを実行すると、Git が自動で変換してくれるようになり、この警告は表示されなくなります。

git config --global core.autocrlf true

動作に影響はないので、警告が出ても気にせず先に進めて大丈夫です。

git status で確認します。

Changes to be committed（コミットされる変更）に index.html が移動しました。ステージに追加された状態です。

ガイドで学んだ「ワーキングツリー → ステージ → リポジトリ」の流れを思い出してください。今、ファイルはステージにいます。

復習: Git の仕組み

ステップ 2: コミットする

git commit -m "自己紹介ページを作成"

最初のコミットが作成されました。

コミットメッセージのコツ

-m の後に書くメッセージは、「何をしたか」が伝わるように書きましょう。

チーム開発なら他の人が混乱しないように簡潔に・具体的に書きましょう
個人開発でも将来の自分を助けるつもりで書きましょう

プロフィール情報を追記する

index.html を編集して<body> にプロフィールを追加しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介</title>
</head>
<body>
    <h1>自己紹介</h1>
    <p>名前: あなたの名前</p>
    <h2>プロフィール</h2>
    <ul>
        <li>好きな食べ物: ラーメン</li>
        <li>住んでいるところ: 東京</li>
        <li>ひとこと: よろしくお願いします！</li>
    </ul>
</body>
</html>

差分を確認する

コミットする前に、git diff で何が変わったかを確認しましょう。

git diff

+ が付いている行が追加された部分です。意図通りの変更であることを確認したら、コミットしましょう。

git diff はワーキングツリーとステージの差分を表示するコマンドです。比較対象を変えたいときは、オプションを付けます。

コマンド	比較対象
`git diff`	ワーキングツリー ↔ ステージ
`git diff --staged`	ステージ ↔ 最新コミット（HEAD）
`git diff HEAD`	ワーキングツリー ↔ 最新コミット（HEAD）

まだステージしていない変更を見たいときは git diff、git add した後の変更を確認したいときは git diff --staged と覚えておくと便利です。

2回目のコミット

git add index.html
git commit -m "プロフィール情報を追加"

履歴を確認する

git log でコミット履歴を見てみましょう。

git log

commit def5678... (HEAD -> main)
Author: あなたの名前 <your@email.com>
Date:   Mon Jan 12 10:30:00 2026 +0900
 
    プロフィール情報を追加
 
commit abc1234...
Author: あなたの名前 <your@email.com>
Date:   Mon Jan 12 10:15:00 2026 +0900
 
    自己紹介ページを作成

2つのコミットが記録されています。git config で設定した名前とメールアドレスが表示されていることも確認してください。

履歴を1行ずつ表示したい場合は --oneline オプションが便利です。

git log --oneline

def5678 (HEAD -> main) プロフィール情報を追加
abc1234 自己紹介ページを作成

このレッスンのまとめ

ポイント

git init でリポジトリを作成する
git add → git commit で変更を記録する
git status で各ステップの状態を確認する
git diff で変更内容を確認する
git log でコミット履歴を確認する

次のステップ

次のレッスンでは、Git で管理したくないファイルを除外する .gitignore について学びます。

身につくスキル

レッスン一覧

コース内容