Claude Codeに日本語で指示するだけで、自分専用の単語帳アプリが完成します。コードは一切書きません。
📌 ターミナル(パスB)またはVSCode(パスC)で claude が起動済みの方向けです。まだの方は tier1_setup.html から始めてください。
claude と打って Enter → 起動することを確認mkdir -p ~/Desktop/ws1 ←フォルダを作成
cd ~/Desktop/ws1 ←そのフォルダに移動
このフォルダに vocabulary.csv を作ってください。 列は word, meaning, example の3つで、中学〜高校レベルの英単語を10件入れてください。 日本語の意味と短い英語例文もセットで入れてください。
vocabulary.csv ができているvocabulary.csv が見当たりません。保存先のフォルダを確認して、見出し行が word,meaning,example のカンマ区切りになっているか確認してから、作り直してください。
index.html を作ってください。 vocabulary.csv の1行目の単語だけを画面に大きく表示してください。 まずは表示だけで、クリックなどの動作は後でいいです。 CSS と JavaScript は1ファイルの中に書いてください。
index.html をブラウザで開けるindex.html を開いても何も表示されません。ブラウザのコンソールにエラーが出ていたら内容を教えます。まず固定の単語を直接HTMLに書いた最小構成で動くか確認してください。
index.html を更新してください。 カードをクリックすると表面(英単語)と裏面(日本語の意味)が切り替わるようにしてください。 めくる時に少し回転するアニメーションを付けてもいいです。
クリックしてもカードが切り替わりません。アニメーションなしの一番シンプルな方法で、まずクリックで表示が変わるだけの状態にしてください。
index.html を更新してください。 vocabulary.csv の全単語(10件)を1問ずつ表示して、 カードをめくった後に「わかった」「わからない」ボタンを表示してください。 全問終わったら正解数と不正解数をスコアとして表示してください。 「もう一度やる」ボタンも付けてください。
「わかった」を押しても次の単語に進みません。問題のインデックス管理とボタンのイベント処理に絞って確認・修正してください。
スコアが正しく表示されません。カウント変数の初期化と更新タイミングをデバッグして直してください。
背景色を落ち着いた配色にして、フォントを少し丸みのある雰囲気にしてください。 カードのデザインも全体的に今よりおしゃれにしてください。
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のやりとりが上達の近道です。