Tsumiki

コース目次 / 第2章

最初の記録 — フォルダに歴史を持たせる

init → add → commit の一本道を通して、手元のフォルダに履歴を作ります。

第2章 / 全5章目安 約30分この章のゴール: 自分のフォルダで git log に記録が1つ並ぶ
お使いのエディタ
ファイル操作が切り替わります

この章はGitHubを使いません。あなたのパソコンの中だけで完結します。

今日のゴール

ふつうのフォルダを、履歴を持ったフォルダに変えます。見た目は何も変わりませんが、この章のあと、あなたは「いつでも戻れる」状態を手に入れます。

1. 材料を用意する

このページのいちばん下にZIPがあります。解凍すると haruto-site というフォルダが出てきます。デスクトップに置いてください。

中身は3ファイルだけの小さなサイトです。この章では1文字も書き換えません(書き換えるのは第4章です)。

ファイル 何のためのもの
index.html ページの中身。旅のメモが3件入っています
style.css 見た目
.gitignore あとで説明します。第7節で効き目を確かめます
中身を読んでみたい方へ(読まなくても先に進めます)
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>はるとの旅ノート</title>
    <meta name="description" content="カメラを持って歩いた町の記録。行ってよかった場所を少しずつ書きためています。" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="site-header">
      <p class="site-name">はるとの旅ノート</p>
    </header>

    <main class="container">
      <section class="about">
        <h1>行ってよかった場所</h1>
        <p class="intro">カメラを持って歩いた町の記録です。少しずつ書きためています。</p>
      </section>

      <section class="notes">
        <article class="note">
          <h2>直島</h2>
          <p class="date">2026-04</p>
          <p>港からレンタサイクルで一周した。坂は多いけれど、海沿いの道が気持ちいい。</p>
        </article>

        <article class="note">
          <h2>尾道</h2>
          <p class="date">2026-05</p>
          <p>坂の途中に猫がたくさんいた。朝いちばんの光がいちばんよかった。</p>
        </article>

        <article class="note">
          <h2>金沢</h2>
          <p class="date">2026-06</p>
          <p>雨の日に行ったら、石畳が光ってきれいだった。雨も悪くない。</p>
        </article>
      </section>
    </main>

    <footer class="site-footer">
      <p>はるとの旅ノート</p>
    </footer>
  </body>
</html>
style.css
:root {
  --ink: #2f2a26;
  --paper: #fbf8f4;
  --line: #e3dcd2;
  --accent: #8a6a4f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
}

.site-header {
  border-bottom: 1px solid var(--line);
  padding: 20px 24px;
}

.site-name {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}

.intro {
  margin: 0 0 32px;
  color: #6b6058;
}

.note {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}

.note h2 {
  font-size: 1.15rem;
  margin: 0;
}

.date {
  margin: 2px 0 8px;
  font-size: 0.85rem;
  color: var(--accent);
}

.note p:last-child {
  margin: 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 20px 24px;
  font-size: 0.85rem;
  color: #6b6058;
}

コース1を終えている方へ。自分で作った mysite フォルダを使っても構いません。その場合、この先に出てくる haruto-site は mysite に読み替えてください。あなたのサイトが公開されるほうが、この章の値打ちは上がります。

2. ミニ解説: Gitが管理する3つの場所

これだけ先に知っておくと、この先のコマンドが全部つながります。

3つの場所
[ 作業フォルダ ]  いま編集しているファイルそのもの
      │
      │  git add     「次の記録に、これを含める」と印をつける
      ▼
[ 待合室 ]        記録に含める予定のものが並ぶ場所
      │
      │  git commit  「ここまでを1回ぶんの記録にする」
      ▼
[ 記録 ]          消えない歴史。ここに入ったものは戻せる

add と commit が2段階に分かれているのが、最初のつまずきどころです。理由は単純で、「10個直したけど、記録に残したいのは3個だけ」という日があるからです。今日は全部まとめて記録するので、深く考えなくて大丈夫です。

3. 歴史を持たせる

haruto-site フォルダを VS Code で開いた状態で、ターミナルに打ちます。 haruto-site フォルダの中(cd ~/Desktop/haruto-site)で打ちます。
VS Codeのターミナルターミナル
git init

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

こう出れば成功
Initialized empty Git repository in /Users/haruto/Desktop/haruto-site/.git/

フォルダの中に .git という隠しフォルダができました。これが歴史の入れ物です。見た目には出てきません。

触らないものが1つできました。.git フォルダの中身は、絶対に手で編集も削除もしないでください。ここを消すと履歴が全部消えます(ファイルそのものは残りますが、戻れなくなります)。
逆に言えば、触らないかぎり壊れません。この先のコマンドは全部、この箱に対する出し入れです。

4. いまの状態を見る

Gitで迷ったら、まずこれを打ちます。この章でいちばん覚えてほしいコマンドです。

VS Codeのターミナルターミナル
git status

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

こう出る
On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	.gitignore
	index.html
	style.css

nothing added to commit but untracked files present (use "git add" to track)

英語ですが、読むところは決まっています。

出ている行 意味
On branch main いまいる枝の名前。第1章で main にしました
No commits yet まだ記録が1つもない
Untracked files: Gitがまだ見ていないファイルの一覧
(use "git add …") 次にこれを打て、という案内

Gitの出力は、たいてい次の一手を書いてくれています。括弧の中の use “git add …” がそれです。英語を全部読む必要はありません。括弧の中の git で始まる部分だけ拾ってください。

5. 記録する

まず、待合室に入れます。

VS Codeのターミナルターミナル
git add .

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

. は「いまいるフォルダの中身ぜんぶ」という意味です。

次に、記録します。

VS Codeのターミナルターミナル
git commit -m "はじめての旅ノート"

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

-m のうしろの文字が、この記録に付ける一言です。3か月後の自分が読むと思って書いてください。

こう出る
[main (root-commit) 3f9a1c2] はじめての旅ノート
 3 files changed, 123 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
 create mode 100644 style.css

英数字の並び(3f9a1c2)はこの記録の背番号です。人によって違います。

6. 歴史を読む

VS Codeのターミナルターミナル
git log --oneline

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

こう出る
3f9a1c2 (HEAD -> main) はじめての旅ノート

1行だけの歴史ができました。試食章で見た microsoft/vscode の Commits と、同じものです。規模が違うだけで、仕組みはまったく同じです。

git log の画面から抜けられなくなったら、q キーを1回押してください。記録が増えると Git は「長い文章を読む画面」に切り替わり、そこから出るのが q(quit)です。これを知らないと、ターミナルが固まったように見えます。

7. 記録されなかったものがある

もう一度、状態を見ます。

VS Codeのターミナルターミナル
git status

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

こう出る
On branch main
nothing to commit, working tree clean

clean は「編集したもので、まだ記録していないものは何も無い」という意味です。この一言が出ている状態が、いちばん安心な状態です。

ところで、フォルダの中には .gitignore というファイルがありました。

.gitignore
# Mac が勝手に作るフォルダ設定ファイル
.DS_Store

# Windows が勝手に作る画像キャッシュ
Thumbs.db

ここに書いた名前のファイルは、Gitが最初から見なかったことにします。 .DS_Store は Mac がフォルダを開くたびに勝手に作るファイルで、放っておくとGitHubに上がって恥ずかしい思いをします。

確かめてみましょう。Macなら、いまこの瞬間もう .DS_Store ができているかもしれません。それでも git status は clean のままです。書いておくだけで、一生気にしなくてよくなります。

ハマったら

「Author identity unknown」と出て commit できない

第1章の git config の3行が済んでいません。もう一度第1章の「2. Gitに名前を教える」を実行してから、git commit をやり直してください。やり直しても何も壊れません。

「fatal: not a git repository」と出る

いま立っているフォルダが違います。VS Code で haruto-site フォルダを開き直してから、ターミナルを開き直してください。cd ~/Desktop/haruto-site で移動してから、もう一度打ってください。いまどこにいるかは pwd で確かめられます。

コミットのとき、見慣れない画面が開いてしまった

-m "…" を付け忘れると、Gitは「一言を書く画面」を開きます。閉じ方はエディタによりますが、Esc を押してから :q! と打って Enter でたいてい抜けられます。抜けたら -m を付けて打ち直してください。

ZIPで戻したい

このページの下のZIPは、この章を終えた状態のフォルダです。解凍して、その中で作業を続けられます。自分で書き換えた部分は消えてしまうので、先に自分のファイルを別の場所へ待避してから使ってください。

こうなっていればOK

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

あと1章で、あなたのサイトに公開URLが付きます。

この章はまだ完了していません。