この章では、HTML のファイルを置いたフォルダーをリポジトリにして、最初のコミットをします。あわせて、リポジトリに入れないファイルの考え方（.gitignore）を学びます。
この章で学ぶこと
- フォルダーをリポジトリにする方法
- ファイルをリポジトリに入れて、最初のコミットをする方法
- TortoiseGit がファイルのアイコンに付ける印の意味
- リポジトリに入れないファイルと、
.gitignoreの役割
3.1 この章で行うこと
この章では、次の順に進めます。
- リポジトリにするフォルダーを決める
- そのフォルダーの中に、この教材の練習で使う HTML のファイルを2つ作る
- フォルダーをリポジトリにする
- フォルダーの中のファイルを、最初のコミットで記録する
第4章からは、この章で作った HTML のファイルを直して、変更を記録していきます。
3.2 リポジトリにするフォルダーを決める
HTML入門を学んだかどうかで、リポジトリにするフォルダーが違います。自分に当てはまる方を読んでください。
HTML入門を学んだ人
HTML入門で作った html プロジェクトの、webapp フォルダーをリポジトリにします。webapp フォルダーには、HTML入門で作った章ごとのフォルダー（ch03 など）が入っています。
C:\pleiades\2026-09\workspace\html\src\main\webapp
2026-09 の所は、自分がインストールした Pleiades の版のフォルダー名に読み替えてください。エクスプローラーでこのフォルダーを開き、ch03 などのフォルダーがあることを確かめます。
プロジェクト全体（html フォルダー）ではなく webapp フォルダーをリポジトリにするのは、html フォルダーには、Eclipse の設定のファイルや、Eclipse が自動で作るファイルが入っていて、それらの扱いの説明が必要になるためです。この教材では、自分で書いた HTML のファイルだけを扱います。
HTML入門を学んでいない人
練習用のフォルダーを新しく作り、そのフォルダーをリポジトリにします。
- エクスプローラーで「ドキュメント」フォルダーを開きます。
- 何もない所を右クリックし、新規作成 → フォルダー を選んで、フォルダー名を
html-practiceにします。
C:\Users\ユーザー名\Documents\html-practice
この教材では、ここで決めたフォルダーを「リポジトリのフォルダー」と呼びます。HTML入門を学んだ人は webapp フォルダー、学んでいない人は html-practice フォルダーのことです。
3.3 練習用のファイルを作る
リポジトリのフォルダーの中に git フォルダーを作り、その中に、この教材の練習で使う HTML のファイルを2つ作ります。HTML入門を学んだ人も、この2つのファイルを作ってください。
- エクスプローラーでリポジトリのフォルダーを開き、何もない所を右クリックして 新規作成 → フォルダー を選び、フォルダー名を
gitにします。 - メモ帳を開き、次の内容を入力します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Git の練習</title>
</head>
<body>
<h1>Git の練習</h1>
<p>Git の練習のために作ったページです。</p>
<p><a href="list.html">社員一覧</a></p>
</body>
</html>
- メモ帳のメニューの ファイル → 名前を付けて保存 を選びます。保存する場所に、作った
gitフォルダーを選びます。「ファイル名」にindex.htmlと入力し、「ファイルの種類」を「すべてのファイル」、「エンコード」を「UTF-8」にして、「保存」をクリックします。 - メモ帳で新しいタブ（ファイル → 新しいタブ）を開き、次の内容を入力して、同じように
gitフォルダーにlist.htmlという名前で保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員一覧</title>
</head>
<body>
<h1>社員一覧</h1>
<table>
<tr>
<th>ID</th>
<th>氏名</th>
<th>部署</th>
</tr>
<tr>
<td>1</td>
<td>雷禅 海皇</td>
<td>営業部</td>
</tr>
<tr>
<td>2</td>
<td>院照 心愛</td>
<td>総務部</td>
</tr>
<tr>
<td>3</td>
<td>林檎 星飛</td>
<td>開発部</td>
</tr>
</table>
</body>
</html>
-
gitフォルダーのindex.htmlをダブルクリックして、ブラウザで開きます。「Git の練習」のページが表示され、「社員一覧」のリンクをクリックすると、3人の社員の表が表示されることを確かめます。
【知識メモ】HTML入門を学んだ人は Eclipse で作ってもよい
HTML入門を学んだ人は、Eclipse の webapp フォルダーを右クリックして、git フォルダーと2つの HTML ファイルを作ってもかまいません。Tomcat を起動していれば、http://localhost/html/git/index.html で表示を確かめられます。Eclipse で作った場合も、エクスプローラーで作った場合も、できるファイルは同じです。
【ご注意】ファイル名の最後が .txt になっていないか確かめる
メモ帳で「ファイルの種類」を「テキスト文書 (*.txt)」のまま保存すると、ファイル名が index.html.txt になることがあります。エクスプローラーのメニューの 表示 → 表示 → ファイル名拡張子 にチェックを入れると、ファイル名の最後（拡張子）まで表示されるので、index.html と list.html になっていることを確かめてください。
3.4 リポジトリを作る
リポジトリのフォルダーを、Git で管理するリポジトリにします。
-
エクスプローラーで、リポジトリのフォルダーの1つ上の階層を開きます。HTML入門を学んだ人は
mainフォルダー、学んでいない人は「ドキュメント」フォルダーです。 -
リポジトリのフォルダー（
webappまたはhtml-practice）を右クリックし、「Git ここにリポジトリを作成」を選びます。Windows 11 では、メニューの「その他のオプションを確認」をクリックしてから選びます（第2章）。
図3-1 右クリックのメニュー（赤枠：Git ここにリポジトリを作成） -
リポジトリの作成の画面が表示されます。「Bare を生成(作業ディレクトリーを作りません)」にはチェックを入れず、「OK」をクリックします。
図3-2 リポジトリの作成の画面（赤枠：Bare を生成と OK） -
リポジトリができたことを知らせるメッセージが表示されたら、「OK」をクリックします。
.git フォルダーを確かめる
リポジトリにしたフォルダーの中には、.git フォルダーができています（第1章）。.git フォルダーは隠しフォルダーなので、最初は表示されません。
-
エクスプローラーのメニューの 表示 → 表示 → 隠しファイル にチェックを入れます。
-
リポジトリのフォルダーを開き、
.gitフォルダーがあることを確かめます。
図3-3 リポジトリのフォルダーの中（赤枠：.git フォルダーと git フォルダー）
【ご注意】.git フォルダーは開かない・消さない
.git フォルダーには、これから記録する変更がすべて入ります。消すと、記録がすべて無くなります。中のファイルを開いたり、書き換えたりしないでください。確かめ終わったら、「隠しファイル」のチェックを外してもかまいません。
3.5 最初のコミットをする
リポジトリを作っただけでは、フォルダーの中のファイルはまだ記録されていません。Git にとって、リポジトリを作る前からあったファイルは、まだ管理していないファイル（管理外のファイル）です。管理外のファイルをすべて選んで、最初のコミットをします。
-
リポジトリのフォルダーを右クリックし、「その他のオプションを確認」をクリックしてから、「Git コミット -> "main"」を選びます。
図3-4 右クリックのメニュー（赤枠：Git コミット -> "main"） -
コミットの画面が表示されます。画面の下の「バージョン管理外のファイルを表示」にチェックを入れると、ファイルの一覧に、リポジトリのフォルダーの中のファイルが表示されます。
-
一覧の上の「すべて」をクリックして、すべてのファイルにチェックを入れます。
git/index.htmlとgit/list.htmlにチェックが入っていることを確かめます。 -
上の「メッセージ」の欄に、
最初のコミットと入力します。
図3-5 コミットの画面（赤枠：メッセージ、すべて、ファイルの一覧、バージョン管理外のファイルを表示、コミット） -
「コミット」をクリックします。コミットの結果の画面に「成功」と表示されたら、「閉じる」をクリックします。
【知識メモ】HTML入門を学んだ人のファイルの一覧
webapp フォルダーをリポジトリにした人は、git フォルダーのファイルのほかに、HTML入門で作った ch03〜ch10 のファイルと、META-INF/MANIFEST.MF も一覧に出ます。これらもすべてチェックを入れて、一緒にコミットします。中身が空のフォルダー（WEB-INF/lib など）は、Git が記録しないので一覧に出ません。
アイコンの印
TortoiseGit は、リポジトリの中のフォルダーやファイルのアイコンに、状態を表す印を付けます。コミットした後は、リポジトリのフォルダーと中のファイルに、緑のチェックの印が付きます。
| 印 | 意味 |
|---|---|
| 緑のチェック | コミットした後、変更していない |
| 赤のビックリマーク | コミットした後に変更した（まだコミットしていない変更がある） |
| 青のプラス | 次のコミットに入れるファイルとして追加した |
| 青の「?」 | 管理外のファイル（まだ一度もコミットしていない） |
図3-6 最初のコミットの後の git フォルダー（緑のチェックの印）
第4章でファイルを直すと、赤の印に変わることを確かめます。
3.6 リポジトリに入れないファイル（.gitignore）
フォルダーの中には、リポジトリに入れてはいけないファイルや、入れる必要のないファイルが置かれることがあります。
| 種類 | 例 | 入れない理由 |
|---|---|---|
| パスワードなどを書いたファイル | データベースのパスワードを書いた設定ファイル | リポジトリを見られる人に、パスワードを知られてしまう |
| 自動で作られるファイル | Eclipse がプログラムから作るファイル（build・target フォルダーの中など） |
元のファイルからいつでも作り直せる。作り直すたびに変更として出てしまう |
| パソコンや人ごとに違うファイル | エディターの個人の設定のファイル | ほかの人のパソコンでは使えない、または使わない |
リポジトリに入れないファイルは、.gitignore という名前のファイルに書いておきます。.gitignore に書いたファイルは、管理外のファイルの一覧に出なくなり、間違えてコミットすることがなくなります。.gitignore は、リポジトリのフォルダーのすぐ下に置き、ほかのファイルと同じようにコミットします。
# build フォルダーの中は、リポジトリに入れない
build/
# 名前が .log で終わるファイルは、リポジトリに入れない
*.log
この章のリポジトリには、自分で書いた HTML のファイルしかないので、.gitignore は作りません。Spring Boot のプロジェクトのような、実際のプロジェクトの .gitignore は、第11章で扱います。
【再確認】パスワードを書いたファイルはコミットしない
一度コミットしたファイルは、あとでファイルを消しても、履歴の中に残ります。パスワードなど、ほかの人に知られてはいけない内容を書いたファイルは、コミットする前に .gitignore に書いてください。コミットの画面でも、ファイルの一覧にそのようなファイルが無いことを確かめてからコミットします。
3.7 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| 右クリックのメニューに「Git ここにリポジトリを作成」が無い | すでにリポジトリになっているフォルダーか、その中のフォルダーを右クリックしています。リポジトリのフォルダーの中に .git フォルダーがあれば、リポジトリはできています（3.4）。 |
| コミットの画面のファイルの一覧が空 | 「バージョン管理外のファイルを表示」にチェックを入れてください（3.5）。 |
| 「メッセージが空です」のように表示されてコミットできない | コミットメッセージを入力してください。Git では、メッセージの無いコミットは作れません。 |
| コミットしたのに、アイコンに印が付かない | エクスプローラーの表示が更新されていない可能性があります。F5 キーを押して表示を更新してください。それでも付かない場合は、パソコンを再起動します。印が付かなくても、コミットはできています。 |
| ブラウザで開くと、文字化けする | メモ帳で保存するときの「エンコード」が UTF-8 になっていません。UTF-8 で保存し直してください（3.3）。 |
そのほかのエラーは、付録B「よくあるエラーと対処法」を見てください。
3.8 まとめと確認問題
まとめ
- HTML入門を学んだ人は
webappフォルダー、学んでいない人はhtml-practiceフォルダーをリポジトリにする - 練習用のファイル
git/index.html・git/list.htmlを作った。第4章から、このファイルを直していく - フォルダーを右クリックし、「Git ここにリポジトリを作成」でリポジトリにする。中に
.gitフォルダーができる - リポジトリを作る前からあったファイルは管理外のファイル。コミットの画面で「バージョン管理外のファイルを表示」にチェックを入れ、選んでコミットする
- リポジトリに入れないファイルは
.gitignoreに書く。パスワードを書いたファイルはコミットしない
確認問題
問1 リポジトリを作った直後、フォルダーの中にあったファイルは、Git にとってどのような状態ですか。
解答を見る
まだ管理していないファイル（管理外のファイル）です。コミットの画面で選んでコミットすると、記録されるようになります。
問2 コミットした後、ファイルのアイコンに付く印は何色ですか。また、そのファイルを直すと、印はどうなりますか。
解答を見る
緑のチェックの印が付きます。ファイルを直すと、まだコミットしていない変更があることを表す、赤の印に変わります。
問3 パスワードを書いたファイルをコミットしてしまった後、そのファイルを消してもう一度コミットしました。パスワードはほかの人に知られなくなりますか。
解答を見る
知られなくはなりません。一度コミットしたファイルは、あとで消しても履歴の中に残るため、前のコミットの状態を見ればパスワードが分かります。パスワードを書いたファイルは、コミットする前に .gitignore に書いておきます。
前へ
次へ
第4章 変更を記録する（コミット）（TortoiseGit）