Webアプリ入門 チートシート

エンジニアのための実践リファレンス

Webアプリケーション開発の基礎知識

インターネット、HTTP通信、API、データベースなど、Webアプリ開発に必要な基礎概念を1ページで網羅。実務で役立つクイックリファレンスとしてご活用ください。

HTTP/HTTPS REST API JSON クライアント/サーバー

URLの構造

https://example.com:8080/api/users?id=123

● プロトコル: https:// - 通信方式（HTTP/HTTPS）

● ドメイン: example.com - サーバーの場所

● ポート: :8080 - サービスの入口（省略可）

● パス: /api/users - リソースの場所

● クエリ: ?id=123 - 追加パラメータ

IPアドレスとDNS

IPv4

192.168.1.1

4つの数値（0-255）

IPv6

2001:db8::1

16進数表記

DNS（Domain Name System）
ドメイン名（example.com）をIPアドレスに変換するシステム

localhost = 127.0.0.1
自分のコンピュータ（開発環境で使用）

クライアント・サーバーモデル

クライアント

リクエスト送信

サーバー

レスポンス返却

● クライアント: ブラウザ、スマホアプリなど

● サーバー: データやページを提供

● リクエスト/レスポンスで通信

HTTPステータスコード

2xx 成功

200 OK - リクエスト成功

201 Created - リソース作成成功

3xx リダイレクト

301 Moved Permanently - 永久移動

302 Found - 一時的な移動

4xx クライアントエラー

400 Bad Request - リクエスト不正

401 Unauthorized - 認証が必要

404 Not Found - リソース未検出

5xx サーバーエラー

500 Internal Server Error - サーバー内部エラー

503 Service Unavailable - サービス利用不可

HTTPメソッド（CRUD操作）

GET（取得）

データの取得に使用

GET /api/users/123
安全・冪等

POST（作成）

新しいデータの作成

POST /api/users
{name: "Taro"}
非冪等

PUT（更新）

既存データの更新

PUT /api/users/123
{name: "Jiro"}
冪等

DELETE（削除）

データの削除

DELETE /api/users/123
冪等

JSON（JavaScript Object Notation）

基本構造

{
  "id": 123,
  "name": "山田太郎",
  "email": "yamada@example.com",
  "active": true,
  "tags": ["premium", "verified"],
  "profile": {
    "age": 30,
    "city": "Tokyo"
  }
}

データ型

文字列 - ダブルクォートで囲む

数値 - 整数、小数

真偽値 - true / false

配列 - [ ] で囲む

オブジェクト - { } で囲む

null - 値なし

REST API設計のベストプラクティス

リソース指向のURL設計

GET    /api/users          # 一覧取得
GET    /api/users/123      # 個別取得
POST   /api/users          # 新規作成
PUT    /api/users/123      # 更新
DELETE /api/users/123      # 削除

設計原則

● 名詞を使う（動詞NG）

✅ /users
❌ /getUsers

● 複数形を使う

✅ /users
❌ /user

● 階層構造で関連表現

/users/123/posts

● 小文字とハイフン使用

✅ /user-profiles
❌ /UserProfiles

Webアプリケーションの3層構造

フロントエンド

ユーザーが直接操作する部分

● HTML/CSS/JavaScript

● React, Vue, Angular

● ブラウザで実行

バックエンド

ビジネスロジック処理

● Python, Java, Node.js

● Django, Spring, Express

● APIの提供

データベース

データの永続化

● PostgreSQL, MySQL

● MongoDB, Redis

● データ管理・検索

実務で役立つTips

開発者ツール

ブラウザのF12キーで開発者ツールを開き、NetworkタブでHTTP通信を確認できます。

HTTPS必須

本番環境では必ずHTTPSを使用。通信内容が暗号化され、安全性が確保されます。

CORS対策

異なるドメイン間通信にはCORS設定が必要。サーバー側でAccess-Control-Allow-Originを設定します。

冪等性の理解

GET, PUT, DELETEは冪等（何度実行しても同じ結果）。POSTは非冪等（実行するたびに新規作成）。

よく使うポート番号（開発環境）

3000

React, Next.js

8000

Django, FastAPI

8080

Spring Boot

5432

PostgreSQL

3306

MySQL

6379

Redis

27017

MongoDB

443

HTTPS

HTTP通信の流れ

1 DNS解決
2 TCP接続
3 HTTPリクエスト送信
4 サーバー処理
5 HTTPレスポンス返却

HTTPS通信の場合は、TCP接続後にSSL/TLSハンドシェイクが追加されます