React初心者が最初に覚えたい！JSX（TSX）の基本ルールとHTMLとの違い
Reactを学び始めると、最初に戸惑うのがJSX（TSX）ではないでしょうか。
- JavaScriptなのにHTMLみたいなコードが書かれている…
- HTMLと何が違うの？
今回は、React開発で必ず使うJSX（TSX）の基本ルールと、HTMLとの違いについて、初心者向けに分かりやすく解説します。
JSXとは？
JSXとは、JavaScript（またはTypeScript）の中でHTMLのようなタグを書ける記法です。
Reactでは、画面に表示するUIをJavaScriptの中で記述します。
例えば、次のようなコードです。
function App() {
return (
<h1>Hello React!</h1>
);
}
export default App;
一見するとHTMLを書いているように見えますが、これはJavaScript（TypeScript）のコードです。
ポイント
JSXは「JavaScriptの中でHTMLのような構文を書ける仕組み」と考えると理解しやすくなります。
JSXの基本ルール
まずは必ず覚えておきたいルールが2つあります。
① 複数行をreturnするときは括弧で囲む
return (
<div>
<h1>タイトル</h1>
<p>説明です</p>
</div>
);
複数行になる場合は、丸括弧で囲むのが基本です。
② returnする要素は1つだけ
これはReact初心者が最もつまずきやすいポイントです。
NG例
return (
<h1>タイトル</h1>
<p>説明です</p>
);
これではエラーになります。
理由は、親要素が存在しないためです。
OK例
return (
<div>
<h1>タイトル</h1>
<p>説明です</p>
</div>
);
覚えておこう！
Reactではreturnする要素は必ず1つにまとめる必要があります。
HTMLとの違い
JSXではHTMLタグをほぼそのまま利用できますが、一部の属性は書き方が異なります。
class → className
HTMLでは
<div class="box">
ですが、JSXでは
<div className="box">
ReactではclassではなくclassNameを使用します。
style属性はオブジェクトで指定する
HTMLでは
<p style="color: blue;">
ですが、JSXでは
<p style={{ color: "blue" }}>
となります。
これはJavaScriptのオブジェクトを書いているだけです。
const style = {
color: "blue"
};
<p style={style}>
このように、変数にまとめて利用することもできます。
波括弧 {} の役割
JSXで最も重要なのが波括弧（{}）です。
波括弧の中にはJavaScriptの式を書くことができます。
const courseName = "React";
<p>{courseName}</p>
このように書くと、「React」と表示されます。
ポイント
変数・計算式・関数の戻り値など、JavaScriptの式は波括弧で囲んで表示できます。
コメントアウトの書き方
HTMLでは
<!-- コメント -->
ですが、JSXでは
{/* コメント */}
となります。
イベントの書き方
イベントの指定方法もHTMLとは少し異なります。
HTMLでは
<button onclick="click()">
ですが、JSXでは
<button onClick={handleClick}>
となります。
ポイントはイベント名をキャメルケースで記述することです。
- onClick
- onChange
- onSubmit
HTMLのonclickとは異なるため、最初は意識して覚えておきましょう。
実際には「TSX」を使う
ReactをTypeScriptで開発する場合、実際に編集するファイルは次のようになります。
App.tsx
TSXは
JSX + TypeScript
と考えると分かりやすいでしょう。
そのため、React + TypeScript環境ではJSXではなくTSXを書くことになります。
この記事のまとめ
- JSX（TSX）はJavaScript・TypeScriptの中でHTMLのような記法を書ける
- returnする要素は必ず1つにまとめる
- 複数行のreturnは括弧で囲む
- classではなくclassNameを使う
- styleはJavaScriptオブジェクトで指定する
- 波括弧 {} の中にはJavaScriptの式を書ける
- コメントは{/* … */}
- イベント名はonClickのようにキャメルケースで書く
- TypeScriptでは.tsxファイルを使用する
まとめ
JSX（TSX）はReact独自の記法ですが、基本的な考え方はHTMLとJavaScript（TypeScript）の組み合わせです。
最初はclassNameやstyle、波括弧の使い方などに戸惑うかもしれません。しかし、基本ルールを押さえてしまえば、HTMLやJavaScriptの知識をそのまま活かしてReact開発を進められます。
React学習では、今回紹介した内容が土台になります。まずは基本ルールをしっかり身につけていきましょう！
コメント