「コーディング」と聞くと、難しそうに感じますよね。
でも今回はコードを書きません。Claudeには「アーティファクト」という機能があって、話しかけるだけでブラウザ上で動くアプリを作ってくれます。開発環境のセットアップも不要です。多くの場合、無料プランでも試せます（ただしClaude側の仕様変更で変わることがあります）。
この記事では、3つのことをやります。
- Claudeに電卓を作ってもらう
- 00ボタンを追加する
- 見た目をiPhone風に変える
コードは書きません。まずは「AIに言うだけで画面が動く」感覚をつかむのが目的です。ReactやJavaScriptの仕組みは説明しません。今は気にしなくて大丈夫です。
この記事を通して、こんなものが作れるようになります。ちょっと触ってみてください。
まず作ってみよう！
Claude.ai を開いて、こう打ってみてください。まだClaudeを使ったことがない人は、画面の案内に沿ってアカウントを作成してください。チャット画面が開ければ十分です。
Reactのartifactとして電卓を作って
右側にプレビューが出てきましたか？ボタンを押してみてください。動きますよね。コードを一行も書いていないのに、動いています。
右側にプレビューが表示されればOKです。これが「アーティファクト」です。
電卓じゃなくても大丈夫です。自分が気になるものを頼んでみましょう。
- 「タイマーを作ってください」
- 「簡単なToDoリストを作ってください」
- 「じゃんけんができる画面を作ってください」
きっと動きます。まず何か一つ、自分の手で動かしてみてください。
プレビューが出ずにコードが表示されてしまったら
「電卓を作って」とだけ伝えると、シンプルすぎてClaudeがコードをそのまま貼り付けてしまうことがあります。「Reactのartifactとして」と付け加えると、右側のプレビュー画面に動くアプリが表示されます。Reactは画面を作る技術の一つです。今は意味がわからなくても大丈夫です。
こうなったら、「Reactのartifactとして」を頭に付けてもう一度試してみてください。
改造してみよう！
動きましたね。でも、使っているうちに「もうちょっとこうならないかな」と思い始めますよね。それが次の一歩です。
電卓なら、「00ボタンがあったら便利なのに」とか感じませんか？そう思ったら、そのままClaudeに伝えてみましょう。
0の隣に00ボタンを追加したい
即座に変わります。下の画像を見てみてください。
0の隣に00ボタンが追加されました。
「00」が増えていますよね。欲しいものを言葉にするだけで、画面が変わります。 わがままでいいんです。思ったことをそのまま伝えてみてください。
もっと改造してみよう！
動くものを見ると、もっと触りたくなりますよね。
「デザインがちょっと地味だな」と思ったら、それも遠慮なく頼んでみましょう。
iPhoneの電卓アプリっぽいシンプルなデザインにして
見た目が一変しました。指示は一行だけです。
たった一行で、見た目が変わりました。言葉を重ねるたびに画面が変わっていきます。気づいたら最初と全然違うものになっていた、なんてことも起きます。それでいいんです。脱線が、発見になります。
「電卓」から始まったものが、いつの間にか自分専用のツールになっていきます。
AIが応答するアーティファクトも作れます
ここまで作ってきたものは「ブラウザ上で動く小さなアプリ」です。ボタンを押したら計算する——決められた動きをするだけの仕組みです。
でも「せっかくClaudeを使っているなら、AIが答えてくれるものを作りたい」と思いませんか？実はそれも作れます。
実際に動くサンプルはこちらから試してみてください。プログラムの「決まった動き」と、AIの「理解して返す」が組み合わさった感覚が体験できます。
プログラムの動きとAIの応答が組み合わさった例。
ただし、AIが応答するタイプは通常の電卓より少し仕組みが複雑です。まずは「画面が動く」感覚をつかめれば十分です。興味があればぜひ試してみてください。
こんなのあったらいいね
電卓が作れたということは、「入力→計算→出力」の形をしたものなら何でも作れるということです。
思いつくままに挙げてみると：
- 消費税を自動で計算してくれる見積もりフォーム
- カロリーを計算してくれる食事記録ツール
- 月の予算を管理するシンプルな家計ツール
- 「〇〇分後に知らせて」と打ったら動くタイマー
どれか一つ、今すぐ試してみましょう。
AIのアウトプットは毎回同じとは限りません
生成AIは同じプロンプトでも、毎回少し違うコードを出すことがあります。この記事のスクリーンショットと完全に一致しなくても大丈夫です。動かしてみて、うまくいかない部分があれば、エラーをそのままAIに貼って聞いてみてください。逐次調整しながら読み進めてもらえれば十分です。
今回わかったこと
今回は、コードを一行も書かずに、ブラウザ上で動く電卓アプリを作りました。
「こうしたい」と言葉にするだけで画面が変わる。まずは、その感覚を体験できれば十分です。 プログラミングの難しさは、実はコードを書くことだけではありません。むしろ、「何を作りたいのか」「どこを変えたいのか」をはっきりさせることが大事だったりします。
AIは、その後のコードを書く作業をかなり肩代わりしてくれます。だからこそ、こちら側に必要なのは、完璧な知識よりも「こうしたい」と伝える力です。
ただし、最初から完璧なものを作ろうとしなくて大丈夫です。
今日やったように、まず動くものを出す。触ってみる。「ここが違う」と気づいたら直す。
この繰り返しが、バイブコーディングの基本です。
最初の電卓が少し地味でも、00ボタンがなくても、それでよかったんです。
動くものがあるから、「もっとこうしたい」が見えてきます。そして、その気づきをまたAIに伝えることで、少しずつ自分のイメージに近づいていきます。
アプリは、一発で完成させるものではありません。会話しながら、触りながら、育てていくものです。
作ることへのハードルが、少し下がった感じがしませんか。
次回：Google ColabでPythonを動かしてみよう
次の記事では、場所をGoogle Colabに移します。ブラウザ上でPythonを動かせる環境で、AIに作ってもらったコードを貼って実行します。
アーティファクトと同じく、コードは書きません。「作ってもらって、貼って、動かす」——その流れを体験します。