この記事の要点
• Content-Typeはメッセージボディのデータ形式を示すヘッダー
• MIMEタイプは「タイプ/サブタイプ」形式で表現（例: application/json）
• ファイルアップロードにはmultipart/form-dataを使用する
Content-Typeとは
Content-Typeは、HTTPメッセージのボディに含まれるデータの形式（メディアタイプ）を示すヘッダーです。クライアントとサーバーが正しくデータを解釈するために必須の情報です。
POST /api/users HTTP/1.1
Content-Type: application/json
{"name": "Alice", "email": "alice@example.com"}
役割: サーバーが「このデータはJSON形式ですよ」「これはPNG画像ですよ」とクライアントに伝えるための仕組みです。
MIMEタイプの構造
MIMEタイプは「タイプ/サブタイプ」の形式で表現されます：
type/subtype[; parameter=value]
例:
application/json
text/html; charset=utf-8
multipart/form-data; boundary=----WebKitFormBoundary
| 要素 | 説明 | 例 |
|---|---|---|
| タイプ | データの大分類 | text, application, image |
| サブタイプ | 具体的な形式 | html, json, png |
| パラメータ | 追加情報（オプション） | charset=utf-8 |
ポイント: MIMEタイプは元々メール用の規格（MIME: Multipurpose Internet Mail Extensions）でしたが、HTTPでも採用されました。
主要なタイプ分類
| タイプ | 説明 | 例 |
|---|---|---|
| text | テキストデータ | text/html, text/plain, text/css |
| application | アプリケーションデータ | application/json, application/pdf |
| image | 画像データ | image/png, image/jpeg, image/svg+xml |
| audio | 音声データ | audio/mpeg, audio/wav |
| video | 動画データ | video/mp4, video/webm |
| multipart | 複数パートのデータ | multipart/form-data |
よく使うMIMEタイプ一覧
テキスト系
| MIMEタイプ | 説明 | 使用場面 |
|---|---|---|
text/html | HTML文書 | Webページ |
text/plain | プレーンテキスト | ログファイル、テキストファイル |
text/css | CSS | スタイルシート |
text/javascript | JavaScript | スクリプトファイル |
text/csv | CSV | データエクスポート |
# HTML
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html><html>...
アプリケーション系
| MIMEタイプ | 説明 | 使用場面 |
|---|---|---|
application/json | JSON | API通信（最重要） |
application/xml | XML | 古いAPI、設定ファイル |
application/pdf | 文書ダウンロード | |
application/zip | ZIP圧縮ファイル | ファイル配布 |
application/x-www-form-urlencoded | URLエンコードフォーム | HTMLフォーム送信 |
application/octet-stream | バイナリデータ（汎用） | ダウンロード |
# JSON API
POST /api/users HTTP/1.1
Content-Type: application/json
{"name": "Bob"}
実践メモ: 現代のWeb APIではapplication/jsonが事実上の標準です。XMLは徐々に減っています。
画像系
| MIMEタイプ | 説明 | 特徴 |
|---|---|---|
image/png | PNG | 可逆圧縮、透過対応 |
image/jpeg | JPEG | 非可逆圧縮、写真向き |
image/gif | GIF | アニメーション対応 |
image/svg+xml | SVG | ベクター画像 |
image/webp | WebP | 高圧縮、モダンブラウザ対応 |
# 画像レスポンス
HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 12345
（バイナリデータ）
その他
| MIMEタイプ | 説明 | 使用場面 |
|---|---|---|
audio/mpeg | MP3 | 音声配信 |
video/mp4 | MP4 | 動画配信 |
font/woff2 | WOFF2フォント | Webフォント |
charsetパラメータ
テキスト系のMIMEタイプでは、文字エンコーディングを指定できます：
Content-Type: text/html; charset=utf-8
Content-Type: application/json; charset=utf-8
主な文字エンコーディング:
| charset | 説明 |
|---|---|
utf-8 | Unicode（推奨、最も一般的） |
iso-8859-1 | Latin-1（欧米言語） |
shift_jis | Shift JIS（日本語、レガシー） |
ポイント: 現代のWebではcharset=utf-8が標準です。特別な理由がない限りUTF-8を使いましょう。
application/x-www-form-urlencoded
HTMLフォームのデフォルトエンコーディング方式：
POST /api/login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=alice&password=secret123
特徴:
- キー=値のペアを
&で連結 - スペースは
+または%20に変換 - 特殊文字はURLエンコード（
%エンコード）
制約:
- ファイルアップロードには使えない
- バイナリデータには不向き
<!-- HTMLフォーム例 -->
<form method="POST" action="/api/login">
<input name="username" value="alice">
<input name="password" type="password">
<button type="submit">Login</button>
</form>
multipart/form-data
ファイルアップロード用のエンコーディング方式：
POST /api/upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="title"
My Document
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; filename="document.pdf"
Content-Type: application/pdf
（バイナリデータ）
------WebKitFormBoundary7MA4YWxkTrZu0gW--
構造の説明
| 要素 | 説明 |
|---|---|
| boundary | パート境界の識別子（ランダム文字列） |
| Content-Disposition | フィールド名とファイル名 |
| Content-Type | 各パートのMIMEタイプ |
注意: boundaryは各パートの区切りを示す重要な値です。データ内に出現しないランダムな文字列を使う必要があります。
HTMLでのファイルアップロード
<form method="POST" action="/api/upload" enctype="multipart/form-data">
<input type="text" name="title" placeholder="タイトル">
<input type="file" name="file">
<button type="submit">アップロード</button>
</form>
JavaScriptでのファイルアップロード
const formData = new FormData();
formData.append('title', 'My Document');
formData.append('file', fileInput.files[0]);
fetch('/api/upload', {
method: 'POST',
body: formData
// Content-Typeは自動設定される（boundary含む）
});
実践メモ: FormDataを使う場合、Content-Typeを手動設定してはいけません。ブラウザが自動的にboundaryを含めて設定します。
Content-Typeの使い分け
APIリクエスト
| データ形式 | Content-Type | 使用場面 |
|---|---|---|
| JSON | application/json | 現代のREST API |
| URLエンコード | application/x-www-form-urlencoded | シンプルなフォーム |
| ファイルあり | multipart/form-data | ファイルアップロード |
APIレスポンス
# JSON
HTTP/1.1 200 OK
Content-Type: application/json
{"status": "success"}
# HTML
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>...
# ファイルダウンロード
HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: attachment; filename="report.pdf"
よくある間違い
1. Content-Typeの指定忘れ
# ❌ 悪い例
POST /api/users HTTP/1.1
{"name": "Alice"}
サーバーがJSONとして解釈できない可能性があります。
# ✅ 良い例
POST /api/users HTTP/1.1
Content-Type: application/json
{"name": "Alice"}
2. charsetの不一致
# ❌ 悪い例（UTF-8で送っているのにShift_JISと宣言）
Content-Type: text/html; charset=shift_jis
（実際はUTF-8のHTML）
文字化けの原因になります。
3. FormDataにContent-Typeを手動設定
// ❌ 悪い例
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data' // boundaryが欠落
},
body: formData
});
// ✅ 良い例
fetch('/api/upload', {
method: 'POST',
body: formData // Content-Typeは自動設定
});
Content-Typeの判定
サーバー側（Node.js / Express）
app.post('/api/data', (req, res) => {
const contentType = req.get('Content-Type');
if (contentType.includes('application/json')) {
// JSONとして処理
console.log(req.body);
} else if (contentType.includes('multipart/form-data')) {
// ファイルアップロードとして処理
console.log(req.files);
} else {
res.status(415).send('Unsupported Media Type');
}
});
クライアント側（JavaScript）
fetch('/api/data')
.then(response => {
const contentType = response.headers.get('Content-Type');
if (contentType.includes('application/json')) {
return response.json();
} else if (contentType.includes('text/html')) {
return response.text();
} else if (contentType.includes('image/')) {
return response.blob();
}
});
まとめ
Content-Typeはデータ形式を正しく伝えるために不可欠なヘッダーです。JSON API、HTMLページ、ファイルアップロードなど、場面に応じて適切なMIMEタイプを選択しましょう。
関連記事
- HTTPの基本 - リクエストとレスポンスの構造
- HTTPヘッダー入門 - リクエスト/レスポンスヘッダーの全体像
- HTTPメソッド - GET / POST / PUT / DELETE / PATCH の使い分け
参考リソース
- MDN - Content-Type
- IANA - Media Types Registry
- RFC 9110 - HTTP Semantics (Content-Type)
- MDN - MIME types (complete list)