はじめに
チームで開発を進めている時、
ファイルを新規追加するにあたり、
.ts なのか .tsx なのか迷う時がありました。
「とりあえず動いているからいっか」ぐらいの認識でいましたが、
”イヤイヤ、今回はtsです”
”これはtsxなので、修正してもらっていいですか”
と言われることがあまりに多いので、
流石に調べてみることにしました。
適当でも動くには動く
なんやかんやで、大抵、なんとかなっちゃうみたいです。
しかし主に２つの目的でファイル名を変えるらしいです。
1.JSX をサポートしているかどうか
.tsファイル
・純粋なTypeScriptファイル
・JSX要素の追加はサポートしない
.tsxファイル
・JSXも使えちゃうファイル
🔳JSXってなんやねん？
マークアップとロジックを一緒のファイルに書けちゃう便利なやつ。
下記のように、関数の中のリターンで"h1"タグとか入れたりできるらしいです
JSXとReactはセットと思っていて間違いないみたい
参考にJSXのドキュメントも貼っときますね
https://ja.legacy.reactjs.org/docs/introducing-jsx.html
2. どんなことを書くためのファイルなのかを明示するため
一人で開発をやる人もいるかとも思いますが、
規模が大きくなるにつれて複数人で開発を行うことが主になるかと思います。
そんな時、ファイル名を変えておくことで仲間が理解しやすくなり、高速開発につながるようです。
（高速は言い過ぎかもですが、チリつもで結果的に意味のあるルールってやつみたいです)
特に人に見えるUIに関するコードを書くときは .tsx にするらしいです。Reactを使って書くファイルですね！
ひとりごと
やっぱり何かしらの意味があった。時間があるときもう少し詳しく勉強しよ・・・
気になったら調べるを癖づけなきゃ・・・