~/VibeHandbook
$39

03 · 10

まとめと実践

重要なポイント

  • ウェブは延々と繰り返される一つのシンプルなダンスです:クライアント(たいていはブラウザ)が リクエストを送り、サーバーレスポンスを返します。あとはすべて、その上に乗った細部にすぎません。
  • は、ラベル付きの部品をつなぎ合わせたものです — scheme・host・path・query。メソッドは動詞です:GET は読み、POST は作り、PUT は更新し、DELETE は消します。
  • ステータスコードはサーバーの一目での判定です。4xx/5xx の区別がどこを見るべきかを教えてくれます:4xx はリクエストが間違っていた(不正な URL)、5xx はサーバー自身のコードが壊れた、ということです。
  • (鍵マーク)は会話を封じ、途中の誰にも読めないようにします — 本物のアプリは常に使います。クッキーは、複数のリクエストにまたがってサイトがログイン状態を覚えておく仕組みです。
  • フロントエンドはクライアント(ブラウザで動く)、バックエンドはサーバー(ロジックを動かしデータベースと話す)です。あなたが作るすべての機能は、このダンスのどちらかの側にあります。

やってみよう

どれでもいいのでウェブサイトを開き、ブラウザの開発者ツールを開きます(右クリック →「検証」、そして「Network」タブ)。ページを再読み込みします。リクエストのリストが埋まっていくのを見てください — 1 つのページリクエストに続いて、画像・フォント・スタイルのために数十ものリクエストが出てくるのが、説明したとおりです。一つをクリックして、その メソッド(GET)、ステータスコード(うまくいけば 200)、ヘッダーを見てください。いまあなたは、リクエスト/レスポンスのダンスがリアルタイムで起きるのを、それを読むための語彙とともに見ているのです。

この章のプロンプト

I'm learning how the web works as a beginner. Using my own app as the example:
<describe your app, or paste a URL or an error you're seeing>

- Walk me through the request/response cycle for one specific action
  (like loading a page or submitting a form), step by step.
- Tell me which part is the client (frontend) and which is the server (backend).
- If I'm seeing a status code or error, explain whether it's a 4xx (my
  request was wrong) or a 5xx (the server broke), and where to look.
- Keep it concrete and beginner-friendly — no assumed knowledge.

オフラインでも読みたい?

PDF + EPUB + ダウンロード可能なプロンプトライブラリ + バージョンアップデートを入手しよう。

$ PDFを入手 — $39