TypeScriptのtsxファイルとは？.tsとの違いを初心者向けに解説

TypeScriptのtsxファイルとは

TypeScriptのtsxファイルとは、TypeScriptの中でReactのJSX構文（HTMLのようなタグを含む書き方）を使うための拡張子です。「TypeScript tsx とは何か」を一言で言えば、「TypeScript × JSX」を組み合わせたファイルという意味で、Reactの開発では欠かせない存在です。

Reactのファイルって.tsのものと.tsxのものがあるけど、何が違うの？

実はそこ、ルールを知らないと地味に詰まりやすいところだから、今日ははっきりさせておこう

なぜ.tsと.tsxが分かれているのか

TypeScriptのファイルには、大きく分けて.tsと.tsxの2種類があります。この2つが分かれている理由は、JSXを書けるかどうかです。

• .ts：純粋なTypeScriptのコード（ロジック、関数、型定義など）を書くファイル
• .tsx：TypeScriptのコードに加えて、JSX（Reactコンポーネントの見た目部分）も書けるファイル

「.tsxのxはXML（JSXのX）を表す」と覚えておくと、役割がイメージしやすくなります。

.tsxを使う場面：JSXを書くとき

Reactのコンポーネントを作るとき、関数の中に見た目（HTMLのようなタグ）を書きます。この部分がJSXです。

// Greeting.tsx
type Props = {
  name: string;
};

function Greeting({ name }: Props) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

このように、関数の中に<h1>のようなタグを直接書くファイルは、拡張子を.tsxにする必要があります。propsの型定義については、こちらの記事も参考にしてください。

kinoblog

TypeScriptの配列・オブジェクトの型定義とは？書き方を初心者向けに解説

🕒️2026年8月2日

 配列・オブジェクトの型定義とはTypeScriptの配列・オブジェクトの型定義とは、変数の中身がどんなデータ構造になっているかをあらかじめ決めておく書き方です。実務でもっとも書く機会が多い型の一つなので、基本を押さえておくと学習効率が上がります。文字列とか数値の型は分かったけど、配列とかオブジェクトはどう書けばいいの？実はここが一番実務で使う頻度が高いところだから、今日はここだけに絞って整理してみようなぜ配列・オブジェクトにも型定義が必要なのかJavaScriptでは、配列やオブジェクトに何を入れても自由...

.tsファイルでJSXを書くとどうなるか

試しに、拡張子が.tsのファイルにJSXを書いてみるとどうなるか見てみます。

// Greeting.ts
function Greeting() {
  return <h1>Hello!</h1>;
  // Error: This expression is not callable.
  // 'JSX' refers to a UMD global, but the current file is a module.
}

.tsファイルの中ではJSXが正しく解釈されず、コンパイルエラーになります。「JSXを含むファイルかどうか」で拡張子を分ける、というルールがここで効いてきます。

拡張子の使い分けルール

実務では、次のようなシンプルな基準で使い分けるのが一般的です。

「見た目（JSX）を含むかどうか」で判断すると迷いません。API通信の関数については、こちらの記事も参考になります。

kinoblog

TypeScriptのPromiseとは？API通信の型定義を初心者向けに解説

🕒️2026年8月1日

 TypeScriptのPromise<T>とはTypeScriptのPromise<T>とは、非同期処理が最終的に返す値の型を指定する書き方です。API通信の結果に型を付けることで、レスポンスの中身をエディタの補完付きで安全に扱えるようになります。fetchでAPI叩くとき、TypeScriptだと何が変わるの？一番変わるのは「返ってきたデータの中身をちゃんと型で管理できる」ところだよこの記事では、TypeScriptでAPI通信を扱うときに必ず出てくるPromise<T>について、fetchを使った実例をもとに解説します。ジェネリクスの基本がまだ不安な場...

よくある勘違い：全部.tsxにすればいいわけではない

「迷ったら.tsxにしておけば安全」と考えてしまいがちですが、これはあまり良い習慣ではありません。実は、.tsxファイルの中では、型アサーション（値の型を強制的に指定する書き方）の一部の書き方が使えなくなるという制約があります。JSXのタグと記法が衝突してしまうためです。

ロジックだけのファイルまで.tsxにしてしまうと、こうした制約を無駄に受けてしまいます。JSXを書かないファイルは、素直に.tsのままにしておくのが安全です。

よくあるエラー

// utils.ts の中で
export const Loading = () => <p>Loading...</p>;
// Error: This expression is not callable.

これは、.tsファイルの中でJSXを返す関数を書いてしまったために起きるエラーです。ファイル名の拡張子を.tsxに変更すれば解決します。逆に、JSXを含まないのにエラーが出る場合は、tsconfig.jsonのjsxオプションが正しく設定されているかを確認してみてください。

よくある質問

Q. .tsxと.jsxの違いは何ですか？
A. どちらもJSXを書けるファイルですが、.tsxはTypeScriptの型チェックが効き、.jsxは通常のJavaScriptとして扱われます。

Q. すべてのファイルを.tsxにしても問題ないですか？
A. 動作はしますが、JSXを含まないファイルを.tsxにすると、型アサーションの一部の書き方が使えなくなるなどの制約を受けます。JSXを書かないファイルは.tsのままにしておくのがおすすめです。

Q. .ts→.tsxへの変更で他に注意点はありますか？
A. 拡張子を変更するだけで基本的には動作します。import文でファイルを参照している箇所も、拡張子を省略していれば通常は修正不要です。

まとめ：TypeScript tsx とは何かのおさらい

• .tsxはTypeScriptの中でJSXを書くための拡張子
• Reactコンポーネント（見た目を含む部分）は.tsx、ロジックだけのファイルは.tsに分ける
• JSXを含まないファイルまで.tsxにすると、型アサーションなどで余計な制約を受けることがある

公式ドキュメントにも、JSXの扱いについての詳しい解説があります。

▶ TypeScript公式ドキュメント：JSX
▶ React公式ドキュメント：Writing Markup with JSX

JSXがあるかないかで決めればいいだけなんだね、意外とシンプル

うん。ちなみに.tsxファイルだと使えない型アサーションの書き方もあって、それはまた次回にまとめるね