Webの仕組み
このページでは、Webサイトがどのように動いているかを学びます。プログラミングを始める前に、全体像を理解しておきましょう。
インターネットとWebサイトの仕組み
ブラウザとサーバーの関係
Webサイトを見るとき、裏側では以下のようなやり取りが行われています：
💻
あなたのPC
ブラウザ
→ リクエスト →
🌐
サーバー
Webサイトのデータ
💻
あなたのPC
ページを表示
← レスポンス ←
🌐
サーバー
HTML/CSS/JS送信
- ブラウザ：Chrome、Safari、Firefoxなど。Webサイトを表示するソフト
- サーバー：Webサイトのデータを保存している遠くのコンピュータ
- リクエスト：「このページを見せて」という要求
- レスポンス：サーバーからの返答（HTMLファイルなど）
URLとは何か
URL（Uniform Resource Locator）は、Webページの「住所」です。
https://www.example.com/products/item?id=123
| https:// | 通信の方式（安全な通信を使う） |
| www.example.com | ドメイン（サーバーの名前） |
| /products/item | パス（サーバー内の場所） |
| ?id=123 | クエリパラメータ（追加情報） |
フロントエンドとバックエンドの違い
Web開発は大きく2つの領域に分かれます。このサイトでは両方を学びます。
フロントエンド（Front-end）
ユーザーが直接見る・触れる部分
- ボタン、フォーム、画像
- ページのデザイン・レイアウト
- クリック時のアニメーション
使用技術：
HTML, CSS, JavaScript, Next.js
バックエンド（Back-end）
ユーザーからは見えない裏側の部分
- データの保存・取得
- ユーザー認証（ログイン）
- 計算処理、ビジネスロジック
使用技術：
Python, FastAPI, データベース
ポイント：このサイトでは、フロントエンドにNext.js、バックエンドにFastAPIを使います。両方をマスターすることで、一人で完全なWebアプリを作れるようになります。
APIとは何か
API（Application Programming Interface）は、フロントエンドとバックエンドが会話するための「窓口」です。
フロントエンド
Next.js
⇄
API
バックエンド
FastAPI
具体例：Todoアプリの場合
- GET Todoの一覧を取得する
- POST 新しいTodoを追加する
- PUT Todoを更新する（完了にする等）
- DELETE Todoを削除する
JSON形式について
APIでデータをやり取りするとき、JSON（JavaScript Object Notation）という形式を使います。
{
"id": 1,
"title": "買い物に行く",
"completed": false,
"createdAt": "2024-01-15"
}
JSONは人間にも読みやすく、コンピュータにも処理しやすいデータ形式です。
練習問題
Q1. 次のうち、フロントエンドの役割はどれ？
Q2. APIの役割として正しいものは？
Q3. 次のURLの「example.com」は何を表す？
https://example.com/about
まとめ
- ✓ Webサイトは、ブラウザがサーバーにリクエストを送り、レスポンスを受け取って表示する
- ✓ フロントエンド（画面）とバックエンド（裏側）の2つの領域がある
- ✓ APIはフロントとバックをつなぐ窓口で、JSON形式でデータをやり取りする
- ✓ このサイトでは Next.js（フロント）と FastAPI（バック）を使う