ReactJSのJSX内で条件式の書き方を３つ紹介【使いやすい順に解説】

JSX内で条件分岐させた返り値に変数を使いたかったがつまづいてしまったので一旦、JSXの条件式について整理しようと記事にした。

結論からいってしまうと、JSX内で条件式を使うやり方は限られていておよそ３つ程度。使いやすいと独断で選んだ順で紹介した。（Hooksの中でも同様に使える）

&&を使う条件式
三項演算子を使う条件式
即時関数を使う条件式
おまけ：条件式の返り値で変数を使う方法

&&を使う条件式

コードがスッキリしていて一番使いやすい。

conditionalRendering1.jsx

import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const isFlag = true;
  return (
  <Fragment>
    <div>{ isFlag && 'hello wolrd' }</div>
  </Fragment>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

{ 条件式 && レンダリングする内容 } で表現できます。
「なぜこれで動作するのか」というと、JavaScriptの仕様で { true && expression(表現) } の時は必ず expression と評価するため。

Reactの公式サイトにも記載されている。
(参考： React公式 - 論理 && 演算子によるインライン If)

ちなみに && を更に生やす書き方もできる。

conditionalRendering1.jsx

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const isFlag = true;
  const isSecondFlag = true;
  return (
    <Fragment>
      <div>{ isFlag && isSecondFlag && "hello wolrd" }</div>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

三項演算子を使う条件式

三項演算子は「宗教の問題」(ネットスラングで人によっては好き嫌いが分かれやすいことを宗教と揶揄した用語)がよく言われる。
JSX内でネストは深くなって欲しい人はあまりいないだろう。JSX内においてはコードの量が減るので使い勝手はとても良いので僕はよく使っている。

conditionalRendering2.jsx

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const isFlag = false;
  return (
    <Fragment>
      <div>{ isFlag ? 'hello world' : 'Not hello world' }</div>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

Not hello world がレンダリングされるサンプル。
{} で囲めばあとは通常の参考式とほとんど変わらない。 ; は不要なところは少し違うかもしれない。。

もちろん？JSXエレメントを返すこともできる。

conditionalRendering2.jsx

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const isFlag = false;
  return (
    <Fragment>
      <div>{ isFlag ? <div>hello world</div> : <div>Not hello world</div> }</div>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

即時関数を使う条件式

最後にこれ。
上の２つを見てきたが、基本的に {} で囲んだ後にJavaScriptと同じことをすれば良かったりする。即時関数も同様。

conditionalRendering3.jsx

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const isFlag = true;
  return (
    <Fragment>
      <div>
        {
          (() => {
            if(isFlag){
              return 'hello world';
            } 
          })()
        }
      </div>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

もちろん if文 に限らず switch文 に置き換えもできれば、 function を使った書き方もできるがそこのコードは JavaScript の基本のところなので割愛する。
動かしたい人はcodesandboxに即時関数を用意してあるので色々と試してみて欲しい。
(codesandbox: https://codesandbox.io/s/react-playground-forked-g482u?fontsize=14&hidenavigation=1&theme=dark)

即時関数が３つの中で最もコードがネストしやすいかと思う。
明示的に条件式を置いていることを示したい場合や三項演算子が嫌いな人には使えるかと。

おまけ：JSX内の条件式の返り値で変数を使う方法

自分がつまづいたところだけれど簡単に解決できた。

ダメだった例

omakeBad.jsx

 <div>
   { message ? {message}<span>🙅‍♂️</span> : undefined }
 </div>

返り値に変数と一緒にJSXエレメントを使いたかったが上の通りだと「 Cannot find name 'span' 」と怒られてしまった。

良かった例

omakeGood.jsx

 <div>
   { message ? <div>{message}<span>🙆‍♂️</span></div> : undefined }
 </div>

簡単で返り値全体にJSXエレメントの親要素で全体を囲ってあげるだけでOK。

簡潔に書いている記事が少なかったのでこの記事ではシンプルさを心がけた。他にも良い書き方があったら良ければコメントください