【React】JSXで条件分岐を記述する方法をまとめてみた

本記事の目次

ReactのJSXとは
ReactのJSX内ではif文が記述できない
ReactのJSXで条件分岐を記述する方法
まとめ

ReactのJSXとは

ReactにおけるJSXとは、Reactの要素をHTMLと同じように記述することのできる拡張構文です。

JSXで記述するのは実際にはHTMLではなく、JavaScriptのコードに変換されるものになります。

// 下のコードを変換すると、
import React from 'react';
const Render = () => {
  return <div>Sample</div>;
}

// HTMLではなく、下のようなJavaScriptコードに変換される
import React from 'react';
const Render = () => {
  return React.createElement('div', null, 'Sample');
}

そのため、実はReactを使う上でJSXの記述は必ずしも必要ではないのですが、ほとんどの場合はその便利さからJSXで記述していきます。

ReactのJSX内ではif文が記述できない

Reactを使っていると、何かしらの条件によって要素やコンポーネントを出し分けたいことが多々あります。

ログイン状態によって画面を変化させる
お問い合わせの段階（入力・確認・完了）を判断する
ユーザーの名前を出力する

しかし、ReactのJSX内でif文を記述するとエラーが出てしまいます。

const Render = () => {
  const isLogined = true;
  return(
    if(isLogined) {
      <p>ログイン済みです。</p>
    } else {
      <p>ログインしてください。</p>
    }
  );
}

// Parsing error: Unexpected token ~

そのため、JSX内で条件分岐を記述する際はちょっとした工夫が必要になるわけです。

ReactのJSXで条件分岐を記述する方法

①即時関数を利用して、条件分岐を記述する

まずは即時関数を利用する方法を見ていきましょう。

即時関数とは、定義された後すぐに実行される関数のことを言います。

const Render = () => {
  const isLogined = true;
  return(
    <>
      { (function(){
        if(isLogined) {
          <p>ログイン済みです。</p>
        }
        else {
          <p>ログインしてください。</p>
        }
      })() }
    </>
  );
}

即時関数の最後にセミコロン「 ; 」を記述してしまうとエラーになるので注意しましょう。

また、アロー関数で即時関数を記述することも可能です。

const Render = () => {
  const isLogined = true;
  return(
    <>
      { (() => {
        if(isLogined) {
          <p>ログイン済みです。</p>
        } else {
          <p>ログインしてください。</p>
        }
      })() }
    </>
  );
}

②三項演算子を利用して、条件分岐を記述する

JavaScriptの三項演算子を利用することで、簡単に条件分岐を記述することができます。

まずは三項演算子の基本構文から。

条件 ? trueの時の処理 : falseの時の処理

では次に、三項演算子を使用したサンプルコードを見てみましょう。

const Render = () => {
  const isLogined = true;
  return(
    <>
      { isLogined ? <p>ログイン済みです。</p> : <p>ログインしてください。</p> }
    </>
  );
}

少ないコードでJSX内で条件分岐を記述できるため、とても便利ですね。

三項演算子では、if文のように入れ子で記述することもできます。三項演算子の詳しい使い方については以下の記事で詳しく解説していますので、ぜひご覧ください。

【JavaScript】三項演算子（条件演算子）の使い方を徹底解説。

JavaScriptの三項演算子（条件演算子）では、条件分岐の処理を記述することができます。if文を使った記述よりも簡潔に記述できることが多く、ReactなどのJSX内の条件分岐の処理の記述でも活用されています。

③論理積演算子「&&」を利用して、条件分岐を記述する

条件がtrueの時のみに処理や表示を行いたい場合には、JavaScriptの論理演算子「&&」を利用すると良いでしょう。

条件 && trueの時の処理

三項演算子と同じような使い心地でJSX内で条件分岐を記述することができます。（falseの時は処理や表示を行わない）

const Render = () => {
  const isLogined = true;
  return(
    <>
      { isLogined && <p>ログイン済みです。</p> }
    </>
  );
}

④JSXの外で関数を定義して呼び出して、条件分岐を記述する

JSX内ではif文を使用することはできませんが、JSXの外であれば問題ありません。

そのため、JSXの外でif文で条件分岐を行う関数を定義し、JSX内でその関数を実行するという方法もあります。

const Render = () => {
  const isLogined = true;
  const loginMessage = () => {
    if(isLogined) { 
      return <p>ログイン済みです。</p>
    } else {
      return <p>ログインしてください。</p>
    }
  }
  return(
    <>
      { loginMessage() }
    </>
  );
}

これは三項演算子や論理演算子「&&」での記述が大変な、複雑な条件分岐などを記述するときに活用したい方法です。

JSXの外で定義した関数は、コンポーネントの形でも呼び出すことができます。

const Render = () => {
  const isLogined = true;
  const LoginMessage = () => {
    if(isLogined) { 
      return <p>ログイン済みです。</p>
    } else {
      return <p>ログインしてください。</p>
    }
  }
  return(
    <>
      <LoginMessage />
    </>
  );
}