コンテンツにスキップ
非エンジニアのためのVibeCoding入門

Webアプリの全体像

この章でわかること: Webアプリが動くとき、どこで何が起きているか。言葉の地図を 頭に持っておくと、AIへの指示も生成物のレビューも一気にやりやすくなります。

登場人物は5つだけ

Section titled “登場人物は5つだけ”

Webアプリは、ざっくり次の5つの役割でできています。レストランに例えると分かりやすいです。

用語役割レストランで言うと
フロントエンド画面に見えている部分。ボタンや文字、レイアウト客席・メニュー表
バックエンド裏側の処理。計算・保存・判定厨房
サーバープログラムが実際に動いているコンピュータ店舗そのもの
ホスティングそのサーバーを借りて公開する仕組みテナントを借りること
ドメインサイトの住所(例 example.com)お店の住所・看板

どう繋がるか

Section titled “どう繋がるか”

あなたが作ったプロトタイプを誰かが開くと、こう流れます。

  1. 利用者がブラウザにドメイン(住所)を入力する
  2. その住所をたよりに、対応するサーバーの場所が探し出される(住所から目的地を割り出すイメージ)
  3. ホスティング先のサーバーに「このページちょうだい」と届く
  4. 必要ならバックエンドが裏で処理(データを出す、計算するなど)
  5. 結果がフロントエンドとして画面に表示される

なぜ大事か

Section titled “なぜ大事か”

プロトタイプを顧客に見せるには、最低でも「ドメインを持って、ホスティングに置いて 公開する」必要があります。このサイトでは公開先に Vercel(ホスティング)を使い、 Next.js というフレームワークでフロントもバックも作っていきます。それぞれが 何の役割なのかは、この後の章で順番に見ていきます。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”