js-mjs-jsx-ts-tsxの違い

js、mjs、jsx、ts、tsxって何なの？

さて今回はjavascriptの話です。

超簡単に言えば結局どれもjs＝Javascriptであり、Javascriptに出来ない事は他のjs以外の拡張にでも処理出来ません。それに加え、末尾xがついてるものはjs＋タグの構造です。
個々に説明しますね。

.js

一般的にバニラjsなどと呼ばれる無加工天然のjavascriptです。
全ての基盤であり、ブラウザが進化して例えば直接ts実行できるみたいな未来がない限り先ほど出した一覧のどの形式であってもこの純粋jsにトランスパイルする必要があります。

一般的なスクリプト体系と同様に変数の型が自動で判定されます。
また、変数や関数はグローバル領域「window.」に定義される為どこからでも参照もでき、定数やfreezeでなければどこからでも変更もできます。
つまり、スコープが超広い。

.mjs

端的に言えばモジュールJavascriptです。ES Modulesと言われます。
拡張子は区分けの為にmjsとする場合もありますが「.js」でも問題ありません。
呼ぶ時に<script type="module" src="script.js"></script>このtype部分で判定されます。
基本的にはほぼほぼバニラjavascriptで、トランスパイルなども不要です。
モジュールとなった事でスコープの範囲がそのmjs内でしか参照出来ません。
そうなると複数のmjsファイルの場合、他のファイルの変数や関数にアクセス出来ない…となりますが、mjs内でexportを指定した上で他のmjsはimportすれば参照出来る様になります。

スコープが排他された事でhtml側からのonclick等での関数実行も出来ません。
mjsを使う場合イベントリスナーが必要になります。
js側からhtml側をみてクリック等を見張るという形で実行します。

jsかmjsは読み込み方で変わるので以降のものもこのどちらかに属します。
つまり、mjs(jsx)みたいな事もあり得るわけです。

また、mjsは個々同士でexportとimport出来ますがpackage.jsonにまとめて管理する事が多いかと思います。

.jsx

簡単に言えば「HTML+javascript」の融合体です。
JavaScript XMLと言われます。

関心の分離はどうした？と初見ではかなり抵抗がありますがjs側で全てを管理するという事で現在は主流の仕組みです。
ブラウザ上で直接は利用出来ません。つまり必ずJavascriptに変換する必要があります。
一応CDNでバベルなどを経由すればjsxの直接リンクしてもリアルタイムでビルド出来ます。

.ts

雑に言えばjavascriptの強化版です。typeScriptと言われます。

Javascriptに型定義の概念を追加する事で開発の安定性を向上させる事に成功しました。
ブラウザ上で直接利用する事は出来ません。トランスパイルが必須です。

.tsx

typeScriptのJSX版です。typeScriptの型定義を使える上にhtmlタグも一緒にまとめて記述出来るという訳ですね。

当然ながらブラウザ上で直接は利用出来ません。トランスパイル必須です。

jsxの仕組みが主流という事はそうじてtsxも主流です。
どちらかと言えば強固であるtsxの方を主流というのが正しいかも。

現在のjavascriptフレームワークはReactが主流であり、大半はtsxなんじゃないかな。

その他

他にcjsやコーヒースクリプトなどもあるがもう古い技術として基本覚える必要はない。cjsは必要な時に調べれば十分。