前回の記事で「コード知識ゼロでもWebアプリが作れた」という話をしたわ。
「ほんまにできるん？」「具体的にどうやるん？」という声が聞こえてきそうやから、今回は実際の手順をSTEP1・2に絞って詳しく説明するわ。
結論から言うと、最初にやることは「作りたいものを日本語で言葉にする」だけや。難しいことは何もない。
前提：Claude Codeとは？
Claude Codeとは、Anthropic（アンソロピック）というAI会社が作ったツールで、ターミナル（パソコンを文字だけで操作する黒い画面のこと）上で動くAIアシスタントや。
日本語で指示すれば、コードを書いてくれたり、ファイルを作ってくれたり、エラーを直してくれたりする。プログラミングの知識が一切なくても使える。それが最大の特徴や。
使うにはClaude Proプラン（月額約3,000円のサブスクリプション・月額課金のこと）が必要やけど、それ以外に特別なスキルはいらん。
STEP1：最初の一声を入れるだけ
STEP1でやることは、「何を作りたいか」をそのまま日本語で入力するだけや。
私が最初に入力したのはこういう感じのやつ。
「文字を入力したら一覧で管理できるシンプルなWebアプリを作ってください。登録・表示・削除ができるようにしてほしいです」
これだけ。追加の説明も、技術的な指定も、何もいらん。
Claudeはこれを受け取って、勝手にファイルを作り始める。「index.html」とか「style.css」とか「script.js」とか、名前だけ聞いたことあるようなファイルが次々と出来上がっていく。
私はただ眺めてるだけやった（笑）
最初の指示のコツ
一点だけアドバイスするとしたら、「誰が使う・何のために・何ができる」の3つを入れると精度が上がるってこと。
例えばこんな感じ。
- ❌「アプリ作って」← ふわすぎる
- ⭕「自分が毎日使う、読んだ本のタイトルとひとことメモを記録するWebアプリを作って。追加・一覧表示・削除ができるようにして」
具体的であればあるほど、Claudeが思った通りのものを作ってくれる。でも最初はふわっとしてても大丈夫。後から修正できるから。
STEP2：「うまくいかない」をそのまま報告する
Claudeが「できました」と言ったら、ブラウザで確認する。
で、ここで大抵何か起きる。
私の場合、最初に作ってもらったアプリは画面が真っ白で何も表示されなかった（笑）
「え、壊れてる？」って思うよな。普通はここで「もういいや」ってなるかもしれん。でも違う。これが正常な流れやねん。
エラーの報告方法
うまくいかないとき、やることはたった一つ。
「こうなってます」って状況をそのまま伝える。
私がやった報告はこれ。
「ブラウザで開いたら画面が真っ白です。何も表示されていません」
これだけ。エラーの原因とか、コードのどこが悪いとか、そういうことは一切考えなくていい。
Claudeが「わかりました、確認します」と言って、自分でファイルを調べ始める。そしてしばらくすると「直しました、もう一度確認してください」と言ってくる。
もう一度ブラウザを開いたら、今度はちゃんと表示されてた。
エラーメッセージもそのまま貼ればいい
ブラウザには「開発者ツール（デベロッパーツール）」という機能があって、そこにエラーの詳細が出ることがある。F12キーを押すと開く（知らんくてもいい、覚えとくだけ）。
難しそうに聞こえるけど、やることは赤い文字で出てるメッセージをコピーしてClaudeに貼るだけや。
「こんなエラーが出てました：（エラーメッセージをペースト）」
これだけで、Claudeが解読して直してくれる。私は意味がわからんでも全然OK。
STEP1・2を繰り返すだけで形になっていく
実際に私がやったのは、
- 「こんなの作って」と言う
- ブラウザで確認する
- 「ここがおかしい」と報告する
- Claudeが直す
- また確認する
この繰り返しやった。
私はコードを1行も読んでないし、1行も書いてない。ただ「動いた・動かなかった」を報告し続けただけ。
それでも1時間ちょいで、ちゃんと動くWebアプリが出来上がってた。
まとめ：難しく考えなくていい
STEP1・2のポイントをまとめるとこれだけ。
- STEP1：作りたいものを日本語で言葉にして投げる
- STEP2：うまくいかないことをそのまま報告する
技術的な知識はいらん。「何を作りたいか」「何が起きているか」これだけ言葉にできればええ。
次の記事ではSTEP3の「細かい調整」とWebへの公開方法を解説するわ。「スマホで見たら崩れてた」「ボタンの色を変えたい」みたいな細かい修正をどうやってClaudeに伝えるか、実際のやりとりをそのまま紹介する。
コメント