JSX：構文とトランスパイル
JSX を書き、Babel が React.createElement 呼び出しへコンパイルする仕組みを理解し、ルート要素を 1 つにする、className を使う、自己終了タグを使うというルールを適用します。
「JSX：構文とトランスパイル」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
JSXとは
JSX（JavaScript XML）は、JavaScript内にHTMLのようなマークアップを記述できる構文拡張です。ブラウザーの機能ではなく、実行前にBabelやTypeScriptによってJavaScriptの関数呼び出しへ変換されます。
JSXのトランスパイル
BabelはJSXを React.createElement() の呼び出しに変換します。新しいJSX変換（React 17以降）ではReactをインポートする必要がなく、Babelが必要なインポートを自動的に追加します。
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });JSXのルール：ルート要素は1つ
JSX式には、ルート要素が必ず1つだけ必要です。兄弟要素を <div> で囲むか、Fragment（<></> または <React.Fragment>）を使って、余分なDOMノードの追加を避けてください。
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);classNameとhtmlFor
JSXの属性にはcamelCaseを使います。classとforはJavaScriptの予約語であるため、代わりにclassNameとhtmlForを使います。
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>自己終了タグ
JSXでは、すべてのタグを正しく閉じる必要があります。子要素を持たない要素には、自己終了スラッシュを使います：<img />、<br />、<input />。
JSX内の式：{}
波括弧を使うと、任意のJavaScript式をJSX内に埋め込めます。変数、関数呼び出し、三項演算子、算術演算をすべて使用できます。文（if、for）は使用できません。
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSXと文字列
隣接するテキストとJSX式は自動的に連結されます。要素内では、テキストと式を自由に組み合わせられます。
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>何もレンダリングしない：nullとfalse
nullまたはfalseを返すと、何もレンダリングされません。どちらも有効なJSXの値であり、DOM出力を生成しません。条件付きレンダリングに便利です。
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}style属性 — オブジェクト構文
JSXのインラインスタイルには、文字列ではなくオブジェクトを使います。プロパティ名はcamelCaseで記述します。
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSXはJavaScript
JSXはJavaScriptにコンパイルされるため、変数に代入したり、関数から返したり、propsとして渡したり、配列に格納したりできます。React要素は通常のJavaScriptオブジェクトです。
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScriptとJSX：.tsxファイル
JSXを含むTypeScriptファイルには、.tsx拡張子を使います。TypeScriptはJSXの型チェックを行い、コンパイル時にpropsの型エラーや不足しているpropsを検出します。
クイックチェック
JSXでは、なぜclassの代わりにclassNameを使うのですか。
復習：JSX
JSXはReact.createElement()の構文糖です。各式には、1つのルート要素またはFragmentを置きます。予約語属性にはclassNameとhtmlForを使います。空要素はすべて自己終了させます。{}で式を埋め込みます。null/falseを返すと何もレンダリングされません。インラインスタイルにはcamelCaseのオブジェクト構文を使います。JSXはJavaScriptであり、値として扱います。
よくある質問
「JSX：構文とトランスパイル」レッスンは無料ですか？
はい。「JSX：構文とトランスパイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「JSX：構文とトランスパイル」で何を学びますか？
JSX を書き、Babel が React.createElement 呼び出しへコンパイルする仕組みを理解し、ルート要素を 1 つにする、className を使う、自己終了タグを使うというルールを適用します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「JSX：構文とトランスパイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。