今更人に聞けない、拡張子の話

こんにちは、あるいはこんばんは
しおり🔖です。

今回は 拡張子 の話です。

.jpg とか .pdf とか .docx みたいな、ファイル名の後ろにつくやつ。見たことはある。でも正直言うと 全部「これ何？」って説明できるわけじゃない んですよね。私もそうです。個人開発始めてから種類増えて、知らない拡張子に出会うこともある。

自分は比較的にプライドが高い方なので「それも知らないの？」って思われそうで恥ずかしくて聞けない→ 黙ってググる、みたいな。わかる人いっぱいいると思うけど、今更人に聞けない層向けに、自分が調べたことを書いていきます。辞書とかじゃないので、気になるところだけ拾ってもらえれば大丈夫です。

プログラミングガチの初学者こそ拡張子についてちゃんと知った方がいいと思うのでよかったら最後まで見てくれると嬉しいです。

知っておくと楽な3つの言葉

記事の途中で何度か出てくる用語です。

テキストファイル … だいたい文字だけ。メモ帳で開ける .txt とか .csv とか。

バイナリファイル … バイナリ（binary＝2進数、0 と 1）で書かれたファイル、って意味。人間が読める文字だけ じゃなくて、画像の色データとか Excel の中身とかが入ってる。メモ帳で開くと 文字化け しがち。.jpg とか .xlsx とか。専用アプリで開くやつ、くらいの認識でいいです。

文字化け … メモ帳で開いたら ��� とか @#%! みたいになって読めないやつ。出たらいったん閉じて別の開き方考える。

文字化けについて友人の面白い記事があるのでリンクを貼っときます。

文字化け、Shift_JIS と UTF-8 の話

拡張子とは別の話なんですけど、テキストファイル だとここ地味に沼ります。

文字の保存の仕方を 文字コード って言います。日本語まわりだとよく出るのが Shift_JIS（シフトジス）と UTF-8（ユーティーエフエイト）。

ざっくり言うと、

• Shift_JIS … 昔から Windows・Excel 系でよく使われる。業務の .csv とか、古いシステムの出力でまだ見る
• UTF-8 … 今の Web・プログラミングではこっちが主流。Mac や VS Code もだいたい UTF-8 想定

同じ .csv でも、中身の文字コードが違うと文字化けする。 拡張子は .csv のままなのに、開き方や文字コードの指定が合ってない、みたいな。

対処としては、UTF-8 で保存し直すか、Excel の「データ」→「テキストファイルから」で文字コード指定、みたいな感じ。

わからなくなったら 「Shift_JIS ですか？ UTF-8 ですか？」 って人に聞くなりAIに聞くなりしていいと思います。

本題　拡張子ってなに？

ざっくり言うと ファイルの名札 です。

お気に入りグループの魅力について.docx

• お気に入りグループの魅力について … 自分で付けた名前
• .docx … 拡張子（「Word で開くやつ」って意味）
  

このファイルを開くとき、パソコンは .docx 見て 勝手にWord 起動しようとしてくれる。
私が一番嫌いな拡張子がこれです。
クソofクソ

拡張子には英語の略称が多い

拡張子	略称	ざっくり
.txt	text	テキスト
.pdf	Portable Document Format	見た目崩れにくい文書
.jpg	Joint Photographic Experts Group	写真向け画像

略称わかると「文字っぽい」「画像っぽい」って想像つきやすい。

拡張子だけじゃ足りないこともある

.dat みたいに data（データ）の略 だけど、中身ファイルごとにバラバラなやつ。ゲームのセーブ、古い業務システムの出力、自作アプリの設定…… 「データです」以上は名札から読み取れない。

あと 名札と中身は別物。.txt なのにプログラム書いてあったり、.js の元が .ts だったり。拡張子は「今このファイルをどう扱うか」のラベルに近い。

なんで拡張子あるの？

大きく3つくらい。

パソコンが開くアプリを決める … .mp3 なら音楽、.docx なら Word、みたいに 関連付け される。

人間が中身を想像しやすい … アイコンだけだとアプリで見た目違うこともあるので、.jpg 見た方が早い。

セキュリティ … かわいい写真に見えても .exe（Windows の実行ファイル）だったら要注意。Mac なら .app。見た目と拡張子一致してるか 地味に見た方がいい。
エロ画像がこれだったりする。

文書・オフィス系

.txt … text。装飾なし文字だけ。いちばんシンプル。メモ・ログ・READMEの下書き。とかで使ったりする。文字コードで文字化けすることがある。（俺は出逢ったことない）

.pdf … Portable Document Format。個人的には 拡張子界隈で最強クラス だと思ってます。

絶対崩れない わけじゃないですけど、見た目が環境に左右されにくい のがデカい。Mac でも Windows でもスマホでも、フォント入ってなくても、Word 入ってなくても、だいたい同じレイアウトで見える。提出・レポート・公式資料の共有 なら PDF 一択に近い。

資料の共有でPDFでやらんやつはなんやねんって思う😅

Word の .docx だと相手の環境で字体変わったり段落ズレたりすることがある。それがイヤなとき PDF に書き出す。「とにかく見た目そのまま渡したい」 なら PDF。

編集は Preview / Adobe 系。作るときは Word から「PDF として保存」で作ることが多い。

.docx … document。Word の文章。.doc は旧形式で、今は docx が普通。

.xlsx … XML Spreadsheet。Excel の表計算（新しめ）。中身実は XML ベース。表・数式・グラフ。.xlsm はマクロ入り。中身いじる前に確認 した方がいいやつ。

.pptx … PowerPoint のスライド。発表・プレゼン向け。

.tex … TeX（テフ）。LaTeX の原稿ファイル。数式・レポート・論文・卒論向け。\section{はじめに} みたいなコマンドで書く。そのまま渡すんじゃなくてコンパイルして PDF にする のが普通。

共著論文とかでもないのにクラウドLaTeXとOverleafを使ってるやつは情弱。

画像系

.jpg / .jpeg … 写真向け。多分拡張子の中だと一番見るやつ。
サイズ抑えやすい。何度も保存し直すと 画質落ちる（劣化） 。SNS・日常スクショ向け。透過（背景透明）は基本無理。

.png … Portable Network Graphics。イラスト・ロゴ・UI スクショ向け。背景透明 にできる。劣化しにくい。写真だとデカくなりがち。

.gif … 静止画もアニメ GIF も。昔ながらのループアニメ。Twitterでよく見るやつ。

.svg … Scalable Vector Graphics。拡大してもボケにくい。Web アイコン・ロゴ。中身テキストっぽい のでエディタで編集できることも。

.webp … Web 向け。jpg/png より軽くしやすい。最近のサイトで増えてる印象。正直見ない。

.heic … iPhone 標準。高画質で軽い。古い Windows だと開けない（後述）。互換性がカス

.ico … icon。ファビコン（ブラウザタブのアイコン）とか。

jpg と png どっち？

写真は jpg
透過したい・イラストは png。だいたいこれかな。

動画・音声系

.mp4 … 今の動画の主流。YouTube・スマホ系でだいたいこれ。

.mov … Apple 系。iPhone 撮影だとこれになりがち。Windows だと追加ソフト要ることも。

.mp3 … いちばん普通の音楽。サイズ小さめ。

.wav … 圧縮少なめ。音質いいけどデカい。編集の中間ファイルとか。

---

圧縮系

.zip … 複数ファイルまとめて小さくしたやつ。多分みんな知ってる。知らなかったらやばい。メール・Discord・提出用。Mac ダブルクリックで解凍。中身触る前に解凍。zip の中に zip もあるので解凍後フォルダ確認。

.tar / .gz / .7z … ほかの圧縮形式。.tar.gz は Linux 系・サーバー系でよく見る。（AI調べ。俺は全く知らない）

---

データ・設定系

表データや設定ファイルでよく見るやつ。

.csv … Comma Separated Values。カンマ区切りの表。中身テキスト。Excel とかで開ける。文字化け注意（ガチでクソ）。

名前,年齢,市区町村
田中,20,東京

Excel なら「データ」→「テキストファイルから」で文字コード指定できる。

.tsv … Tab Separated Values。タブ区切り。.csv と混同しやすい。個人的に好きな拡張子

.dat … data。「データです」以上の情報ない名札。何で開くかファイル次第。テキストのこともバイナリのこともある。

.ini / .conf / .cfg … 設定ファイル。キー=値 形式のことが多い。

theme=dark
fontSize=14

書き換えると動かなくなることもあるので、触る前に確認。

.bak … backup。予備コピー。本体壊したときの保険。

.tmp … temporary。作業中の一時ファイル。消えてもいいことが多い。

.log … log。いつ・何が起きたかの履歴。エラーとかで見る。

プログラミング・Web 系

開発始めると見るやつ。最初は名前だけ知ってれば十分 なものも多い。

Web の基本3言語

.html / .htm … HyperText Markup Language。Web ページの骨組み。

<h1>タイトル</h1>
<p>本文</p>

ブラウザで開くとページになる。.html と .htm 中身同じ。新しく作るなら .html。

.css … Cascading Style Sheets。色・レイアウト・フォント。

.js … JavaScript。ボタン押したら動く、みたいな 動き。最初はこれだけ覚えればOK くらいの温度感。

html が骨、css が見た目、js が動き くらいのイメージでだいたい合ってます。

ここら辺を理解したらホームページの作成をしてみましょう。😃

一応自分の記事の紹介もしときます。

JavaScript まわりで増えるやつ

拡張子	略称	いつ気にする？
.js	JavaScript	基本
.mjs	Module JavaScript	import / export 使うモジュール
.cjs	CommonJavaScript	require 系

「.js なのに import 効かない」みたいなとき、package.json の "type": "module" とか関係してる。最初は深追いしなくて大丈夫。

.ts / .tsx … TypeScript。JS に型足したやつ。.tsx は React の <Component /> みたいな JSX 含む版。

html/css/js 以外にもファイル増えてくる。設定ファイル、README、触ったらアカン系……みたいな。全部覚えなくていい。なんか設定っぽい、README っぽい、触るな系、くらいで十分。

プロジェクトの設定ファイル

プロジェクト開くと package.json とか yaml とか 設定用のテキスト が並んでる。書き方だけ違う。中身は全部文字。

.json … JavaScript Object Notation。{ "キー": "値" } 形式。

{
  "name": "shiori",
  "version": "1.0.0"
}

package.json とかでよく見る。コメント書けない（標準 JSON）。

.jsonc … コメント付き JSON。VS Code の settings.json など。
.json5 … もう少しゆるい JSON。最初は深追いしなくてOK。

.yaml / .yml … 字下げで書く設定形式。YAML Ain't Markup Language。GitHub Actions とか。中身のルール同じ。

.toml … キー = "値" みたいな書き方。Tom's Obvious Minimal Language。Rust の Cargo.toml とか。

.env … environment（環境変数）。API キーや DB の接続先。

API_KEY=xxxxxxxx
DATABASE_URL=postgres://...

パスワード・秘密情報。Git に上げない。.env.example はキー名だけの見本。

ドキュメント・ほかの言語

.md … Markdown。# 見出し で書く。Qiita、README、ブログ原稿（この記事も .md）。
.mdx … Markdown + React。Next.js 系。

Web 以外の言語もフォルダによって混ざってる。

.c / .h … C 言語。OS とか組み込みでよく見る。.h は header（ヘッダ）。関数の宣言だけ、みたいなやつ。

.cpp / .cc / .hpp … C++（シープラスプラス）。C より機能多い。ゲームとか性能重視のアプリで出会う。.cpp が本体。.hpp が C++ 用ヘッダ。.cc も cpp と同じ。

.java … Java。Android とか。
.go … Go。サーバー・CLI ツール。
.rs … Rust。Cargo.toml（↑）とセット。

.py … Python。AI・データ分析・スクリプト。
.swift … iPhone アプリ。
.sql … Structured Query Language。DB への命令。
.xml … eXtensible Markup Language。<tag>値</tag> 形式。

.sh / .bat … コマンドをまとめたスクリプト。ターミナルでの実行の手間を楽にできるので個人的にこれを知ってからクソ多用してる。

これ以外にもたくさんプログラミング関連の拡張子はいっぱいあります。初学者はやりながらで覚えていいと思います。

ツールが勝手に増えるファイル

npm install したりビルドしたりすると 勝手に増える やつ。基本触らない。

package-lock.json / yarn.lock / pnpm-lock.yaml … ライブラリのバージョン固定。Git には入れる。

.js.map … ソースマップ。JS を短く圧縮したあと、エラー出たとき 元の行番号に戻す ための対応表。デバッグ（バグ探し）用。普段触らなくていい。

.wasm … WebAsmbly（ウェブアセンブリ）。ブラウザで動く バイナリファイル（↑参照）。ゲームとか重い処理を速くするやつ。サイトが勝手に読み込む。メモ帳で開いても意味不明。

拡張子がない／変な名前のファイル

略称というより 役割で名前付いてる タイプ。

ファイル	意味
Dockerfile	Docker イメージの作り方
Makefile	ビルド・タスクの命令
LICENSE	ライセンス条文
.gitignore	Git で ignore（無視） する一覧
.editorconfig	エディタの共通設定

ドット（.）から始まるファイル は設定ファイル多い。.env もこれ。

---

混同しやすいペア

正直覚えなくていい←笑

ペア	覚え方
.html / .htm	同じ。.html でOK
.yaml / .yml	同じ。プロジェクトで揃える
.jpg / .jpeg	同じ
.csv / .tsv	区切りがカンマかタブか
.xlsx / .xls	新しい / 古い Excel
.js / .mjs / .cjs	普通 / モジュール / CommonJS
.json / .jsonc	コメント不可 / 可

絶対やっちゃダメなやつ３選（２選）

拡張子だけ書き換える

photo.jpg を photo.png にリネームしても 中身 jpg のまま。名札だけ変わるのでパソコンが混乱して「壊れてます」ってなる。

形式変えたいならアプリで 「名前を付けて保存」 とか 「書き出し」 から選ぶ。

心当たりない .exe / .app を開く

拡張子	環境
.exe	Windows の実行ファイル
.app	Mac のアプリ本体

ネットから落とした身に覚えのないやつ、安易にダブルクリックしない方がいい。

困ったとき

開くアプリ間違えた

Mac … 右クリック →「情報を見る」→「このアプリケーションで開く」→ 正しいアプリ →「すべてを変更」

Windows … 右クリック →「プログラムから開く」→「別のプログラムを選択」→ 正しいアプリ →「常にこのアプリを使ってファイルを開く」

友達からファイル送られてきたけど開けない

例：iPhone から .heic 来たけど Windows で開けない。

• 変換サイトで .jpg にする
• 「jpg で送り直して」って頼む

どっちかでだいたいいける。

知らない拡張子触れって言われた

1. コピー取る
2. 略称調べる（.dat → data）
3. メモ帳で開いてみる（文字化けしたら無理しない）
4. Mac なら file ファイル名（形式のヒント出ることある）
5. ぐぐる
6. それでもダメならAI聞く（まあ最初からこれでもいい）

拡張子を表示させる設定

「.jpg ファイル名に出てこない」場合 隠れてるだけ のことが多い。表示した方が便利。

Mac … Finder →「Finder」→「設定...」→「詳細」→「すべてのファイル名拡張子を表示」

Windows … エクススプローラー →「表示」→「ファイル名拡張子」にチェック

見えてないと photo.jpg だと思ってたのが実は photo.jpg.jpg だった、みたいな 二重拡張子 に気づけない。バカなのかなって思います。

表示は絶対したほうがいいです。まだしてない人でこの記事を見てる人がいたら今すぐやってください。

よくある勘違い

拡張子正しければ中身も正しい？
→ 違う。名札と中身は別。

全部覚えないとダメ？
→ ダメじゃない。.txt .jpg .pdf .html .js くらいからで十分。あとは出会ったとき調べればいい。

.dat 何で開く？
→ ファイル次第。拡張子だけじゃ決まらない。

エディタの色付けおかしい
→ 拡張子間違ってる可能性。VS Code は拡張子で言語推測してる。

まとめ

拡張子は ファイルの名札。

• .csv … カンマ区切りの表
• .dat … data の略。でも中身はファイル次第
• .js … JavaScript
• .env … 秘密情報。人に渡さない

全部暗記しなくていいです。コピー取る・略称調べる・メモ帳で試す・聞く でだいたいなんとかなる。

ここまで読んでくれてありがとうございます。

自分も全部知ってるわけではないので間違いとかあったら教えてください。