React初心者必見！JSX記法の基本をわかりやすく解説

今回はReactの中でも非常に重要な要素であるJSX記法について解説します。

JSXはReactのコンポーネントを宣言する際に使用される記法で、HTMLのような見た目を持ちながらJavaScriptの力を活かすことができる記述方法です。

今までJavascriptを学習してきた方からすると書き方が少し独特なため、躓いてしまう方も多くReact学習のハードルを上げている部分でもあります。

本記事ではできる限りかみ砕いた解説を心掛けているので一度React学習に挫折してしまった方も是非、最後まで読み進めてみてください

JSX記法とは

JSX（JavaScript XML）は、Reactが提供する独自の記法です。これにより、UIコンポーネントをより直感的かつ簡潔に記述することができます。例えば、通常のJavaScriptでDOM要素を作成すると以下のような記述になります。

const element = document.createElement('h1');
element.textContent = '私は柴犬です';

上記の記述をJSX記法に変更を行うと以下のように書き換えることができます

const element = <h1>私は柴犬です!</h1>;

このように、HTMLに近い形で記述することができ、より短い構文でUIを構築することができるようになります。Reactを始める際にはJSXの基本を理解することがとても重要ということがわかりますね。

JSXは、HTMLのような構文を持ちながら、JavaScriptの式や変数を埋め込むことができます。基本の構文は以下の通りです。

const element = <タグ名 属性名="属性値">コンテンツ</タグ名>;

例えば、<h1>タグを使って見出しを作成する場合は以下の記述となります。

const heading = <h1>私は柴犬です!</h1>;

各タグには通常のHTML同様に属性を指定することもできます。

const wataMemo = <a href="https://it-memo.work">わたしのMemo</a>;

一般的にはHTMLでクラス属性を指定する場合は”class“と定義していたと思いますが、JSXでは”className”と定義する必要があることに注意しましょう。

const button = <button className="btn-primary">Click</button>;

あまり見慣れないかもしれませんが、classだけでは認識してくれなくなるので注意しましょう。

JSX内でスタイルを指定する際には、通常のHTMLとは異なり、JavaScriptのオブジェクト形式で指定しする必要があります。

以下は、生成したPタグに、文字色やフォントサイズの設定値を格納したオブジェクト”styles“を作成してstyle属性の設定値として代入しています。

const style = {
  color: "blue",
  fontSize: "16px"
};

const styledText = <p style={styles}>いいえ、わたしは秋田犬です！</p>;

JSXでは、中括弧{}を使ってJavaScriptの式や変数を埋め込むことができます。これにより、動的なコンテンツを生成を行うことができるようになります。

変数の展開

const dogName = "マロン";
const greeting = <p>Hello {dogName}!</p>;

条件分岐

const isLoggedIn = true;
const userGreeting = <p>{isLoggedIn ? "Welcome back!" : "Please log in."}</p>;

上記は三項演算子を利用した条件分岐を設定しています。変数isLoggedInがtrueであれば”Welcome back!”と表示されます。

このように変数や条件式も記述することが可能です。

Reactでは、コンポーネントを作成して再利用可能なUIパーツを作成していくことが一般的です。コンポーネントもJSXを使用して宣言することができます。

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const app = <Welcome name="秋田犬" />;

Reactを学習する中で避けては通れない最も重要なポイントがコンポーネントの作成です。

しっかりと自身で記述して慣れさせていきましょう

JSX記法はReactが人気な理由の一つであり、HTMLにJavaScriptの柔軟性を取り入れることができます。

今回は基本構文から始め、JavaScriptの式や変数の埋め込み、スタイルやクラスなどの属性指定方法、コンポーネントの作成方法を学びました。

これらの基礎を押さえて、より効果的にReactアプリケーションを開発していきましょう！