私の知る範囲のまとめです。
他にもあればぜひコメントお願いいたします。
.js
| 拡張子 | 説明 |
|---|---|
.js |
JavaScriptで書かれたプログラムを保存したファイル |
モジュール関連
| 拡張子 | 説明 |
|---|---|
.mjs |
ESM（Ecma Script Module）であることを明示する |
.cjs |
CommonJSモジュールであることを明示する |
(.js) |
Node.jsの設定や、script type="module"で呼び出しを行う場合、モジュールとして扱われる |
JS・HTMLのミックス（テンプレート言語）
| 拡張子 | 説明 |
|---|---|
.ejs |
HTMLにJSを埋め込む（Embedded JavaScript） |
.jsx |
JSにHTMLを埋め込むような形。Reactなどで使用される |
.ejsの例
<!DOCTYPE html>
<html>
<head>
<title>EJS Example</title>
</head>
<body>
<h1>Hello, <%= user.name %>!</h1>
<ul>
<% users.forEach(function(user) { %>
<li><%= user.name %></li>
<% }); %>
</ul>
</body>
</html>
.jsxの例
import React from 'react';
const UserList = ({ users }) => {
return (
<div>
<h1>Hello, {users[0].name}!</h1>
<ul>
{users.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
TypeScript
| 拡張子 | 説明 |
|---|---|
.ts |
TypeScriptで書かれたプログラムを保存したファイル |
.tsx |
.jsxのTypeScript版 |
その他
JSON関連
| 拡張子 | 説明 |
|---|---|
.json |
JavaScript オブジェクトの構文に従ったテキストベースのデータ形式 JavaScriptとは別物と考えて良い |
.jsonc |
JSON形式を拡張したもの。特徴は「コメント機能」「末尾の,を許容」 |
言語・フレームワーク特有の拡張子
| 拡張子 | 説明 |
|---|---|
.vue |
Vue.jsで使用される拡張子 |
.coffee |
昔流行った"AltJS"の一種であるCoffieScriptの拡張子 |
.purs |
"AltJS"の一種であるPureScriptの拡張子 |
ソースマップ
| 拡張子 | 説明 |
|---|---|
~.map( .js.mapなど) |
ソースマップと呼ばれるファイル |
ソースマップ
クライアントに配信されるファイルは、開発時の整頓されたファイルではなくなっていることが多い。
クライアント側からデバックを行う場合、元の「開発時の整頓された」ファイルに戻したい。
その際に使用されるのがソースマップである