Keyaki Labs
← Blog一覧へ
#Claude Code#Webアプリ#Web開発

Claude Codeを使うなら知っておきたい「Webアプリ」の話

Claude Codeに「サイトを作って」と頼むと出てくるファイルが、どこに何を置いているのか。実際に作らせたコーヒー屋のサイト1つを、いいねボタンを足す→フォルダを2つに割る→Next.jsへ引っ越す、と育てながら、フロントエンド・バックエンド・データベース・フレームワークの位置関係を地図にします。コードは1行も書きません。

2026年9月8日22 min read

この記事の内容をスライドにまとめました。ビジュアルで先に把握したい方はこちらからどうぞ。

👉 スライドで見る（← → キーまたはスワイプで操作できます）

Claude Codeに「サイトを作って」と頼むと、ファイルがいくつも出てきます。

  • page.tsx route.ts layout.tsx ── 見たことのない名前が並ぶ
  • 「フロント側を直しますね」と言われるけれど、フロントがどこなのか分からない
  • 「テーブルを作ります」と言われて、何の表の話なのか分からない

中身は、読めなくて大丈夫です。ただ、どこに何があるのかだけ分かっていると、AIとの会話が急に楽になります。

この記事では、実際にClaude Codeに作らせた1つのサイトを、少しずつ育てていきます。育てながら、Webアプリのざっくりした地図を描きます。

読み終わったときに分かっているのは、次の6つです。

  1. サーバーが何か（要するに、パソコンです）
  2. 自分のパソコンをサーバーにする方法（実際にできます）
  3. フロントエンドとバックエンドが、何がどう違うのか
  4. データベースが必要になる理由
  5. フレームワーク（Next.js、Ruby on Rails）が何を肩代わりしているのか
  6. うまくいかないとき、どのあたりの話なのかの見分け方

コードは1行も書きません。読む必要もありません。見てほしいのは、ファイルがどこに置かれているか、それだけです。

この記事は Claude Code 2.1.261 / Next.js（create-next-app）/ Rails 8.1.3.1 で確認しています。

今日の題材 ── コーヒー屋のサイト

まず、材料を用意します。Claude Codeに一言頼むだけです。

claude -p "コーヒー屋さんの簡単な紹介サイトを1ページ作って。HTMLとCSSだけ、日本語で。"

返ってきたのはこれです。

index.html と style.css を作成した。架空の自家焙煎店「KEYAKI COFFEE」のヒーロー・お店紹介・メニュー・店舗情報の1ページ構成で、レスポンシブ対応済み。

$ ls
index.html  style.css

ファイルは2つだけ。 店名も、文章も、配色も、こちらでは1文字も指定していません。この2つのファイルを、記事の最後まで育てていきます。

サーバーは、要するにパソコン

いきなり本題です。サーバーというのは、要するにパソコンです。

特別な機械の名前だと思われがちですが、そうではありません。順を追います。

さっき作ってもらった2つのファイルは、どこかに置いてあります。どこかというのは、要するに、誰かのパソコンの中です。

ブラウザでアドレスを打つと、そのパソコンに「このページください」というお願いが届きます。そのパソコンが index.html を渡してくれる。ブラウザは、受け取ったそれを読んで、見た目に起こします。

順番にすると、こうです。

  1. あなたのパソコン ── ブラウザで住所を打つ
  2. 「このページください」が、その住所あてに届く
  3. どこかのパソコン ── index.html を渡す
  4. ブラウザが受け取って、見た目に起こす

「ここに大きな見出しを出して、この下にボタンを置いて」という指示は、全部その index.html に書いてあります。

アドレスを打ってから、少しだけ、くるくる回る時間がありますよね。あれは、頼んで、届くのを待っている時間です。

そして、このファイルを渡してくれるパソコンのことを、サーバーと呼びます。 ずっとついていて、頼まれたらファイルを渡している。やっていることは、それだけです。

じゃあ、自分のパソコンでもいい

パソコンでいいなら、いま目の前にあるこれでも、いいはずです。実際にできます。

claude -p "このフォルダのHTMLを返すサーバーを立てて。ポートは8000で。"

サーバー立てた。http://localhost:8000 でアクセスできる。

  • python3 -m http.server 8000 --bind 127.0.0.1 をバックグラウンド起動
  • / → index.html (200, 5185B)、/style.css (200, 4930B) 両方とも正常応答を確認
  • サーバーログにエラーなし

これだけです。どこかに申し込んだわけでも、何かを買ってきたわけでもありません。このパソコンが、ファイルを渡す係を始めただけです。

ブラウザで localhost:8000 と打つと、さっき作ったページが出ます。

ローカルホスト（localhost）は「自分自身」という意味の住所です。だから今は、頼んでいるのも、渡しているのも、同じパソコン。いま、このパソコンがサーバーです。

でも、人に見せようとすると困る

これで公開できるかというと、そうはいきません。

  • パソコンを閉じたら、止まります
  • **localhost は「自分自身」**なので、他の人が打っても、その人のパソコンを指すだけ
  • 見てもらうために、自分のパソコンを夜も旅行中もつけっぱなしにするのは、現実的ではない

だから普通は、どこかで24時間ついているパソコンを借りて、そこにファイルを置きます。 データセンターに、たくさん並んでいる、誰かのパソコンです。

レンタルサーバーとか、Vercelとか、呼び方はいろいろありますが、やっていることは同じです。置き場所が、自分の机の上から、よそのパソコンに変わっただけです。

自分のパソコン

  • 閉じたら止まる
  • 住所は localhost。自分にしか通じない
  • 無料

借りたパソコン

  • 24時間ついている
  • 世界から届く住所がある
  • 月いくらで借りる

やっている役は、どちらも同じです。ファイルを渡しているだけ。

ここから育てます ── ①ボタンを足す。でも、忘れる

ここからが本題です。サイトに「いいね」ボタンを1つ足してみます。

claude -p "いいねボタンを足して"

app.js を新規作成し、ヘッダー右端に ☕ いいね 0 ボタンを追加した（クリックで数字が増えるだけ。リロードでリセット）。

$ ls
app.js  index.html  style.css

ファイルが1つ増えました。 中身は読まなくて大丈夫です。「仕掛けを書いた紙が1枚増えた」くらいの感じで見てください。

この、仕掛けを書くための言葉が JavaScript です。

押してみると、1、2、3、とちゃんと増えます。では、ページを開き直してみます。

0に戻りました。

なぜか。渡す側のパソコンは、ファイルを渡したら、それで終わりだからです。数えているのはブラウザのほうで、ブラウザは、開き直したら全部忘れます。

  • パソコン（サーバー） ── ファイルを渡すだけ。渡したら終わり
  • ブラウザ ── 押した数を数えている。ただし開き直したら忘れる

動くのに、覚えてくれない。ここから話が変わります。

②覚える係を、外に出す

そこで、次はこう頼みます。

claude -p "開き直しても消えないようにして"

backend/server.js が frontend/ を配信し、/api/likes の GET で {"likes": 数} を返し、POST で加算して backend/likes.json に書き込むようにした。ボタンは読み込み時にGETで現在値を表示するので、再読み込みでもサーバー再起動でも数は消えない。

フォルダが、2つに割れました。

$ ls -R
.:
backend  frontend

./backend:
likes.json  server.js

./frontend:
app.js  index.html  style.css

見せるほうと、数えて覚えておくほうに、分かれたということです。

  • frontend/ ＝ 見せるほう。これをフロントエンドと呼びます
  • backend/ ＝ 数えて、覚えておくほう。これをバックエンドと呼びます

難しく聞こえますが、いま起きたことはフォルダが2つになった、それだけです。

押してみます。1、2、3。開き直します。3のままです。

ここで前回のAPIが出てきます

もう1つタブを開いて、localhost:3000/api/likes を見てみます。出てくるのはこれだけです。

{"likes":3}

見た目も飾りもなくて、数字だけ。これが「プログラム向けの入口」、つまりAPIです。

人間はさっきのページを見て、プログラムはこっちを見ています。同じ数を、2つの出方で見ているだけです。

  • 人間が見るとき ── localhost:3000 を開く → コーヒー屋のページが出る
  • プログラムが見るとき ── localhost:3000/api/likes を開く → {"likes":3} だけが出る

Claudeが「フロント側を直しますね」と言ったら、見せるほうのフォルダの話をしています。「バックエンドを直します」なら、数えるほうです。どっちのフォルダの話か、それだけ分かれば十分です。

APIそのものについては、シリーズの前の回で詳しく書いています → Claude Codeを使うなら知っておきたい「API」と「MCP」の話

③メモ1枚じゃ、足りなくなる

では、その数はどこに書いてあるのか。backend/ の中を覗いてみます。

$ cat backend/likes.json
{"likes":3}

1行だけです。数を1つ覚えるだけなら、これで十分。

でも、会員が1万人いて、それぞれの名前と、注文の履歴と、在庫があって……となると、1枚のメモでは探せません。

だから、専用の帳簿に替えます。それがデータベースです。

メモ1枚（いまの likes.json）

  • 数を1つ覚えるだけなら、これで足りる

データベース（帳簿）

  • 何万件でも、探せる形で置いておける

役割はどちらも同じで、消えない置き場です。

Claudeが最初のほうで「テーブルを作りますね」と言うことがあります。あれは、この帳簿にどんな欄を作るかを決めている場面です。表計算のシートくらいの想像で大丈夫です。

メモが帳簿になっただけで、消えない置き場、というところは同じです。

④組み上がった家に、引っ越す

ここまでで、フォルダを自分で2つに割って、あいだを自分でつなぎました。毎回これをやるのは、正直しんどいです。

なので普通は、最初から組み上がっているものを使います。見せるほうの部屋と、作るほうの部屋が、はじめから同じ家の中に用意されている。これがフレームワークです。

同じサイトを、Next.js というフレームワークで作り直してみました。

$ ls -R app
app:
api  favicon.ico  globals.css  layout.tsx  LikeButton.tsx  page.tsx

app/api:
likes

app/api/likes:
route.ts

app というフォルダの中に、page（見せるほう）と api（受けるほう）が並んでいます。 中身は読まなくて大丈夫です。同じ家に2つ部屋がある、それだけ見えれば十分です。

動かしてみると、見た目も、いいねの振る舞いも、さっきと同じでした。中身の置き方が違うだけです。

ここまでで、3つの形を見ました。

  1. 全部ブラウザの中 ── index.html と app.js。開き直すと忘れる
  2. 自分で2つに割る ── frontend/ と backend/。覚えてくれるが、あいだを自分でつなぐ
  3. 組み上がった家に入る ── Next.js の app/。覚えてくれて、つなぎ方も最初から用意されている

Claudeが「Next.jsで作りますね」と言うのは、③を選んだ、という意味です。

部屋の名前まで決まっている家 ── Ruby on Rails

同じ発想の、もっと古株もあります。Ruby on Rails です。こちらは部屋の名前まで決まっています。

$ ls app
assets  controllers  helpers  jobs  mailers  models  views
  • views ＝ 見せる
  • controllers ＝ 受ける
  • models ＝ 帳簿とやり取りする

誰が作っても、同じ間取りになります。 窮屈そうに聞こえますが、AIに書いてもらうときは、決まっているほうが話が早いです。「だいたいこう書く」が決まっているぶん、出てくるものも安定します。

家の間取りが違うだけで、住んでいる係は、ここまでずっと同じ3つです。

今日育てたものを、1枚の地図に

  • 真ん中に、バックエンド ── 作るほう。頼まれたら、その人のぶんを組み立てる
  • 左に、フロントエンド ── 見せるほう。出来たものを画面に出す
  • 右に、データベース ── 消えない置き場。書いておく、読み出す
  • その先に、外のサービス ── 天気・地図・支払い。作るほうが API で聞きに行く

今日のコーヒー屋で言うと、frontend/ が左、backend/server.js が真ん中、likes.json（いずれ帳簿になるもの）が右です。

今日は出てこなかった線が、もう1本あります。 天気とか、地図とか、支払いとか、外のサービスにつながる線です。作るほうがそこへ聞きに行く入口が、さっき出てきたAPI。全部を自分のところに持たなくていい、というのが、けっこう大事なところです。

この全部を、さっき出てきた「24時間ついているパソコン」の上に載せます。それが、公開する、ということです。

うまくいかないとき、地図のどこか

この地図は、うまくいかないときに効きます。

  • 押したはずのいいねが、開き直したら0に戻る → 置き場に届いていない
  • 押しても数が増えない → 見せるほうと作るほうの、あいだ
  • 天気や地図だけ出てこない → 外のサービスとの線
  • 自分のパソコンでは動くのに、人に見せられない → 借りる話。まだ自分の机の上にある

原因を自分で突き止める必要は、ありません。ただ、「どのあたりの話か」を添えて伝えると、Claudeの直しがぐっと速くなります。

「動きません」より「開き直すと消えるので、たぶん保存されていないと思う」のほうが、一発で直ります。

まとめ ── 書けなくていい。地図だけ

今日のコーヒー屋は、ファイル2個から始まって、最後は家ごと引っ越しました。 でも、住んでいる係は3つのままでした。

  • サーバー ＝ 要するにパソコン。頼まれたらファイルを渡している
  • フロントエンド／バックエンド ＝ 見せるほうと、作って覚えるほう。フォルダが2つある、それだけ
  • データベース ＝ 消えない置き場。メモが帳簿になっただけ
  • フレームワーク ＝ その3つが、あらかじめ組み上がった状態で配られているもの

中身を書けるようになる必要は、ありません。Claudeが「テーブルを足しますね」とか「フロント側を直しますね」と言ったときに、ああ、あそこの話だなと分かる。それだけで、やり取りがだいぶ楽になります。

次に何か作ってもらうときに、今日の地図を思い出してみてください。

動画版もあります

同じ内容を、実際にサイトを育てながら解説した動画版があります。いいねを押して0に戻るところ、フォルダが2つに割れるところは、動きで見たほうが早いので、あわせてどうぞ。

https://youtu.be/30lcjAa4S6Y

「Claude Codeを使うなら知っておきたい」シリーズは、これからも続けていきます。すでに公開しているのはこちらです。

ちなみに私は、GitHubをそのままノートの置き場にする、ブラウザから使えるMarkdownエディタを作っています。ログイン無しで触れるデモもあるので、よければ覗いてみてください。

https://www.usemarten.com/?utm_source=note&utm_medium=article&utm_campaign=note-webapp