Claude Codeに日本語で指示するだけで、自分専用の単語帳アプリが完成します。コードは一切書きません。
📌 ターミナル（パスB）またはVSCode（パスC）で claude が起動済みの方向けです。まだの方は tier1_setup.html から始めてください。
claude と打って Enter → 起動することを確認mkdir -p ~/Desktop/ws1 ←フォルダを作成
cd ~/Desktop/ws1 ←そのフォルダに移動
このフォルダに `vocabulary.csv` を **1ファイルだけ** 作ってください。他のファイル (例: README.md, .gitignore) は作らないでください。 ファイル仕様: - 文字コード: UTF-8 (BOMなし) - 改行: LF - 1行目は見出し行: `word,meaning,example` - 2行目以降に英単語を **ちょうど10件** (見出し含めて合計11行) - 各行は: 英単語, 日本語の意味, 英語の短い例文 をカンマ区切り - 単語レベル: 中学〜高校 (例: apple, gather, decide) - 例文にカンマや改行を含む場合のみダブルクォートで囲む 例 (これに似た形で): ``` word,meaning,example apple,りんご,I eat an apple every morning. gather,集める,Let's gather around the table. ``` 作成後、以下を **必ず実施** してください: 1. ファイルの最初の3行を表示 2. `pwd` でカレントディレクトリの絶対パスを表示 (Step4 で同じフォルダに居る必要あり) 3. ユーザーに「Finder (Mac) または Explorer (Windows) で `vocabulary.csv` を開いて、10行入っているか目で確認してください」とお願いする
vocabulary.csv ができているvocabulary.csv が見当たりません。保存先のフォルダを確認して、見出し行が word,meaning,example のカンマ区切りになっているか確認してから、作り直してください。
このフォルダに `index.html` を **1ファイルだけ** 作ってください。他のファイルは作らないでください。
DOM 構造 (この通りに):
```html
<body>
<div id="card">apple</div>
</body>
```
要件:
- 単語は JavaScript で `const word = "apple";` と書き、起動時に `document.getElementById("card").textContent = word;` で挿入
- `vocabulary.csv` は **読まないで** ください (Step 4 でやります)
- CSS は同じファイル内の <style> に書く
- スタイル: 画面中央に大きく表示 (font-size 4rem 程度、flex で中央寄せ)
- クリック切替・めくり機能・ボタン類は **絶対に付けないで** ください (Step 3 でやります)
- ダブルクリックで開いたとき (file://) でも動くこと (外部 fetch なし)
完了したら、ブラウザで開く手順を1〜3行で教えてください (例: 「Finder で index.html をダブルクリック」)。
index.html をブラウザで開ける`index.html` を開いても何も表示されません。 原因を以下の3観点で確認してください: 1. ファイルが正しい場所にあるか (`ls` で同フォルダに index.html があるか) 2. JavaScript のエラー (console.log の存在/位置) 3. CSS で要素が見えなくなっていないか 最小再現として、`HELLO` だけのファイルが表示できるか先に確認してから、本実装に戻ってください。
`index.html` を更新してください。**新しいファイルは作らないでください**。`vocabulary.csv` も触らないでください (Step 4 でやります)。
仕様:
- 状態変数を JavaScript の冒頭に1つだけ追加: `let isFlipped = false;`
- 単語を JS 内に2つ用意: `const word = "apple"; const meaning = "りんご";`
- カード (`#card`) をクリックすると、`isFlipped` を反転して、`textContent` を `word` か `meaning` に書き換える
- イベントリスナーは `document.getElementById("card").addEventListener("click", ...)` を **1回だけ** 登録 (重複登録しない)
- アニメーションは付けないでください (動作確認優先)
- カードに hover 時 cursor: pointer の指定だけは追加して OK
動作確認:
- ブラウザで開いて `apple` 表示 → クリックで `りんご` → もう1回クリックで `apple`
実装後、追加・変更した行数を教えてください。
クリックしてもカードが切り替わりません。 アニメーションや CSS transform は全部外して、`onclick` で直接 textContent を切り替えるだけの最もシンプルな実装に書き直してください。 表示確認できたら、後からアニメーションを追加します。
`index.html` を更新してください。**新しいファイルは作らないでください**。
⚠️ **重要 (Sonnet が誤解しやすい点を先に明示)**:
- あなた (Claude Code) は **`vocabulary.csv` を読む必要は一切ありません**
- `Read` ツールで `vocabulary.csv` を開かないでください
- CSV の中身を JavaScript に **直接書かないでください** (1単語も)
- `vocabulary.csv` を `fetch` で読み込まないでください (file:// で動かないため)
正しい設計:
- HTML/JavaScript はブラウザで動く
- ブラウザで `index.html` を開いた **人 (ユーザー)** が、画面上のファイル選択ボタンで `vocabulary.csv` を選ぶ
- そのとき初めて、JavaScript の **`FileReader` API** が CSV の中身を読む
- あなた (Claude Code) の仕事は「ファイル選択 UI と FileReader 実装コード」を `index.html` に書くだけ
- 実行時に `vocabulary.csv` の存在は不要 (ユーザーがブラウザで選んだ瞬間に動く)
DOM 構造 (この通りに ID を付ける):
```html
<body>
<input type="file" id="csv-input" accept=".csv">
<div id="card">CSVを選択してください</div>
<div id="buttons" hidden>
<button id="know-btn">わかった</button>
<button id="dont-know-btn">わからない</button>
</div>
<div id="result" hidden></div>
</body>
```
状態変数 (JavaScript 冒頭で初期化):
- `let words = [];` // [{word, meaning, example}]
- `let currentIndex = 0;`
- `let isFlipped = false;`
- `let knowCount = 0;`
- `let dontKnowCount = 0;`
動作仕様:
1. `#csv-input` の change イベントで FileReader を使って CSV を読む (`fetch` は file:// で動かないので使わない)
2. 1行目はヘッダー (`word,meaning,example`) として無視、2行目以降を `words` に push
3. CSV パース: `text.split("\n")` → 各行 `line.split(",")` で十分。空行はスキップ。ダブルクォート囲みのセル対応は省略可
4. CSV読込後: `#buttons` を表示し、`words[0]` の word を `#card` に表示
5. `#card` クリックで Step3 のロジック再利用 (`isFlipped` 反転で word/meaning 切替)
6. `#know-btn` 押下 → `knowCount++`、`currentIndex++`、`isFlipped = false`、次の単語表示
7. `#dont-know-btn` 押下 → `dontKnowCount++`、`currentIndex++`、`isFlipped = false`、次の単語表示
8. `if (currentIndex >= words.length)` で `#card` と `#buttons` を hidden、`#result` に「正解 X / 不正解 Y」+「もう一度やる」ボタンを表示
9. 「もう一度やる」押下 → `currentIndex = 0`、カウンタ初期化、再開
**localStorage 永続化** (重要 — リロードや次のステップで CSV が消える問題の防止):
- CSV 読込成功時、`localStorage.setItem("ws1_csv_text", text)` で保存
- ページ起動時、`const cached = localStorage.getItem("ws1_csv_text")` をチェック → あれば自動読込
- これでブラウザを閉じて再度開いても、ファイル選択不要で同じ CSV から再開できる
- 「もう一度やる」では localStorage は **消さない** (CSV はそのまま、カウントだけリセット)
- (任意) 「CSV をクリア」ボタンを追加して localStorage を削除可能に
重要:
- `addEventListener` は各ボタン1回だけ登録 (重複登録しない)
- 既存の Step3 のクリック切替ロジックは壊さないこと
- 動かない場合は最も単純な実装に書き直すこと
前回の Step で localStorage 保存が消えてしまった可能性があります。`index.html` を確認して:
1. CSV 読込成功時に `localStorage.setItem("ws1_csv_text", text)` を呼んでいるか
2. ページ起動直後に `localStorage.getItem("ws1_csv_text")` をチェックして自動復元しているか
3. 「もう一度やる」処理で localStorage を消していないか
の3点を確認・修正してください。それでも消えていたら、ブラウザの開発者ツール (F12) → Application → Local Storage で `ws1_csv_text` キーが存在するか確認できます。
vocabulary.csv を読む必要はありません。読まないでください。 `index.html` の中で: - CSV の中身を JavaScript に書かない - vocabulary.csv を fetch しない - Read ツールで vocabulary.csv を開かない 代わりに、ブラウザで開いた人がファイル選択ボタン (``) で vocabulary.csv を選ぶ → そのとき JavaScript の FileReader が CSV を読み込む、という設計にしてください。 実装時に vocabulary.csv の存在は不要です。ユーザーがブラウザで選んだ瞬間に動きます。
「わかった」を押しても次の単語に進みません。 以下に絞って修正してください: 1. 現在の問題インデックス (currentIndex) の値を console.log で確認 2. ボタンのイベントが addEventListener で重複登録されていないか 3. 全件終わったときの分岐 (currentIndex >= words.length) が働いているか 他の機能には触らないでください。
スコアが正しく表示されません。カウント変数の初期化と更新タイミングをデバッグして直してください。
背景色を落ち着いた配色にして、フォントを少し丸みのある雰囲気にしてください。 カードのデザインも全体的に今よりおしゃれにしてください。 **触らないでほしい部分** (重要): - Step4 で作った FileReader 読込ロジック - localStorage の保存・復元処理 (CSV が消える原因になる) - `addEventListener` 登録箇所 (二重登録を引き起こす) CSS と HTML 構造の見た目だけを変更してください。
vocabulary.csv の内容を、私が興味のある「〇〇（例：料理の英語名）」に書き換えてください。 単語・意味・例文のセットで10件作ってください。
「わからない」を選んだ単語だけを集めて、もう一周できる「復習モード」を追加してください。
今日作ったものをそのまま持ち帰れます。index.html と vocabulary.csv をセットで保存してください。
次のチャレンジ：ポモドーロタイマーを自宅で作ってみる
ポモドーロ自習プロンプトを見る →
Claude Codeはプロジェクトフォルダに CLAUDE.md というファイルを置くと、
毎セッション開始時に自動で読み込みます。
ここに「禁止事項」と「自己紹介」を書くだけで、AIが安全・賢く動くようになります。
~/.claude/CLAUDE.md に貼り付けるだけでOK。
あとは使いながら「こうしてほしい」が出てきたら追記して、自分仕様に育てていきます。
コピー用 全文テンプレ（非エンジニア向け・最低限の安全装備）：
# わたしのClaude Code設定 ## わたしのこと - プログラミング初心者です - 技術用語は最小限で、必要な時だけ使ってください - 専門用語が出る時は意味も一緒に教えてください - 日本語でやりとりしてください ## 絶対やらないでほしいこと - APIキー、パスワード、個人情報をコードに直書きしない - わたしの確認なしにファイルを削除しない - わたしの確認なしに `git push` しない - GitHubリポジトリをpublicにしない（明示指示時のみ可） - 自前の認証システムは作らない（既存サービスを使う） ## やってほしいこと - リスクや副作用は先に教えてください - 「できません」より「できる方法を3つ」考えてください - エラーは「原因／対策／確認方法」で説明してください - 不明点は推測せず、わたしに質問してください ## 進め方 - 大きな変更前は必ずプランを共有してください - 1つずつ確認しながら進めてください - 完了時は何をやったかを箇条書きで報告してください
ヒント: claude を起動して「CLAUDE.mdを作って。こう書いて →（上のテキストをそのまま貼り付け）」と指示するだけでファイルを作ってくれます。
Claude Codeはデフォルトでは1つの作業に集中しますが、 「PM（プロジェクトマネージャー）として動いてください」と最初に指示すると、 重い処理を部下（サブエージェント）に任せながら自分との会話を続けてくれます。
重い作業を3人の部下に分散しつつ、PM自身はあなたとの会話を止めない構造になります。
① セッション冒頭に一度だけ貼り付けるだけ：
あなたがPMとして動いてください。 窓口・部下・サブエージェントの採用・役割分担・統括を全てあなたにお任せします。 重い作業は部下に任せて、あなた自身は全体把握と判断に専念してください。 部下に作業させている間も、ユーザーとの会話を止めないようにしてください。 重要なことは忘れずに覚えておいてください。 迷ったら曖昧な状態で動かず確認してください。 この役割は常時有効、セッション終わりまで忘れないでください。
② 続けてもう一言 — "次の動き"を生むキックスタート
参加者は「PM化したけど、次に何を頼めばいいかわからない」で止まりがち。
PM化プロンプト直後にこの一言を貼ると、Claudeが自分から現状を整理して動き出します。
責任者として、プロジェクト全体を把握してください。可能な限り他のセッションの内容も見て、現状を要約してください。
なぜ効くか： PM役を与えただけでは"待ち"の状態になりがち。「把握して」と能動的なタスクを渡すことで、Claudeが自分でファイルを読み、状況を整理し、次の提案までしてくれます。
慣れてきたら試してみましょう。最初のうちはシンプルな1対1のやりとりが上達の近道です。