🎯 やりたいこと

「出し物に投票して、結果がその場で見える、かんたんなWebページ」を、ゼロから作りたい。でも、何から手をつければいいか分からない。

👣はるとの手順

1. まっさらな作業フォルダを用意して起動する散らからないように、新しいフォルダ（＝ファイルをまとめる箱のこと）を作ってからその中で claude を立ち上げます。これで「この箱の中だけ」をClaudeが見てくれます。
2. プロジェクトの“説明書”を作ってもらう/init を打つと、Claudeがフォルダを見渡して CLAUDE.md（＝このプロジェクトのルールやメモを書いておく説明書）を自動で用意してくれます。次から話が早くなります。
3. いきなり作らず、まず計画を立てる/plan（プランモード）で「どんなファイルを、どういう順で作るか」をClaudeに提案してもらいます。プランモード中はファイルを勝手に書き換えないので、安心して相談できます。
4. 小さく実装してもらう計画にOKを出したら、まずは「投票ボタンと結果表示だけ」のようにひと口サイズでお願いします。一度に全部作らせないのが成功のコツ。
5. その場で動かして確認する行頭に ! をつけるとターミナルのコマンドが打てます（＝Bashモード）。!open index.html でブラウザを開いて、自分の目で確かめます。
6. 変更点を見てから記録する/diff でClaudeが何を書き換えたかをまとめて確認。気に入ったら「ここまでをコミットして」とお願いして、git に記録しておきます。なお安全地点（チェックポイント）はお願いごとに自動で保存されていて、ダメだったときは /rewind（別名 /checkpoint）で戻れます。

💬 実際のやりとり（イメージ）

# 新しいフォルダを作って、その中でClaudeを起動
$ mkdir bunkasai-vote
$ cd bunkasai-vote
$ claude

# まずは説明書づくり
/init
# つぎに計画モードで相談
/plan
あなた > 出し物に投票できて、結果が棒グラフで見える1ページを作りたい。HTMLとJavaScriptだけで。

# 計画にOKしたら小さく実装 → その場で確認
!open index.html

# 変更を見て、よければ記録。ダメなら /rewind で戻す
/diff
あなた > ここまでをコミットして

sequenceDiagram
    participant U as はると
    participant C as ClaudeCode
    participant F as ファイル
    participant T as ターミナル
    U->>C: /init で説明書を作って
    C-->>F: CLAUDE.md を作成
    C-->>U: 準備できたよ
    U->>C: /plan 投票ページの計画を立てて
    C-->>U: こんな手順でどうかな
    U->>C: その計画でOK、小さく作って
    C->>F: index.html を少しずつ作成
    U->>T: !open index.html で動作チェック
    T-->>U: ブラウザで表示OK
    U->>C: /diff で変更を確認
    U->>C: ここまでをコミットして
    Note over U,C: 小さく作って、確認して、保存。この繰り返しが王道
      

🎯 やりたいこと

選手名・種目・タイムが入ったCSVを、「タイムの速い順に並べて、空欄を埋めて、きれいな表にする」スクリプトがほしい。毎月使い回せると嬉しい。

👣みおの手順

1. まずファイルをClaudeに見せる@ を打つとファイル名の候補が出ます（＝ファイルパス補完）。@kiroku.csv と指定すれば、Claudeが中身を読んでくれます。「これを整形して」と頼む前に、まず見せるのが第一歩。
2. 整形スクリプトを書いてもらう「タイムの速い順に並べて、空欄は『記録なし』で埋めて、整った表にするPythonを書いて」とお願い。Claudeが seiri.py のようなファイルを作ってくれます。
3. その場で実行して結果を見る!python seiri.py で実際に動かします。! でターミナルに直行できるので、Claudeとの会話を抜けずに結果が確認できます。
4. 気になる所を直してもらう「日付の形式も揃えて」「ヘッダー（＝表の見出し行）を日本語にして」など、結果を見て追加注文。会話を続けるだけで直っていきます。
5. 完成したら使い回すスクリプトが完成すれば、来月は同じ !python seiri.py を打つだけ。一度作れば、ずっとあなたの味方です。

💬 実際のやりとり（イメージ）

# まずCSVをClaudeに見せる（@でファイルを指定）
あなた > @kiroku.csv これを見て。タイムの速い順に並べて空欄を埋めるPythonを書いて。

# Claudeが seiri.py を作ってくれたら、その場で実行
!python seiri.py

# 結果を見て追加注文
あなた > ヘッダーを日本語にして、タイムは「分:秒」表示にして。

sequenceDiagram
    participant U as みお
    participant C as ClaudeCode
    participant F as ファイル
    participant T as ターミナル
    U->>C: @kiroku.csv これを整形して
    C->>F: kiroku.csv を読み込む
    C-->>U: 中身を理解したよ
    U->>C: 速い順に並べるPythonを書いて
    C->>F: seiri.py を作成
    U->>T: !python seiri.py で実行
    T-->>U: 整形された表が出た
    U->>C: ヘッダーを日本語にして
    C->>F: seiri.py を修正
    Note over U,T: 一度作れば、来月も同じ1行で使い回せる
      

🎯 やりたいこと

クリックで画像が拡大表示されるはずが動かない。原因を突き止めて直し、公開前にひと通りの安全チェックも済ませたい。

👣ゆいの手順

1. 症状を具体的に伝える「ギャラリーの画像をクリックしても拡大されない。エラーは出ていない」と、できるだけ具体的に報告します。@gallery.js で怪しいファイルも見せると話が早いです。
2. 原因を一緒に調べてもらういきなり直させず「まず原因を調べて」と頼みます。Claudeが関係するファイルを読んで「ここが怪しい」と教えてくれます。
3. 直す前に計画を確認/plan で「どこを、どう直すつもりか」を先に説明してもらいます。納得してから手を動かしてもらうのが安全。
4. 修正してもらい、差分を見る修正後に /diff で変更点を確認 → ブラウザで動作チェック。……ところが、まだ拡大されない！
5. 直らなかったので、いったん巻き戻すあわてず Esc＋Esc（＝直前のコード変更を巻き戻す操作）で、いじる前の状態に戻します。間違った修正を消して、まっさらからやり直せます。
6. 情報を足してやり直す「画像のファイル名に全角スペースが入っていた」など新しい手がかりを伝えて、もう一度修正を依頼。今度はうまく拡大されました。
7. 公開前に安全チェック最後に /security-review でコードの危ない箇所（＝脆弱性のこと）がないか点検してもらってから公開します。

💬 実際のやりとり（イメージ）

# バグ報告＋怪しいファイルを見せる
あなた > @gallery.js 画像をクリックしても拡大されない。まず原因だけ調べて。

# 直す前に計画を確認 → 修正 → 差分チェック
/plan
/diff

# まだ直らない…！ Esc+Esc で巻き戻して、情報を足してやり直す
あなた > ごめん、画像名に全角スペースが入ってた。それを踏まえて直して。

# 公開前に安全チェック
/security-review

sequenceDiagram
    participant U as ゆい
    participant C as ClaudeCode
    participant F as ファイル
    U->>C: @gallery.js 拡大されない、原因を調べて
    C->>F: 関係ファイルを読む
    C-->>U: ここが怪しいよ
    U->>C: /plan 直し方を先に説明して
    C-->>U: この方針で直すね
    C->>F: gallery.js を修正
    U->>C: /diff 変更を確認、でもまだ直らない
    U->>C: Esc Esc で巻き戻し
    C-->>F: 修正前の状態に戻す
    U->>C: 全角スペースが原因だった、直して
    C->>F: 正しく修正
    U->>C: /security-review 公開前チェック
    Note over U,C: 直らなければ巻き戻す。それだけで安心して挑戦できる
      

🎯 やりたいこと

毎回ゼロから説明し直さず「昨日の続き」から再開したい。使った金額を把握しつつ、できれば外出先からも様子を確認したい。

👣そうたの手順

1. 前回の続きから再開するターミナルで claude -c（--continue）と打つと、直前の会話をそのまま再開できます。昨日のやりとりを覚えたまま続けてくれるので、説明し直す手間ゼロ。
2. 古いセッションを選んで開く「3日前のあの作業に戻りたい」ときは claude -r（--resume）。過去のセッション（＝会話の記録）が一覧で出て、選んで再開できます。
3. 使った金額を確認する/cost で、このセッションでどれくらい料金がかかったかを表示。長く使うなら、ときどき見て感覚をつかんでおくと安心です。
4. 記録を書き出して残す区切りがついたら /export で会話のログを外に保存。あとで読み返したり、引き継ぎメモにしたりできます。
5. （紹介）外出先から様子を見る少し先の話として、/install-slack-app でSlackと連携したり、--remote や /rc（リモートコントロール）を使うと、スマホなどから進み具合を確認できます。まずは「こんなこともできる」と知っておけば十分です。

💬 実際のやりとり（イメージ）

# 昨日の続きをそのまま再開
$ claude -c

# もっと前の作業に戻りたいなら、一覧から選ぶ
$ claude -r

# 会話の中で、使った金額を確認したり記録を残したり
/cost
/export

# （紹介）外出先から様子を見る準備
/install-slack-app

🔁 セッションを“またぐ”という感覚

sequenceDiagram
    participant U as そうた
    participant T as ターミナル
    participant C as ClaudeCode
    U->>T: claude -c で昨日の続きを再開
    T->>C: 前回の会話を読み込む
    C-->>U: 昨日の続きから始められるよ
    U->>C: メモ保存の機能を足して
    C-->>U: 実装したよ
    U->>C: /cost いくら使った
    C-->>U: ここまでの料金はこれだよ
    U->>C: /export 記録を保存
    C-->>U: ログを書き出したよ
    Note over U,C: 外出先からは Slack連携や リモートで様子見もできる