読み方：ティーエスエックスファイル

.tsxファイル

.tsxファイルとは？

TypeScriptとJSX（JavaScript XML）を組み合わせたソースコードを保存するファイル形式。主にReactを用いたWeb フロントエンド開発で使用される。標準のファイル拡張子は「.tsx」。

TypeScriptは、JavaScriptに明示的にデータ型を指定する仕組みを加えた言語である。変数や関数の引数や戻り値に対して、あらかじめ「この値は数値である」「この値は文字列である」といった型を指定できる。コードを実行する前の段階でミスを発見しやすくなり、大規模な開発においてもコードの品質を保ちやすくなる。

JSXとは、JavaScriptのコードの中にHTMLに似た記述を直接書けるようにした構文拡張である。例えば、「<button>送信</button>」のような記述をJavaScript ファイル内に混在させることができる。ReactはこのJSXを用いてUIの構造を表現しており、通常のJavaScript ファイルでJSXを使う場合は拡張子を「.jsx」とする慣習がある。

.tsxファイルは、このJSXの記法をTypeScript上で使えるようにしたものである。TypeScriptのみのファイルは「.ts」、TypeScriptにJSXを加えたものが「.tsx」という棲み分けになっている。React コンポーネントを型安全に記述する際に使われることが多く、現代のフロントエンド開発では広く普及している。

Webブラウザは.tsxファイルをそのままでは解釈できないため、実際にWebページとして動作させるにはコンパイル（変換）が必要である。ViteやwebpackといったツールによってTypeScriptおよびJSXの記法を通常のJavaScriptに変換することで、ブラウザで実行できる形式に整えることができる。