自分のものにする

最後の章です。同じ一周をもう1回、今度は自分の手で回します。そのあと、この道具のいちばんありがたい機能を1つだけ体験します。

1. 2周目を回す

index.html に、旅のメモをもう1つ足します。

           <p>雨の日に行ったら、石畳が光ってきれいだった。雨も悪くない。</p>         </article>++        <article class="note">+          <h2>松本</h2>+          <p class="date">2026-08</p>+          <p>夕方の城がいちばんきれいだった。水路の音がずっと聞こえている町。</p>+        </article>       </section>     </main>

中身はあなたの行った場所に変えてください。行った場所が思いつかなければ、行きたい場所でも構いません。

保存したら、まず状態を見ます。

git status は「どのファイルが変わったか」、git diff は「どの行がどう変わったか」を見せます。

diff --git a/index.html b/index.html
--- a/index.html
+++ b/index.html
@@ -36,6 +36,12 @@
           <p class="date">2026-06</p>
           <p>雨の日に行ったら、石畳が光ってきれいだった。雨も悪くない。</p>
         </article>
+
+        <article class="note">
+          <h2>松本</h2>
+          <p class="date">2026-08</p>
+          <p>夕方の城がいちばんきれいだった。水路の音がずっと聞こえている町。</p>
+        </article>
       </section>
     </main>

行頭の + が足した行です。試食章で見た、あの緑の画面と同じものです。あちらは色が付いていただけで、中身はこれです。

確かめたら、記録して送ります。

数分待ってから公開URLを開いてください。新しいメモが増えています。

2. 時間旅行 — わざと壊して、戻す

ここからが今日のいちばん大事なところです。

index.html をエディタで開いて、index.html を開いて、適当な行を何行か消してください。</article> を1つ消すとか、<h2> の行を消すとか、思いきってやって構いません。保存します。

ブラウザでファイルを開くと、表示が崩れているはずです。

さて、どこを消したか覚えていますか。覚えていなくて大丈夫です。

1つめの git status は「index.html が変わっています」と言います。git restore index.html を打つと、最後に記録した状態にファイルが戻ります。2つめの git status は clean に戻っているはずです。

ブラウザを再読み込みしてください。崩れが直っています。

3. 触らないもの

Gitには戻せない操作もあります。この3つは、いまは覚えなくていいので、見かけても打たないでください。

あなたの番

3つとも、文字を変えるだけです。

(1) 自分のメモにする

index.html の3件を、全部あなたの行った場所に書き換えてください。増やしても減らしても構いません。1件ごとに commit すると、git log が読み物になります。

(2) 見た目を変える

style.css の --accent の色を好きな色に変えてください。1文字変えて git diff を見ると、diffが1行だけ出るのが分かります。

(3) プロフィールを育てる

プロフィールREADMEに、いま作っているものへのリンクを足してください。ここがあなたの名刺になります。

どれをやっても、最後は同じ4つです。git add . → git commit -m "…" → git push → 数分待つ。

持ち帰りカード

フォルダの README.md に、再開のしかたを書いておきます。3か月後のあなたが読む用です。

# はるとの旅ノート

カメラを持って歩いた町の記録です。行ってよかった場所を少しずつ書きためています。

- 公開先: https://USERNAME.github.io/haruto-site/
- 作った人: はると

## 中身

| ファイル | 何をするか |
|---|---|
| `index.html` | ページの中身。ここに旅のメモを足していく |
| `style.css` | 見た目 |
| `.gitignore` | Git に記録させないファイルの一覧 |

## また更新するとき(3行)

1. ターミナルを開いて `cd` でこのフォルダに入る
2. `index.html` を書き換えて保存する
3. `git add .` → `git commit -m "メモを足した"` → `git push` と打つ

数分待つと、公開先のページが新しくなります。すぐ変わらなくても壊れてはいません。

## 覚えておく4つ

| コマンド | 意味 |
|---|---|
| `git status` | いま何が変わっているか |
| `git add .` | 変更を「次の記録に含める」印をつける |
| `git commit -m "..."` | ここまでを1つの記録として残す |
| `git push` | GitHub に送る |

困ったら、まず `git status` を打つ。次にやることが、たいていそこに書いてあります。

## この先に進むなら

- Pro Git(日本語・無料) https://git-scm.com/book/ja/v2
- GitHub Docs(日本語) https://docs.github.com/ja
- 次は「ブランチ」を覚えると、失敗を本番に持ち込まずに試せるようになります

コラム: ブランチ

このコースでは触れませんでしたが、Gitには枝(ブランチ)という仕組みがあります。

main という1本の道の横に、もう1本の道を作って、そこで好きなだけ試す。うまくいったら main に合流させ、失敗したら枝ごと捨てる。本番を壊さずに実験できる仕組みです。

今日は使いませんでした。理由は正直に言うと、2〜4時間で詰め込むと事故るからです。init → add → commit → push の一本道が手に馴染んでからで、まったく遅くありません。

必要になるのは「他の人と一緒に作るとき」か「大きな改造を試すとき」です。そのときが来たら、git switch -c 新しい枝の名前 の1行から始まります。

試食レポート

おつかれさまでした。手元には履歴を持ったフォルダが、インターネットにはあなたの住所が2つ(サイトとプロフィール)残りました。

Git は「作ったものを、消さずに積み上げていく」ための道具です。今日やったことは全体のごく一部ですが、毎日使うのはだいたいこの4つで、これで足ります。

ハマったら