「Webサイトってどうやって動いているの？」「Webアプリを作るには何を学べばいい？」この記事ではWeb開発の全体像を初心者向けにわかりやすく解説します。
Web開発の全体像
Webサービスは大きく3つの要素で成り立っています。ブラウザ上で動くフロントエンド、サーバー側で処理するバックエンド、データを保存するデータベースです。
| 領域 | 役割 | 主な技術 |
|---|---|---|
| フロントエンド | ユーザーが見て操作する画面 | HTML / CSS / JavaScript |
| バックエンド | サーバー側のデータ処理・ロジック | Python / Node.js / PHP / Go |
| データベース | データの保存・管理 | MySQL / PostgreSQL / SQLite |
| インフラ | サーバー・ネットワーク環境の管理 | Linux / Nginx / Docker / AWS |
リクエストとレスポンスの仕組み
ブラウザでURLを入力してEnterを押すと、裏側では次のような流れが起きています。
| ステップ | 内容 |
|---|---|
| ①ブラウザがリクエスト送信 | URLをもとにDNSでIPアドレスを解決し、HTTPリクエストを送る |
| ②サーバーが処理 | バックエンドがリクエストを受け取り、必要ならDBを参照して処理する |
| ③レスポンスを返す | HTMLやJSON形式でブラウザにデータを返す |
| ④ブラウザが描画 | 受け取ったHTMLをレンダリングして画面に表示する |
フルスタック開発者とは？
フロントエンドとバックエンドの両方を扱える開発者をフルスタック開発者と呼びます。このPhase 8では、フロントエンドの基礎からバックエンドAPI・デプロイまで、フルスタック開発の全体像を学びます。
このPhaseで学ぶこと
| # | 内容 |
|---|---|
| 2〜4 | HTML・CSS・JavaScriptによるフロントエンド基礎 |
| 5 | HTTPとREST APIの仕組み |
| 6〜9 | FastAPIによるバックエンドAPI・DB・認証の実装 |
| 10〜11 | Nginx＋GunicornでのデプロイとDocker本番運用 |
| 12 | Webセキュリティ基礎 |
| 13〜14 | Git・GitHub・CI/CDパイプライン |
| 15 | チートシート |
まとめ
- Web開発はフロントエンド・バックエンド・データベースの3層構造で成り立っている
- ブラウザとサーバーはHTTPプロトコルでリクエスト・レスポンスをやり取りする
- このPhaseではHTML/CSSから始めてAPIデプロイまでを順番に学ぶ
コメント