ORIHATA LEARNING LAB
学習トップ›UNIT 09

UNIT 09 · LEARN BY BUILDING

Gitを知って、LPの保存地点を作る。

Gitが何をする道具かを図で知り、Claudeにまず調べてもらってから、LPの3つのファイルだけを記録してもらいます。GitHubへの送信はしません。

Gitの役割を知る
↓
まず調べてもらう
↓
3ファイルだけ記録する
第3章:自分で検品して改善する目安30〜40分。UNIT 08で lp_sample に DESIGN.md を作った状態から始めます。
START · 今回のゴール

このLPの「完成した状態」を、あとから確かめられるように。

UNIT 08までに、企画メモ・完成したLP・デザイン仕様書が揃いました。次はLP編集アプリへ発展させます。その前に、うまく動いている今の状態を記録します。

今回のゴール

Gitが何をする道具かを理解し、Claude Codeと一緒にLPの3ファイルを履歴に残す。最後に「何を保存したか」「保存に成功したか」を自分で確認できる。

01 · 理解するGitを知る

どんな道具かをつかむ

02 · 自分で選ぶ3ファイルを確認

無関係なものを含めない

03 · 記録して確認保存地点を作る

履歴が残ったか確かめる

Macをお使いの方へ

この教材の操作手順は、Windowsのパソコンで実際に操作して確かめたものです。Macでは、フォルダの開き方やブラウザ、画面の一部が異なります。Macでの手順は、この教材では確かめていません。公式のデスクトップアプリを始めるもあわせて確認してください。

この UNIT の依頼文は、2026年11月12日に Windows 10 Home のパソコンで実際に送って確かめたものです。この UNIT の確認は、Claudeアプリの Code と同じ Claude Code を、ORIHATAがそのパソコンで画面を出さずに動かして行いました。Claude の返事と、できたファイルは会話の記録から写しています。許可の確認の画面は、この UNIT では写真で確かめていません(出たときの見方は UNIT 05・06 と同じです)。ページの写真は、画面を出さない Microsoft Edge で撮ったページの表示です。

STEP 01 · まず意味を知る

Gitは、ファイルの「変更履歴」を残せる道具。

例えば、あなたのLPが今日完成したとします。明日、Claude Codeに「デザインを変えて」と頼んだら、前より見にくくなってしまった。そんなときに、変更する前の状態を記録しておけるのがGitです。

index.htmlいま編集しているLP
↓ 編集して保存
index.html新しい内容に置き換わる

通常の上書き保存だけでは、前の状態を自分で残したとは限りません。

記録 ① · LP完成この時点のファイルを履歴に残す
↓ その後に編集
いま編集中のLP見た目を変えても、記録①は残る

Gitの記録は自動では増えません。「ここを残す」と決めたときに記録します。

01記録を残す

「LPが完成した時点」など、区切りごとの状態を残せます。

02変更を比べる

何が追加・修正されたのかを後から確認できます。

03前の状態を参照する

必要なら以前の版をもとに直せます。ただし戻す操作は慎重に行います。

覚えるのはこれだけ:ふつうの保存は「いまのファイルを更新すること」。Gitの保存地点(コミット)は「選んだファイルの状態を、履歴として残すこと」です。
STEP 02 · 名前の違いを整理する

GitとGitHubは、同じものではない。

名前が似ていますが、役割が違います。今回使うのはGitだけです。GitHubのアカウント登録や、インターネットへのアップロードはしません。

今回使う
PC

Git

自分のパソコンでファイルの変更履歴を管理する仕組み。

例:完成したLPの状態を履歴に残す
今回は使わない
Web

GitHub

Gitで管理したデータをネット上で保管・共有できるサービス。

例:別の人と共同作業する

Gitの履歴をPC内に作っただけでは、PCの故障・紛失に備えるバックアップにはなりません。GitHubにも自動で送信されません。

STEP 03 · 今回の保存対象を知る

今回は、LPの3つのファイルだけを記録する。

Gitは「全部を自動で保存する箱」ではありません。どのファイルを今回の記録に含めるかを選べます。この教材で作った、次の3つを保存しましょう。

📁 lp_learning/
├─ brief.md LPの企画メモ
└─ 📁 lp_sample/
  ├─ index.html 完成したLP
  └─ DESIGN.md 見た目のルール
今回、記録に含める

企画メモ、LP本体、デザイン仕様書の3ファイル。これらが「LP完成時点」のセットになります。

記録に含めない

パスワード、APIキー、個人情報、別の仕事のファイル。フォルダ内の全ファイルをまとめて追加する操作は使いません。

ここからはClaude Codeに頼みます。あなたの役割は、ファイル名と保存対象を見て「これでよいか」を判断すること。Gitのコマンドを暗記する必要はありません。許可の確認に出たコマンドが、頼んだものかどうかを見ます。
STEP 04 · 1通目:まず調べてもらう

まだ何も記録せず、今の状態を調べてもらう。

  1. ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。
  2. 入力欄の下にlp_learning、右側に「手動」と出ているかを見ます(UNIT 06の写真1と同じ画面です)。
  3. 下の1通目をコピーして貼り、文の先頭が1通目になっているかを見てから送ります。
Codeの新しいセッションの画面。上に lp_learning と「環境を選択」、入力欄に依頼文を貼り付けた状態(まだ送っていない)。入力欄の下の帯に「このコンピューター」と lp_learning、右側に「手動」と表示されている。
写真1 新しいセッションで、入力欄の下に lp_learning、右側に「手動」と出た画面。UNIT 06で撮った写真なので、入力欄に貼ってある文は UNIT 06 の1通目です。UNIT 09でも同じ画面で、貼る文だけが違います。名前・フォルダの場所・会話の履歴は灰色で隠しています。
CODE の入力欄に貼る 1通目:記録する前に調べてもらう
現在選択している lp_learning フォルダを、Git で記録する前に調べてください。

調べることは次のとおりです。
- Git が使えるか
- lp_learning、またはその上のフォルダが、すでに Git で管理されていないか
- 記録の候補にする3つのファイルがあるか:brief.md、lp_sample/index.html、lp_sample/DESIGN.md
- 3つのファイルに、秘密の情報や個人情報が書かれていないか

調べるために使ってよいコマンドは、git --version、git rev-parse、git status のような、読むだけのコマンドです。
git init、git add、git commit、設定の変更、削除、復元、GitHub への送信はしないでください。
ファイルの作成・変更・削除もしないでください。
調べた結果を短く報告して、私の確認を待ってください。
実機の確認で実際に送った文章です。

調べるために、Claudeが git --version・git rev-parse・git status のような読むだけのコマンドを実行しようとすると、許可の確認が出ることがあります。

  1. 確認に出たコマンドが、git --version・git rev-parse・git status のどれかなら「一度だけ許可」を押します。
  2. git init・git add・git commit・git config など、ほかのコマンドが出たら「拒否」を押します(1通目では、まだ記録しません)。

Claudeの返事から(この教材の確認のとき・要点を抜き出し)

  • Git は使える(git version 2.53.0)
  • lp_learning も、その上のフォルダも Git で管理されていない(「not a git repository」と出た)
  • 3つのファイル(brief.md・lp_sample/index.html・lp_sample/DESIGN.md)はある
  • 3つのファイルに、パスワード・APIキー・メールアドレス・電話番号・住所・本名はない
  • start.md と lp_editor もあるが、今回の候補ではないので読んでいない
  • 最初に3つのコマンドをまとめて実行しようとしたら許可が要ったので、1つずつに分けた

返事を見て、すでに Git で管理されていると書かれていたら、2通目は送らずに止めます。別の作業の履歴を巻き込むおそれがあるからです。

STEP 05 · 2通目:3つのファイルだけを記録する

名前を指定して選び、1回だけ記録する。

CODE の入力欄に貼る 2通目:Git を始めて、3つのファイルを記録してもらう
調べた結果を確認しました。lp_learning の中で Git の管理を始め、次の3つのファイルだけを1回記録してください。
- brief.md
- lp_sample/index.html
- lp_sample/DESIGN.md

記録のメッセージは「Save first LP and design rules」にしてください。
使ってよいコマンドは、git init、git add(3つのファイルを名前で指定する)、git commit、git status、git log です。
記録に必要な名前とメールアドレスが設定されていない場合は、この lp_learning の Git だけに、名前 learner、メールアドレス learner@example.com を設定してください(--global は使わない)。
lp_learning やその上のフォルダがすでに Git で管理されていた場合、または3つ以外のファイルが含まれそうな場合は、実行せずに理由を説明して、私の確認を待ってください。
GitHub への送信、削除、復元、ほかのファイルの変更はしないでください。
終わったら、記録したファイルの名前、記録の番号、まだ記録していないファイルがあるかを教えてください。
実機の確認で実際に送った文章です。このあと、コマンドの許可の確認が何回か出ます。

記録には名前とメールアドレスが必要です。初めて Git を使うパソコンでは設定されていないことが多いので、この依頼文では、この lp_learning の Git だけに仮の名前 learner とメールアドレス learner@example.com を設定するよう頼んでいます。本当の名前やメールアドレスは使いません。パソコン全体の設定(--global)も変えません。

  1. 許可の確認が出るたびに、コマンドを見ます。git init・git add(3つのファイルの名前つき)・git config(--global が付いていない)・git commit・git status・git log なら「一度だけ許可」を押します。
  2. git add . や git add -A(全部を追加)・--global・git push・削除が出たら「拒否」を押します。

Claudeの返事から(この教材の確認のとき・要点を抜き出し)

  • Git に管理されていないことをもう一度確かめて、git init を実行した
  • git add で3つのファイルを名前で指定し、git status で候補が3つだけであることを確かめた
  • 名前とメールアドレスが設定されていなかったので、git config --local で lp_learning の Git だけに設定した
  • 記録した:メッセージ「Save first LP and design rules」、記録した人 learner <learner@example.com>、記録の番号 b4aa03b
  • まだ記録していないファイル:start.md と lp_editor/(どちらも触っていない)

この教材の確認では、仮の名前を設定するコマンドを許可しなかったとき、Claudeは記録の手前で止まり、「名前とメールアドレスの設定で止まりました。まだ記録していません」と理由を説明して、進め方を2つ示しました。設定を許可すると、記録まで進みました。記録の番号は、人によって違います。

ORIHATAが確かめたところ、記録に入っていたのは3つのファイルだけで、名前とメールアドレスは lp_learning の中だけに設定され、パソコン全体の設定は変わっていませんでした。送り先(GitHub など)の設定もありませんでした。

返事に「LF will be replaced by CRLF」という注意が出ることがあります。これは改行の形についての知らせで、ファイルの中身は変わっていません(この教材の確認でも出ました)。
STEP 06 · 戻す前の判断

Gitは戻る手がかりにもなる。でも、勝手に戻さない。

あとで見た目が崩れたとき、この記録を手がかりに「何が変わったか」を調べられます。ただし、戻す操作(復元)はファイルを書き換えるので、いきなり頼まないことが大切です。

  • まず「記録したときと今で、何が変わったかを示してください。まだ戻さないでください。」のように、調べるだけを頼みます
  • 戻すときも、どのファイルをどの記録に戻すのかを示してもらい、自分で確認してから許可します

戻す操作は、この教材では確かめていません。上の文は依頼の考え方の例です。

HELP · つまずいたら

うまくいかないときの対処。

「すでに Git で管理されています」と言われた

2通目は送りません。別の作業の履歴を巻き込むおそれがあります。lp_learning の場所が UNIT 03 で作った場所かを確かめます。

git add . や git add -A の許可の確認が出た

「拒否」を押し、「3つのファイルを名前で指定してください。」と返信します。

--global が付いたコマンドの確認が出た

「拒否」を押します。パソコン全体の設定が変わってしまいます。

名前とメールアドレスの設定で止まった

設定を許可しなかったときに起きます。「lp_learning の Git だけに設定して、記録まで進めてください。」と返信し、git config(--global なし)の確認が出たら許可します。

git push の確認が出た

「拒否」を押します。今回はインターネットへの送信はしません。

公式資料:デスクトップアプリを始める。サービスの仕様や画面は変わることがあります(2026年11月12日に確認)。

FINISH · 完了チェック

Gitを理解し、3ファイルの記録を確かめたら完了。

チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。

確かめの問題(答えは押すと開きます)

Q1. 許可の確認に「git add .」が出ました。どうしますか?

「拒否」を押します。フォルダの中の全部が候補に入ってしまいます。3つのファイルを名前で指定してもらいます。

Q2. Git で記録したので、パソコンが壊れても安心ですか?

いいえ。記録は同じパソコンの中にあるので、故障や紛失の備えにはなりません。

Q3. あとで見た目が崩れました。すぐ「元に戻して」と頼んでよいですか?

まず、何が変わったかを調べるだけを頼みます。戻す操作はファイルを書き換えるので、内容を確認してから許可します。

次はUNIT 10へ

保存したLPを壊さずに、別のフォルダで簡易LP編集アプリを作ります。