開発者のためのファイル形式クイックリファレンス
カテゴリ:リファレンス
Webアプリケーションの開発では、ファイルのバリデーション、MIME タイプの判定、アップロード制限の設計など、ファイル形式に関する知識が頻繁に求められます。この記事では、開発現場でよく扱うファイル形式を一覧にまとめます。ブックマークしておけば、いつでも参照できるクイックリファレンスとしてご活用ください。
画像形式
| 拡張子 | MIME タイプ | 圧縮 | 透過 | 主な用途 |
|---|---|---|---|---|
.png |
image/png |
可逆 | 対応 | スクリーンショット、ロゴ、アイコン |
.jpg / .jpeg |
image/jpeg |
非可逆 | 非対応 | 写真、サムネイル |
.gif |
image/gif |
可逆 | 対応(1bit) | アニメーション、シンプルな図 |
.webp |
image/webp |
両方 | 対応 | Web全般(PNGの後継候補) |
.avif |
image/avif |
両方 | 対応 | 次世代Web画像 |
.svg |
image/svg+xml |
なし(XML) | 対応 | ベクター画像、アイコン |
<strong>注意:</strong>SVG はXMLベースのため、XSS(クロスサイトスクリプティング)のリスクがあります。ユーザーからアップロードされた SVG をそのまま表示するのは危険です。サニタイズ処理を必ず行いましょう。
ドキュメント形式
| 拡張子 | MIME タイプ | 内部構造 | 主な用途 |
|---|---|---|---|
.pdf |
application/pdf |
バイナリ | 印刷用ドキュメント、帳票 |
.docx |
application/vnd.openxmlformats-officedocument.wordprocessingml.document |
ZIP(XML) | Word 文書 |
.xlsx |
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
ZIP(XML) | Excel スプレッドシート |
.pptx |
application/vnd.openxmlformats-officedocument.presentationml.presentation |
ZIP(XML) | PowerPoint プレゼンテーション |
アーカイブ形式
| 拡張子 | MIME タイプ | 特徴 | 注意点 |
|---|---|---|---|
.zip |
application/zip |
最も普及、OS標準対応 | 日本語ファイル名の文字化け(UTF-8 vs CP932) |
.tar.gz |
application/gzip |
Unix/Linux 標準 | Windows では展開ツールが必要な場合あり |
.7z |
application/x-7z-compressed |
高圧縮率 | 専用ツール(7-Zip)が必要 |
.rar |
application/vnd.rar |
分割アーカイブ対応 | プロプライエタリ形式 |
テキスト・データ形式
| 拡張子 | MIME タイプ | 用途 | よくある問題 |
|---|---|---|---|
.csv |
text/csv |
データ交換、インポート/エクスポート | 文字コード、改行コード、BOM |
.json |
application/json |
API通信、設定ファイル | UTF-8 必須(RFC 8259) |
.xml |
application/xml |
設定ファイル、データ交換 | エンコーディング宣言との不一致 |
.txt |
text/plain |
ログ、メモ、README | 文字コードの自動判定が不安定 |
MIMEタイプのバリデーション
ファイルアップロード機能を実装する際、拡張子だけでなく MIME タイプも検証することが重要です。ただし、MIME タイプはクライアント側で偽装できるため、サーバー側でのマジックバイト(ファイルヘッダー)チェックも併用しましょう。
// PHP でのマジックバイトによる判定
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mimeType = $finfo->file($_FILES['upload']['tmp_name']);
$allowedTypes = [
'image/png',
'image/jpeg',
'image/webp',
'application/pdf',
];
if (!in_array($mimeType, $allowedTypes, true)) {
throw new Exception('許可されていないファイル形式です');
}
// Node.js での file-type ライブラリを使った判定
import { fileTypeFromFile } from 'file-type';
const type = await fileTypeFromFile('upload.png');
console.log(type);
// { ext: 'png', mime: 'image/png' }
テスト用ファイルのダウンロード
各形式のバリデーション処理やアップロード機能のテストには、DevLab のテストファイルをご活用ください。
- <a href="/ja/files/images/">画像ファイル</a> — PNG、JPG、WebP、GIF の各サイズ
- <a href="/ja/files/pdf/">PDF ファイル</a> — 各種サイズの PDF テストファイル
- <a href="/ja/files/zip/">ZIP ファイル</a> — アーカイブ処理のテスト
- <a href="/ja/files/csv/">CSV ファイル</a> — データインポートのテスト
- <a href="/ja/files/json/">JSON ファイル</a> — API テスト用
- <a href="/ja/files/txt/">テキストファイル</a> — テキスト処理のテスト
- <a href="/ja/files/broken/">壊れたファイル</a> — エラーハンドリングのテスト
まとめ
ファイル形式の正しい理解は、安全で堅牢なアップロード機能を実装するための基礎です。拡張子だけでなく MIME タイプとマジックバイトの両方で検証し、適切なバリデーションを行いましょう。このリファレンスをブックマークして、開発時にいつでも参照できるようにしておくことをおすすめします。
この記事で使えるテストファイル
- → <a href="/ja/files/images/" class="text-primary-600 dark:text-primary-400 hover:underline">画像テストファイル一覧(PNG / JPG / WebP / GIF)</a>
- → <a href="/ja/files/pdf/" class="text-primary-600 dark:text-primary-400 hover:underline">PDFテストファイル一覧</a>
- → <a href="/ja/files/zip/" class="text-primary-600 dark:text-primary-400 hover:underline">ZIPテストファイル一覧</a>
- → <a href="/ja/files/csv/" class="text-primary-600 dark:text-primary-400 hover:underline">CSVテストファイル一覧</a>
- → <a href="/ja/files/json/" class="text-primary-600 dark:text-primary-400 hover:underline">JSONテストファイル一覧</a>
関連記事
- → <a href="/ja/blog/file-validation-checklist/" class="text-primary-600 dark:text-primary-400 hover:underline">Webフォームのファイルバリデーション実装チェックリスト</a>
- → <a href="/ja/reference/magic-bytes/" class="text-primary-600 dark:text-primary-400 hover:underline">マジックバイト(ファイルシグネチャ)リファレンス</a>