Claude Codeに「簡単なサイトを作って」と頼むと、ファイルがいくつか出てきます。中身は読めなくて大丈夫です。この回では、コーヒー屋のサイト1つを少しずつ育てながら、Webアプリの仕組みを説明します。ざっくりとした仕組みを知っておくだけで、AIとの会話が円滑になり、少し楽しくなります。
コーヒー屋のサイトを、育てながら
扱うのは、Claude Codeに作らせた1ページのサイトです。これに機能を足していきながら、出てくる言葉の位置関係を確かめていきます。コードは1行も書きません。
サーバーは、要するにパソコン
まず、いちばん大きいところから。作ってもらったファイルは、どこかに置いてあります。どこかというのは、要するに誰かのパソコンの中です。
- あなたのパソコンで、ブラウザに住所を打つ
- 「このページください」というお願いが、その住所あてに届く
- どこかのパソコンに
index.htmlが置いてある - その
index.htmlが届き、ブラウザが見た目に起こす
「ここに大きな見出しを出して、この下にボタンを置いて」という指示が、そのファイルに全部書いてあります。アドレスを打ってから少しだけくるくる回る時間がありますが、あれは頼んで、届くのを待っている時間です。
そして、このファイルを渡してくれるパソコンのことを サーバー と呼びます。特別な機械の名前だと思われがちですが、そうではありません。ずっとついていて、頼まれたらファイルを渡している、要するにパソコンです。
じゃあ、このパソコンでもいい
パソコンでいいなら、いま目の前にあるこれでもいいはずです。実際にClaudeに「HTMLを返すサーバーを立てて」と頼むと、立ちます。どこかに申し込んだわけでも、何かを買ってきたわけでもありません。このパソコンが、ファイルを渡す係を始めただけです。
ブラウザで localhost と打つと、さきほど作ったページが出ます。localhost（ローカルホスト）は「自分自身」という意味の住所です。だから今は、頼んでいるのも渡しているのも同じパソコンです。つまり、いま、このパソコンがサーバーです。
借りるのも、やっぱりパソコン
では、これで公開できるかというと、そうはいきません。パソコンを閉じたら止まります。それに localhost は自分自身という意味なので、他の人が打ってもその人のパソコンを指すだけです。
かといって、見てもらうために自分のパソコンを夜も旅行中もつけっぱなしにしておくのは現実的ではありません。だから普通は、どこかで24時間ついているパソコンを借りて、そこにファイルを置きます。 データセンターにたくさん並んでいる、誰かのパソコンです。レンタルサーバーとか、Vercelとか、呼び方はいろいろありますが、やっていることは同じです。置き場所が、自分の机の上からよそのパソコンに変わっただけです。
ボタンを足す。でも、忘れる
ここからサイトを育てていきます。Claudeに「いいねボタンを足して」と頼むと、ファイルが1つ増えて app.js になりました。中身は読まなくて大丈夫です。仕掛けを書いた紙が1枚増えた、くらいの感じで見てください。この、仕掛けを書くための言葉が JavaScript です。
押してみると、1、2、3とちゃんと増えます。では開き直すと——0に戻りました。
- パソコン（サーバー）は、ファイルを渡したら終わり
- 押した数を数えているのはブラウザのほう
- ブラウザは開き直したら全部忘れる
動くのに、覚えてくれない。ここから話が変わります。
覚える係を、外に出す
Claudeに「開き直しても消えないようにして」と頼むと、フォルダが2つに割れました。frontend と backend です。見せるほうと、数えて覚えておくほうに分かれたということです。
この見せるほうを フロントエンド、覚えるほうを バックエンド と呼びます。難しく聞こえますが、いま起きたことはフォルダが2つになった、それだけです。
押して1、2、3。開き直しても3のままです。もう1つタブを開いて、バックエンド側の住所（/api/likes のようなアドレス）を直接見ると、出てくるのは数字だけ。見た目も飾りもありません。これが、プログラム向けの入口です。人間はさっきの画面を見て、プログラムはこっちを見ている。同じ数を、2つの出方で見ているだけです。
Claudeが「フロント側を直しますね」と言ったら、見せるほうのフォルダの話をしています。
メモ1枚じゃ、足りなくなる
では、その数はどこに書いてあるのか。backend の中に likes.json というファイルがあって、開くと1行だけです。数を1つ覚えるだけなら、これで十分です。
でも、会員が1万人いて、それぞれの名前と、注文の履歴と、在庫があって、となると、1枚のメモでは探せません。だから専用の帳簿に替えます。それが データベース です。
Claudeが最初のほうで「テーブルを作りますね」と言うことがあります。あれは、この帳簿にどんな欄を作るかを決めている場面です。表計算のシートくらいの想像で大丈夫です。メモが帳簿になっただけで、消えない置き場というところは同じです。
組み上がった家に、引っ越す
さきほどは、フォルダを自分で2つに割って、あいだを自分でつなぎました。毎回これをやるのは、正直しんどいです。なので普通は、最初から組み上がっているものを使います。見せるほうの部屋と作るほうの部屋が、はじめから同じ家の中に用意されている。これが フレームワーク です。
同じサイトを Next.js というフレームワークで作り直すと、app というフォルダの中に page と api が並びます。page が見せるほう、api が受けるほうです。同じ家に2つ部屋がある、それだけ見えれば十分です。動かしてみると、見た目もいいねの振る舞いもさっきと同じでした。中身の置き方が違うだけです。
ここまでで3つの形が出てきました。
- 全部ブラウザの中 —
index.htmlとapp.js。開き直したら忘れる - 自分で2つに割る —
frontendとbackend。あいだも自分でつなぐ - 組み上がった家に入る — Next.js。部屋が最初から用意されている
Claudeが「Next.jsで作りますね」と言うのは、3つ目を選んだという意味です。
部屋の名前まで決まっている家
同じ発想の、もっと古株もあります。Ruby on Rails です。こちらは部屋の名前まで決まっていて、app の中に views・controllers・models と並びます。見せるのが views、受けるのが controllers、帳簿とやり取りするのが models です。誰が作っても同じ間取りになります。
窮屈そうに聞こえますが、AIに書いてもらうときは、決まっているほうが話が早いです。家の間取りが違うだけで、住んでいる係は、この回でずっと同じ3つです。
今日育てたものを、1枚の地図に
出てきたものを1枚にまとめます。
- 真ん中：バックエンド — 作るほう
- 左：フロントエンド — 見せるほう・ブラウザ側
- 右：データベース — 消えない置き場
- もう1本の線：外のサービス — 天気・地図・支払いなど
作るほうがその外のサービスへ聞きに行く入口が、前回扱った API です。全部を自分のところに持たなくていい、というのがけっこう大事なところです。
そして、この全部を、さきほど借りた24時間ついているパソコンの上に載せる。それが「公開する」ということです。
うまくいかないとき、地図のどこか
この地図は、うまくいかないときに効きます。
| 症状 | 地図のどのあたりか |
|---|---|
| 押したはずのいいねが、開き直したら0に戻る | 置き場に届いていない |
| 押しても数が増えない | 見せるほうと作るほうのあいだ |
| 天気や地図だけ出てこない | 外のサービスとの線 |
| 自分のパソコンでは動くのに、人に見せられない | 借りる話（公開先） |
原因を自分で突き止める必要はありません。 ただ、どのあたりの話かを添えて伝えると、Claudeの直しがぐっと速くなります。
書けなくていい。地図だけ
この回のコーヒー屋は、ファイル2個から始まって、最後は家ごと引っ越しました。でも、住んでいる係は3つのままでした。
中身を書けるようになる必要はありません。Claudeが「テーブルを足しますね」とか「フロント側を直しますね」と言ったときに、ああ、あそこの話だな、と分かる。それだけでやり取りがだいぶ楽になります。