【React】JSXの基本と使い方を初心者向けに解説！

2022年6月23日2022年8月12日

Reactを勉強していたら急に「JSX」って言葉が出てきたんだよね・・・
英語だし、難しく感じるよ・・・

JSXっていう言葉だけを見ると難しく感じるよね。
でも意味と使い方が分かると難しくないから解説していくね！

JSXとは？

JSXはXMLのような記述をできるようにした構文拡張です。

「JSX」は「JavaScript」と「XML」を組み合わせた言葉です。

ReactはJSのライブラリのためHTMLを直接記述できません。
そのため内容を記述するときは構文拡張であるJSXを使います。

構文拡張とは特殊な用途に使うための便利な構文を、後から追加で使えるようにしたものです。

JSXの例

JSXで記述した例をもとに解説するね！

以下の構文は文字列でもHTMLでもありません。JSXで記述したものです。

const name = 'React';
const element = (
  <h1 className="sample-class">
    Hello, {name}!
  </h1>
);

JavaScriptの変数にHTML要素が代入されているので少し違和感があるかもしれませんが、これがJSXになります。

JSXは拡張構文なので以下のように変換され、コンパイルされます。

const element = React.createElement(
  'h1',
  {className: 'sample-class'},
  'Hello, React!'
);

コンパイル時の構文を見るとJSXを使わなくても記述できるのではと思う方がいるかもしれません。
実はReactはJSXを使うことは必須ではありません。

しかしコードを見て分かるように、React.createElementを使って書くのは手間がかかり煩雑になってしまいます。

JSXを使ったほうがHTMLのような記述ができるためシンプルで可読性がよいコードを書くことができます。

JSXで記述すると役立つエラーや警告もより多く表示できるため、JSXをおすすめします。

JSXはReactで使う特殊な構文だよ！
そしてJSXで記述することをおすすめするよ！

JSXについて分かったよ！
ReactではJSXを使ったほうが便利なんだね！

JSXの記述方法

JSXの記述について解説していくね！

式を埋め込む

式を埋め込むときは中括弧（{}）を使います。

const name = 'React';
const element = (<h1>Hello, {name}!</h1>);

以下のように関数を使うこともできます。

function helloName(name) {
  return 'Hello, ' + name + '!';
}

const name = 'React';

const element = (
  <h1>
    {helloName(name)}
  </h1>
);

式なので{1 + 1}などを埋め込むこともできます。

JSXは式となる

JSXはコンパイルした後、JavaScriptの関数呼び出しに変換されます。
これはJavaScriptオブジェクトであると言えます。

そのためJSX はif文やfor文の中で使うことができ、変数への代入、引数としての受け取りができます。
また関数から返すことも可能です。

function helloName(name) {
  if (name.length) {
    return <h1>{helloName(user)</h1>;
  } else {
    return <h1>Hello, Anonymous.</h1>;
  }
}

属性を埋め込む

属性を指定するときは引用符（"" or ''）を使うことができます。

const element = <a href="https://choippo.com/">choippo</a>;

属性に式を埋め込むときは中括弧を使います。

const url = 'https://choippo.com/';
const element = <a href={url}>choippo</a>;

属性に式を埋め込むときは中括弧を囲む引用符は書きません。注意しましょう。

const url = 'https://choippo.com/';
const element = <a href="{url}">choippo</a>;

属性の命名規則

JSXはJavaScriptに則した命名規則となります。

JSXの属性はHTMLの属性では指定できません。キャメルケースを使用します。

全ての属性はキャメルケースになりますが、以下の属性は少し特殊のため記述には注意しましょう。
これはJavaScriptの予約語と重複してしまうのを防ぐためです。

HTML	JSX
class	className
for	htmlFor

フラグメント

フラグメントとは子要素をまとめるものだよ。

JSXでは親要素を1つにしないといけません。

const element = (
  <div>
    <h1>Hello, React!</h1>
  </div>
);

親要素を複数にしてしまうとエラーになってしまいます。

const element = (
  <div>
    <h1>Hello, React!</h1>
  </div>
  <div>
    <h1>Hello, JSX!</h1>
  </div>
);

複数の場合も親要素が必要です。
しかし、不要な親要素を記述しないとけないこともあります。

そのときは、React.Fragmentを使うことで空の要素を作ることができます。

const element = (
  <React.Fragment>
    <div>
      <h1>Hello, React!</h1>
    </div>
    <div>
      <h1>Hello, JSX!</h1>
    </div>
  </React.Fragment>
);

毎回React.Fragmentを記述するのは少し煩雑なので省略することができます。

子要素をまとめるときは省略した<>と</>のタグを使うことが多いです。

const element = (
  <>
    <div>
      <h1>Hello, React!</h1>
    </div>
    <div>
      <h1>Hello, JSX!</h1>
    </div>
  </>
);

終了タグがないタグのとき

終了タグがないときは最後に/を入れて閉じます。

inputタグやimgタグ、brタグなどには注意しましょう。

const element = (
  <div>
    <input type="text" />
  </div>
);

コメントアウト

コメントは/* */と//を使うことで記述できます。

const element = (
  <div>
    {/* 1行でコメント */}

    {/*
      複数行でコメント1
      複数行でコメント2
    */}

    {// コメント（最後の閉じ中括弧は改行すること）
    }
  </div>
);

まとめ

少し特殊な構文だけどJSXについて解説したよ！

JSXはXMLのような記述ができるようにした構文拡張
ReactでJSXを使うことは必須ではないが、JSXを使ったほうが簡潔に記述することができる
式を埋め込むときは中括弧（{}）を使う
属性はキャメルケースになる
親要素は1つにしなければいけない
終了タグがないタグには最後に/を付ける
コメントアウトを入れることもできる

JSXという言葉を見たとき難しいものだと思ったけど、
内容が分かったら便利なものだと分かったよ！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！