◾️はじめに

React の勉強をちょこちょこやっていて、
必ず出てくる「JSX」が無視できない位、重要になってきたので
徐々にメモしていく

【１】JSX

* JSX = JavaScript Syntax Extension = JavaScriptの構文拡張
* HTMLのような見た目でUIを記述できる

【２】Reactでページを作成するイメージ

Case１：javascriptの場合

// [1] h1タグの子要素に'Hello, world!'を追加
const element = _reactJsxRuntime.jsx('h1', {
  children: 'Hello, world!',
})

// [1]で作成した要素を、ID「root」配下にレンダリング
ReactDOM.render(element, document.getElementById('root'));

レンダリング結果

<div id="root">
  <h1>Hello, world!</h1>
</div>

Case２：JSXの場合

// HTMLのように見えるが、裏では上のようなJavaScriptが動いている
// => なので、「JSX(JavaScriptの構文拡張）」と呼ばれている
const element = <h1>Hello, world!</h1>

【３】使用上の注意

１）if文は使えない

* if (isNew) { <div>...</div> } else { <span>...<span> } 的なことはできない
 => 対応策１〜２を参照
* 上に＋して、複数要素を返す場合は、FragmentやArrayを使う必要がある
* 条件式が複数の場合、JavaScriptの通常の論理演算子 (&&, ||, !) を使って条件式全体を括弧で囲む

対応策１：三項演算子 (? :)

<DialogActions>
  {/* 三項演算子で条件分岐 */}
  {isForNew ? (
    <Button
      onClick={handleAdd}
      variant="contained"
      disabled={saving}
      startIcon={saving ? <CircularProgress size={18} /> : <SaveIcon />}
    >
      {t("save")}
    </Button>
  ) : (
    // FragmentやArrayで複数の要素を返す
    <React.Fragment>
      <Button
        onClick={handleUpdate}
        variant="contained"
        disabled={saving}
        startIcon={saving ? <CircularProgress size={18} /> : <SaveIcon />}
      >
        {t("save")}
      </Button>
      <Button
        onClick={handleDelete}
        variant="outlined"
        disabled={saving}
        startIcon={saving ? <CircularProgress size={18} /> : <DeleteIcon />}
      >
        {t("delete")}
      </Button>
    </React.Fragment>
  )}
  <Button onClick={onClose} disabled={saving} startIcon={<CancelIcon />}>
    {t("cancel")}
  </Button>
</DialogActions>

対応策２：即時実行関数 (IIFE) / 論理AND演算子 (&&)

<!-- 論理AND演算子の場合は、条件式 && 要素 -->
<DialogActions>
  {/* ★ 新規作成 (isForNew) の場合のみ表示するボタン群 */}
  {isForNew && (
    <Button
      onClick={handleAdd}
      variant="contained"
      disabled={saving}
      startIcon={saving ? <CircularProgress size={18} /> : <SaveIcon />}
    >
      {t("save")}
    </Button>
  )}

  {/* ★ 更新/削除 (isForNewがfalse) の場合のみ表示するボタン群 */}
  {!isForNew && (
    <React.Fragment>
      <Button
        onClick={handleUpdate}
        variant="contained"
        disabled={saving}
        startIcon={saving ? <CircularProgress size={18} /> : <SaveIcon />}
      >
        {t("save")}
      </Button>
      <Button
        onClick={handleDelete}
        variant="outlined"
        disabled={saving}
        startIcon={saving ? <CircularProgress size={18} /> : <DeleteIcon />}
      >
        {t("delete")}
      </Button>
    </React.Fragment>
  )}

  {/* キャンセルボタンは常に表示 */}
  <Button onClick={onClose} disabled={saving} startIcon={<CancelIcon />}>
    {t("cancel")}
  </Button>
</DialogActions>