MIMEタイプとContent-Type完全リファレンスガイド
ブラウザがウェブサーバーにファイルをリクエストするたびに、サーバーは単にビットやバイトを送信するだけではありません。また、それがどのような種類のファイルであるかをブラウザに伝える「ラベル」も送信します。このラベルは MIMEタイプ（Multipurpose Internet Mail Extensions）と呼ばれ、Content-Type HTTPヘッダーを介して送信されます。
サーバーが誤ったMIMEタイプを送信すると、ブラウザは動画を再生する代わりにダウンロードしようとしたり、セキュリティ上の理由でスクリプトの実行を拒否したりすることがあります。
クイックリファレンス表：一般的なMIMEタイプ
| MIMEタイプ | 一般的な拡張子 | カテゴリ | 用途 |
|---|---|---|---|
text/html |
.html, .htm |
ウェブページ | 標準的なウェブページコンテンツ |
text/css |
.css |
スタイリング | カスケーディング・スタイル・シート |
application/javascript |
.js |
ロジック | ウェブアプリケーションスクリプト |
application/json |
.json |
データ | API用の構造化データ |
application/xml |
.xml |
データ | Extensible Markup Language |
text/csv |
.csv |
データ | カンマ区切り値 |
image/webp |
.webp |
メディア | モダンな圧縮画像形式 |
image/avif |
.avif |
メディア | 高効率画像形式 |
font/woff2 |
.woff2 |
フォント | モダンなウェブフォント形式 |
application/wasm |
.wasm |
コンパイル済み | WebAssemblyバイナリコード |
application/octet-stream |
.bin, .exe |
バイナリ | 汎用バイナリデータ（通常はダウンロードをトリガー） |
multipart/form-data |
N/A | アップロード | ファイルアップロードを含むフォーム送信に使用 |
1. 構造化データとAPI
現代のウェブアプリケーションは、フロントエンドとバックエンドの間で情報を交換するために、これらのタイプに大きく依存しています。
- application/json: REST APIの業界標準です。軽量で、JavaScriptによってネイティブにサポートされています。
- application/xml: 古い形式ですが、カスタムスキーマや複雑なバリデーションをサポートする強力な形式です。
- text/csv: データベースやスプレッドシートから大規模なデータセットをエクスポートする際によく使用されます。
2. メディアとアセット
高速なロード時間を確保するために、サーバーはモダンで高圧縮なメディア形式を正しく識別する必要があります。
- image/webp & image/avif: これらのモダンな形式は、JPEGやPNGよりもはるかに優れた圧縮を提供します。サーバーが正しいMIMEタイプを送信しないと、ブラウザが画像を正しくレンダリングできない場合があります。
- font/woff2: ウェブタイポグラフィに不可欠です。正しいMIMEタイプにより、ブラウザはフォントを迅速に展開できます。
3. 特殊なデータとバイナリデータ
- application/wasm: WebAssemblyが機能するために必要です。ブラウザは非常に厳格で、サーバーが明示的に
application/wasmContent-Type を送信しない限り、WASMモジュールのコンパイルを拒否することがよくあります。 - application/octet-stream: これはバイナリデータの「キャッチオール（何でも屋）」です。サーバーがファイルの正体を知らない場合、通常これにデフォルト設定されます。ブラウザはこれを、表示しようとするのではなく、ファイルをダウンロードする合図として扱います。
4. フォームとアップロード
ウェブサイトでフォームを送信すると、ブラウザは特定のMIMEタイプを使用して入力をエンコードします。
- application/x-www-form-urlencoded: シンプルなテキストベースのフォームのデフォルトです。URLクエリ文字列（
name=John&age=30）のように見えます。 - multipart/form-data: フォームに ファイルアップロード が含まれる場合に必要です。これにより、ブラウザは異なる種類のデータ（テキストとバイナリファイル）を「境界（boundary）」で区切って単一のリクエストで送信できます。
ファイルのMIMEタイプを確認する方法
- ブラウザで: DevToolsを開き、「ネットワーク（Network）」タブをクリックします。リクエストをクリックし、「レスポンスヘッダー（Response Headers）」セクションの「Content-Type」を探します。
- Linux / macOSで:
--mime-typeフラグを付けてfileコマンドを使用します。file --mime-type -b my-image.webp # 出力: image/webp
よくある質問 (FAQ)
Q: サーバーが誤ったContent-Typeを送信するとどうなりますか？
A: ブラウザはしばしば「MIMEスニッフィング（MIME Sniffing）」を行って正しいタイプを推測しようとします。しかし、セキュリティ上の理由（XSSからの保護など）から、現代のブラウザは非常に厳格になっています。スクリプトが application/javascript ではなく text/plain で送信された場合、ほとんどのブラウザは実行を拒否します。
Q: application/javascript はJSファイルにとって唯一の正しいタイプですか？
A: 歴史的には、text/javascript や application/x-javascript が使われてきました。かつては application/javascript が正式な推奨でしたが、最新の標準では実際には text/javascript を好む方向に再び戻っています。ほとんどのサーバーとブラウザは両方を問題なく処理します。
Q: なぜ「No 'Content-Type' header」エラーが出るのですか？
A: これは、サーバーがファイルタイプに関する情報を何も提供しなかったことを意味します。ブラウザは通常、text/plain または application/octet-stream にデフォルト設定されます。これにより、ページが正しく表示されなかったり、不要なダウンロードが開始されたりする可能性があります。
Tool3Mの関連ツール
- Base64エンコーダー/デコーダー: バイナリデータを、HTMLやCSSで使用するためのData URI（MIMEタイプを含む）に変換します。
- JSONフォーマッター:
application/jsonデータの検証と整形を行います。