コンテンツにスキップ
jsys Web 研修 2026

2. コミット

2.1 1人で練習する

まずはじめに共同編集などの高度な機能について学ぶ前に、手元のパソコンを使い1人でGitを使う練習を進めましょう。この段階では手元のコンピューターで作業が完結するので、他人に迷惑をかける心配はありません。

2.1.0 Gitにアカウント情報を登録する

コミットにはコミットした人の名前とメールアドレスが記録されます。まずはGitにGitHubアカウントの情報を登録しましょう。

まず、GitHubの設定でメールアドレスを非公開にする必要があります。https://github.com/settings/emails を開き、「Keep my email addresses private」を有効にしてください。これを有効にすると、GitHubが ID+ユーザー名@users.noreply.github.com という形式の匿名メールアドレスを発行してくれます。コミットにはこの匿名アドレスを使うことで、実際のメールアドレスを公開せずに済みます。

GitHubのメールアドレス設定画面

設定が完了したら、次のコマンドを実行します。

Terminal window
gh auth refresh -s "read:user,user:email"
git config --global user.name "$(gh api user --jq .login)"
git config --global user.email "$(gh api user/emails --jq '.[] | select(.email | endswith(\"@users.noreply.github.com\")) | .email')"

これにより、コミット時にGitHubアカウントと紐づいた名前・匿名メールアドレスが自動的に使われます。

2.1.1 リポジトリをクローンする

Gitを使ってバージョン管理するフォルダを「リポジトリ」と呼びます。 作業用のディレクトリに移動して、 次のようなコマンドを入力してください。このコマンドの意味について後ほど改めて説明します。

Terminal window
git clone https://github.com/sohosai/git-practice-2026

次のように表示されたら成功しています。git-practice-2026というディレクトリが作られていると思うのでVisual Studio Codeでgit-practice-2026ディレクトリを開いてください。

Terminal window
$ git clone https://github.com/sohosai/git-practice-2026
Cloning into 'git-practice-2026'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 3 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (3/3), done.

もし次のように表示されている場合は認証が完了していません。GitHub CLIのセットアップ手順を進めてください。

Terminal window
$ git clone https://github.com/sohosai/git-practice-2026
Cloning into 'git-practice-2026'...
Username for 'https://github.com':

2.1.2 コミットとは何かを理解する

git-practice-2026ディレクトリにはREADME.mdとhello.txtが置かれていることを確認してみてください。

その後Visual Studio Codeが起動したらサイドバーからソース管理タブを開いてください。すると次のような画面が表示されるはずです。

Visual Studio Codeの言語設定を日本語にする方法

日本語化する拡張機能をインストールすると表示を日本語に変更することができます。

VSCodeのソース管理タブ

「グラフ」という場所に「hello.txtを追加」と「README.mdを作成」と表示されていることがわかります。これひとつひとつがGitでのバージョン管理の単位である「コミット」です。この「コミット」がすべてのファイルの状態を管理しているのでいつでも、特定のバージョンに移動することができるようになります。

また、「README.mdを作成」の左側の○が白抜きになっていると思います。この白抜きの○が現在ファイルに反映されているコミットの位置を表しています。

これから実際に新しい「コミット」を作成してみましょう。hello.txtを開くと「こんにちは！jsyへようこそ！」と書かれているので「jsyへようこそ！」を「jsysへようこそ！」に修正して保存してみましょう。すると先ほどの「ソース管理」タブの「変更」というエリアにhello.txtが表示されます。

変更エリアにhello.txtが表示

コミットを作るには次の2つを指定する必要があります。

  • 前回のコミットから変更したファイル
  • 変更の概要（「コミットメッセージ」といいます）

今回の場合は変更したファイルはhello.txt、変更の概要は「hello.txtの誤字を修正」とすることにします。先程確認した「変更」画面で「メッセージ」と書かれたテキストボックスに概要として「hello.txtの誤字を修正」と入力します。次に変更したファイルにカーソルを当てて「+」をクリックします。

ファイルをステージする

そして「コミット」をクリックするとコミットが作成されます。実際に左下の「グラフ」の先頭に「hello.txtの誤字を修正」が表示され、コミットメーセージの横の白抜きの○が移動していることがわかります。

コミットがグラフに表示

この状態からリポジトリをダウンロードした直後の状態を確認してみます。まずはじめに「グラフ」の横にある「自動」というボタンをクリックして「すべて」にチェックを入れて「OK」を押してください。

全コミット履歴を表示する

左下のグラフで「hello.txtを追加」を右クリックして「チェックアウト（デタッチ済み）」をクリックします。すると、グラフ上で白抜きの○が移動し「hello.txtを追加」の左側に移動します。また、ファイルの内容を確認すると先ほどの修正がなかったことになりhello.txtを開くと「こんにちは！jsyへようこそ！」と表示されていることがわかります。このようにコミットを作ることで任意の地点に戻ることが可能になります。

チェックアウト後の状態

ここまでの内容をまとめると次のようになります。

コミットの概念まとめ

Footnotes

  1. 実際にリポジトリに保存された個人情報やパスワードが漏洩した事例は多くあります ↩