JSXとは何か？TypeScriptとの関係を調べた備忘録

JSXとは何か？TypeScriptとの関係を調べた備忘録

ReactやTypeScriptに触れ始めると、.ts や .tsx といった見慣れない拡張子に出会います。また、<div>Hello</div> のようなHTMLっぽいコードがJavaScript内に登場することにも戸惑うかもしれません。

この記事では、JSXとは何か、TypeScriptとの関係、そして関連するファイル拡張子までまとめて見ました。

---

JSXとは何か？

JSX（JavaScript XML）は、JavaScript内でHTMLのような構文を記述できるReactの独自記法です。

例：

const element = <h1>Hello, world!</h1>;

これはReact内部では以下のように変換されます：

const element = React.createElement('h1', null, 'Hello, world!');

なぜ使うのか？

• UIを直感的に書ける
• JavaScriptとの統合がスムーズ
• Reactの仮想DOMと連携しやすい

---

JSXの基本ルール

ルール	例
1つの親要素で囲む必要がある	<div><h1></h1><p></p></div>
classではなく className を使う	<div className="box"></div>
属性名は camelCase	onClick, tabIndex など
空要素は <br /> のように閉じる必要あり	<img src="..." />

---

🛠 JSXでよく使う機能

1. 変数の埋め込み

const name = "Zenn";
const greeting = <p>Hello, {name}!</p>;

2. 条件分岐（条件レンダリング）

const isLoggedIn = true;
const content = <div>{isLoggedIn ? "Welcome!" : "Please log in"}</div>;

3. 配列のループ表示

const items = ["a", "b", "c"];
const list = <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;

---

.ts と .tsx の違い

ReactでTypeScriptを使う場合、ファイル拡張子が以下のように使い分けられます。

拡張子	用途
.ts	通常のTypeScriptファイル。JSXを含まない。
.tsx	JSXを含むTypeScriptファイル。Reactコンポーネントなどに使う。

例：

// MyComponent.tsx
const MyComponent = () => {
  return <div>Hello</div>; // JSXを含むので .tsx
}

---

.ts と .tsx をどうやって使い分けるのか

もちろんです。「どうやって .ts と .tsx を使い分けるのか？」という観点にフォーカスしたZenn向け記事のドラフトを以下にまとめました。

---

.ts と .tsx の違いとは？React×TypeScriptでの正しい使い分け方を解説

React + TypeScript のプロジェクトを始めると出てくる疑問の一つが、

「.ts と .tsx、どうやって使い分ければいいの？」

というもの。この記事では、両者の違いと、実務でどう使い分ければいいのかをわかりやすく解説します。

---

.ts と .tsx の違いは「JSXを含むかどうか」

まず大前提として、.tsx は JSX を含む TypeScript ファイル、.ts は JSX を含まない通常の TypeScript ファイルです。

JSXとは？

JSX（JavaScript XML）は、Reactの構文で、JavaScript内にHTMLのようなコードを記述できる仕組みです。

// JSXを含む例
const MyComponent = () => <div>Hello</div>;

このように <> で囲まれたコードを書くときは .tsx にしないと構文エラーになります。

---

どう使い分けるべきか？

.ts に向いているファイル

• ユーティリティ関数
• 型定義（types.tsなど）
• APIクライアント
• ロジック処理のみのコード（JSXを使わない）

// utils/calc.ts
export const sum = (a: number, b: number) => a + b;

---

.tsx に向いているファイル

• Reactコンポーネント
• ページやUIのレイアウト
• JSX構文を使うすべてのコード

// components/Button.tsx
export const Button = ({ label }: { label: string }) => {
  return <button>{label}</button>;
};

---

使い分けの目的は「明確な責務の区分」と「構文エラーの防止」

1. 構文エラーを防ぐ

.ts ファイルでは JSX を使えません。うっかり JSX を書いてしまうと TypeScript に怒られます。

2. 役割の違いを明確にする

• .ts → ロジック・データ・型
• .tsx → 見た目・UI

拡張子を見ただけで「このファイルは何をしているか」が一目でわかるようになります。

3. エディタやビルドの最適化

VSCode などのエディタは .tsx を JSX として扱い、自動補完や構文チェックを最適化してくれます。また、TypeScript や Babel のビルドでも処理が最適化されます。

---

実務でのTips

• Reactコンポーネントは必ず .tsx にする：JSXを書く可能性があるから。
• ロジックや型だけなら .ts にする：軽量・明快な構成になる。
• まず .ts で始めて、JSXを書きたくなったら .tsx に変えるという運用もアリ。