~/VibeHandbook
無料 PDF

03 · 10

まとめと実践

重要なポイント

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

やってみよう

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

この章のプロンプト

私は初心者としてウェブの仕組みを学んでいます。自分のアプリを例にして:
<あなたのアプリを説明するか、URL や今見ているエラーを貼り付けてください>

- 一つの具体的な動作(ページの読み込みやフォームの送信など)について、
  リクエスト/レスポンスのサイクルを一歩ずつ順を追って説明してください。
- どの部分がクライアント(フロントエンド)で、どの部分がサーバー(バックエンド)かを教えてください。
- ステータスコードやエラーが見えている場合、それが 4xx(私のリクエストが
  間違っている)か 5xx(サーバーが壊れた)かと、どこを見ればよいかを説明してください。
- 具体的で初心者にやさしく — 前提知識なしで説明してください。

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

本編まるごとを PDF または EPUB で無料ダウンロード。