Keyaki Labs — 2026年9月

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

1つのサイトを育てながら、フロント・バック・DBを見る

コードは1行も書きません。見るのは「ファイルがどこにあるか」だけです

Goal

読み終わったときに分かっていること

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

動作確認: Claude Code 2.1.261 / Next.js（create-next-app） / Rails 8.1.3.1

今日の題材

コーヒー屋のサイトを、最後まで育てる

Claude Code に一言頼んで作らせた、この2ファイルが出発点です。

$ claude -p "コーヒー屋さんの簡単な紹介サイトを1ページ作って"

$ ls
index.html  style.css

店名も、文章も、配色も、こちらでは1文字も指定していません

Step 1

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

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

この「ファイルを渡してくれるパソコン」が、サーバーです。
特別な機械ではありません。

Step 2

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

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

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

localhost は「自分自身」という意味の住所。
いま、このパソコンがサーバーです。

Step 3

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

パソコンを閉じたら、止まる
localhost は自分にしか通じない
夜も旅行中もつけっぱなしは、現実的ではない

だから24時間ついているパソコンを借りて、そこに置く。
レンタルサーバーも Vercel も、呼び方が違うだけです。

育てる ①

ボタンを足す。でも、忘れる

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

$ ls
app.js  index.html  style.css

押すと 1、2、3 と増える。でも開き直すと 0 に戻る。

数えているのはブラウザ。ブラウザは開き直したら忘れます

育てる ②

覚える係を、外に出す

$ ls -R
.:
backend  frontend

./backend:   likes.json  server.js
./frontend:  app.js  index.html  style.css

frontend ＝見せるほう（フロントエンド）
backend ＝数えて覚えるほう（バックエンド）

起きたことは「フォルダが2つになった」、それだけです

ここで前回のAPI

同じ数を、2つの出方で見ている

人間 ── localhost:3000 → コーヒー屋のページ
プログラム ── localhost:3000/api/likes → {"likes":3}

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

育てる ③

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

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

数を1つ覚えるならこれで十分。
でも会員1万人の名前と注文と在庫は、1枚のメモでは探せません。

だから専用の帳簿に替える＝データベース。「テーブルを作ります」＝その欄決め

育てる ④

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

$ ls -R app
app:          api  globals.css  layout.tsx  page.tsx
app/api/likes: route.ts

page（見せるほう）と api（受けるほう）が、同じ家の中に並んでいる。
これがフレームワークです。

まとめ

今日見た、3つの形

① 全部ブラウザの中 ── index.html と app.js。開き直すと忘れる
② 自分で2つに割る ── frontend と backend。あいだも自分でつなぐ
③ 組み上がった家に入る ── Next.js。つなぎ方も用意されている

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

もう1つの家

部屋の名前まで決まっている家

$ ls app          # Ruby on Rails
assets  controllers  helpers  jobs  mailers  models  views

views が見せる、controllers が受ける、models が帳簿とやり取りする。
誰が作っても同じ間取りになります。

AI に書いてもらうときは、決まっているほうが話が早い

The Map

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

真ん中にバックエンド ── 作るほう
左にフロントエンド ── 見せるほう
右にデータベース ── 消えない置き場
その先に外のサービス ── 天気・地図・支払い（API で聞きに行く）

この全部を借りたパソコンの上に載せる。それが「公開する」ということ。

使いどころ

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

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

「動きません」より「開き直すと消えます」のほうが、一発で直ります。

Wrap up

書けなくていい。地図だけ

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

「テーブルを足しますね」「フロント側を直しますね」と言われたときに、
ああ、あそこの話だなと分かる。それだけで十分です。

Keyaki Labs ／記事全文は note・keyaki-labs.com で公開しています

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