LoginSignup
2
1

私の知る範囲のまとめです。
他にもあればぜひコメントお願いいたします。

.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など)
ソースマップと呼ばれるファイル

ソースマップ

クライアントに配信されるファイルは、開発時の整頓されたファイルではなくなっていることが多い。
クライアント側からデバックを行う場合、元の「開発時の整頓された」ファイルに戻したい。
その際に使用されるのがソースマップである

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1