Zenn
🤑

.jsと.jsxの違いが気になった

2024/12/19に公開
Next.js
React
TypeScript
Babel
JSX
tech

今回は、Reactで使えるJSXについてです。
いままで何気なく使ってた.jsとか.jsxファイの違いって何だろって疑問に思ってしまったので、調べたことまとめます。

JSとJSXの違い

まずは、JSとJSXの違いからです。一言で言えば、JS構文をHTML風に書けるようにしたものがJSXです。上位互換みたいなものですね。と言ってもよくわからないと思うので、h1タグにHello world!を埋め込む方法をJS、JSXでそれぞれ見てみます。

// JSで書いた場合
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

これに対して、JSXはどうなるかというと、下記のようになります。

// JSXで書いた場合
const element = <h1 className="greeting">Hello, world!</h1>;

はいめちゃくちゃ見やすい！このように、開発者が書きやすく、みやすくしたものがJSXなんですね〜

もう少し詳しく知りたいという方はこちらで勉強してください。
https://kinsta.com/jp/knowledgebase/what-is-jsx/

JSXはブラウザが理解できないと言う話

実はめちゃくちゃ便利なJSXですが、ブラウザが直接理解できるわけではないんです。
ブラウザは、HTML, CSS, JavaScriptしか読み込むことができないため、JSXをブラウザが理解できるように変換してあげる必要があります。

👇こちらで詳しく解説してます！
https://zenn.dev/sanpi34/articles/45a415f615f347

どうやって変換してるのか

JSXはJavaScriptの拡張構文であり、ブラウザではそのまま解釈できません。しかし、BabelやTypeScriptのようなトランスパイラがJSXをJavaScriptに変換することで、ブラウザが理解できるコードにします。
https://babeljs.io/
https://www.typescriptlang.org/

最近では、ViteやNext.jsを使うことで、JSXの変換ツールを自動で導入してくれるようになっています。

なぜ.jsと.jsxがあるのか

開発者がわかりやすいように、明示的にJSXが書かれているファイルなのか、そうでないかを判別するために用意されています。

また、一部ツールや、エディタがJSXとJSを正確に処理するためにわけているらしいです。

.jsでもJSXが書ける理由

.jsファイルでもJSXを記述できる理由は、JavaScriptのツールチェーンやトランスパイラ（例えばBabel）がJSXを解釈する設定になっているためです。
ツールによっては .jsx としてファイルを明示的に区別しますが、ほとんどのモダンな環境では .js ファイルの中にJSXが含まれていても問題なく処理できるようになっています。

まとめ

今回は

  • JSとJSXの違い
  • ブラウザはJSXを読み込めない
  • ファイルの拡張子どっちがいいの？

について見てきました。その回答として、

  • JSXはJSの拡張言語だよ
  • JSXはツールによってトランスパイルされて、ブラウザが読み込めるようにしてくれてるよ
  • 拡張子はどっちでもいいよ

と言うことです！

Discussion