《JavaScript》React.js初学者のための、3分で読めるJSXの記法の基本。 #JavaScript

JSXはReact.jsを扱う上でかならず必要ではないですが、コードの見通しが良くなるので、多くのプロジェクトで採用されています。
JSX記法のルールには、つまづきやすい独特なポイントがあるので、React.js 初学者はコードの読み書きをする前に、頭に入れておいた方がいいポイントをまとめました🍟

JavaScriptの式を書く

JSXの中で、JavaScriptの式(JSX内の動的な値)を書くには、 {} で囲います。

条件分岐 (三項演算子)

if文で記述することも可能ですが、三項演算子の式を {} で囲んでやると、簡潔に記述できます。

render() {
  return (
    <div id="app">
　    { (nami) ? 'sanji' : null }
    </div>
  )
}

{} で囲んで、複数行コメント/* ... */を書きます。

render() {
  return (
    { /* this is comment */ }
    <div id="app">
　    { (nami) ? 'sanji' : null }
    </div>
  )
}

ループ

ループでは、要素ごとにユニークな key='' という props を与えます。これは、React.jsが差分を反映するのに目印になります。配列のインデックスを与えていますが、重複しないように(あとから配列の操作があるときなど)気をつけます。コンポーネントの階層が違えば、同じkeyを使えます。

render() {
  const member = ['ruffy', 'zoro', 'nami'];
  return (
    <ul>
      { member.map((el, i) => {
        return <li key={i}>{el}</li>
      }) }
    </ul>
  );
}

数値や真偽値を渡す

数値や真偽値を渡す場合は、文字列として評価されないように、 {} で囲います。

render() {
  return <button isloading={true} number={1}>button</button>;
}

HTMLとの違い

JSX記法ではHTMLを直接記述できるように見えますが、押さえておかないといけないポイントがいくつかあり、それをわかっていないとハマリどころになってしまうことも多いです。

CSSのクラス属性

CSSのクラス名の指定に class が使えません。class はJavaScriptで予約語なので、JSXでは className と記述します。

render() {
  return (
    <button
      className={`
        c-button
        ${ (loading) ? 'is-loading' : '' }
      `}
    >
      Button
    </button>
  );
}

ちなみにfor属性も、JavaScriptのfor文との衝突を避けるためhtmlForとする必要があります。

要素を閉じる

JSXではXHTMLみたいに、要素をかならず閉じます。少しHTML5とは異なる記述なので違和感がありますね。

render() {
  return <input type="text" />;
}

<br /> なども当てはまりますが、具体的な要素についての詳細は、DOM Elements - React に書いてあります。

属性値はキャメルケース

2語以上でできた属性値の名前は、tabIndexというようにキャメルケースで記述する必要があります。onClick とかややこしいですね。

render() {
  return <input type="text" tabIndex="1" onClick='{clickFunc}' />;
}

ただし、aria-* data-* 属性に関してはそのまま記述することができます。詳細はDOM Elements - Reactにまとまっています。

属性値をまとめて与える

オブジェクトを定義して、スプレッド演算子 ... を使うことで簡潔に記述できます。

let attr = {
  href: 'https://example.com',
  target: '_blank'
};

return <a {...attr}>Home</a>;

インラインスタイルはオブジェクトに

style 属性は、セミコロンで区切って列挙するのではなく、オブジェクトを与えます。そして、CSSのプロパティはキャメルケースで記述します。

let styles = {
  fontSize: '2rem',
  fontWeight: 'bold',
};

return <strong {styles}></strong>;

おわります。