開発者ツールとソース拡張リファレンス：WASM、TSX、GraphQLなど
モダンな開発者のツールキットは、専門的なファイル形式であふれています。コンパイルされた WebAssembly モジュールから、型定義ファイル、データベース用のドメイン固有言語まで、これらの拡張子を理解することは、モダンなコードベースをナビゲートするための鍵となります。
このリファレンスガイドでは、一般的な開発固有のファイル拡張子の「誰が、何を、なぜ」について説明します。
快速リファレンス表：開発ソース拡張子
| 拡張子 | 正式名称 | エコシステム | 用途 |
|---|---|---|---|
.wasm |
WebAssembly Binary | Web / エッジコンピューティング | 高性能 Web アプリ用のコンパイル済みコード |
.wat |
WebAssembly Text | Web 開発 | WASM の人間が読めるバージョン |
.map |
Source Map | Web 開発 | デバッグのために圧縮されたコードをソースにマッピングする |
.d.ts |
Type Definition | TypeScript | JavaScript ライブラリの形状を記述する |
.tsx / .jsx |
TypeScript/JS XML | React / Solid | 1つのファイルでロジックと UI を組み合わせる |
.vue / .svelte |
Vue/Svelte Component | Vue / Svelte | 単一ファイルコンポーネント (SFC) |
.astro |
Astro Component | Astro フレームワーク | アイランドベースの Web コンポーネント |
.mdx |
Markdown with JSX | ドキュメント | React コンポーネントを含むインタラクティブなドキュメント |
.prisma |
Prisma Schema | データベース / ORM | データベースモデルとリレーションの定義 |
.graphql / .gql |
GraphQL Query/Schema | APIs / GraphQL | API スキーマとデータクエリの定義 |
1. 高性能 Web (.wasm, .wat)
WebAssembly (WASM) を使用すると、C++、Rust、Go などの言語で記述されたコードを、ブラウザ上でネイティブに近い速度で実行できます。
- WASM: ブラウザが実行するバイナリファイル。これを直接編集することはありません。
- WAT: WASM の人間が読めるテキスト形式。Lisp のように見え（括弧が多い）、手動での検査や WebAssembly の仕組みを学ぶために使用されます。
2. TypeScript と React (.d.ts, .tsx, .jsx)
Web が「コンポーネントベース」の UI に移行するにつれて、HTML のようなタグと JavaScript/TypeScript のロジックを混在させるための新しい形式が必要になりました。
- JSX / TSX: React や同様のフレームワークで使用されます。関数の内部に
<div>タグなどを直接記述できます。 - D.TS: これらは「宣言」ファイルです。実行可能なコードは含まれていません。単に JavaScript ライブラリにどのような関数や変数が存在するかを TypeScript コンパイラに伝え、より優れた自動補完 (IntelliSense) を提供します。
3. モダンフレームワークコンポーネント (.vue, .svelte, .astro)
多くのモダンなフレームワークは、特定の UI 要素の HTML、CSS、およびロジックが1つのファイルに同居する 単一ファイルコンポーネント (SFC) を使用します。
- Vue & Svelte: コンポーネントロジックに固有の拡張子を使用します。
- Astro: 新しいフレームワーク（このサイト自体も Astro で構築されています！）で、他のフレームワーク（React、Vue、Svelte）のコンポーネントを組み合わせて使用できます。
4. データベースと API スキーマ (.prisma, .graphql)
アプリが複雑になるにつれて、データの構造やクエリの方法を定義するための専用の言語が必要になります。
- Prisma: モダンなデータベースツールキット。
.prismaファイルでテーブルとリレーションを定義すると、データベースが自動的に生成されます。 - GraphQL: REST API の代替。
.graphqlファイルは「スキーマ」（どのようなデータが利用可能か）と「クエリ」（具体的にどのデータを取得したいか）を定義します。
5. デバッグとドキュメント (.map, .mdx)
- Source Maps (.map): コードをデプロイするとき、通常はスペースを節約するために1行の読み取り不可能な形式に「圧縮（ミニファイ）」されます。
.mapファイルは、ブラウザのデバッガに対して、圧縮された行が元のソースコードのどの行に対応するかを伝え、本番環境でのデバッグを可能にします。 - MDX: 両方のいいとこ取りです。標準の Markdown を記述しながら、ドキュメント内で React コンポーネントをインポートして使用できます。インタラクティブな技術ドキュメントに最適です。
よくある質問 (FAQ)
Q: .wasm ファイルを直接実行できないのはなぜですか？
A: WASM は、仮想マシン（通常は Web ブラウザ内、または Wasmtime のようなランタイム）によって実行されるように設計された低レベルの形式です。メモリや入出力を管理するための「ホスト」環境が必要です。
Q: .map ファイルを Git リポジトリにコミットする必要がありますか？
A: 一般的には不要です。ソースマップはビルドプロセス中に生成されます。ただし、エラーが発生したときに読み取り可能なスタックトレースを表示できるように、エラー追跡サービス（Sentry など）にアップロードする必要があります。
Q: .gql と .graphql の違いは何ですか？
A: 技術的な違いはありません。どちらも GraphQL のスキーマとクエリに使用されます。ほとんどの IDE プラグインは両方を等しく認識します。
Tool3M の関連ツール
- JSON フォーマッタ: GraphQL クエリから返された JSON データの検査に便利です。
- コードミニファイアー: コードを圧縮し、パフォーマンス向上のためにソースマップを生成します。