2018/04/24更新

[フロントエンド] React.jsのJSXで条件分岐を表現する方法（5つ）

こんにちは、@yoheiMuneです。
Reactのお仕事をやっていて、日々試行錯誤してます。JSX内で条件分岐を表現する方法についてブログに書きたいと思います。

何がしたいのか

HTMLを出力するrenderメソッドで、この条件ならこのUI、別の条件なら別のUIを出したい、ということは良くあると思います。それをReact.jsではどのように表現するのかについて、ブログにまとめておきたいと思います。

JSX内で条件分岐を表現する5つの方法

よく使われる手法として、5つあります。状況に応じて必要なものを使えたら良いと思います。

方法1：即時関数を使う

JSX内で即時関数を書き、その中で条件分岐を表現できます。

class Hello extends React.Component {
  render() {
    let isMorning = true
    return (
      <div>
        {(() => {
          if (isMorning) {
            return <span>Good morning</span>
          } else {
            return <span>Hello</span>
          }
        })()}
      </div>
    )
  }
}

この方法はJavascriptそのまま使えるのが良い反面、})()}のように記号が羅列されるので少し分かりづらいというデメリットもあります。

方法2：&&条件を使う

JSでは&&を用いて、条件がtrueの場合にだけ処理を実行する書き方があります。それをJSX内でも利用できます。

class Hello extends React.Component {
  render() {
    let isMorning = true
    return (
        <div>
          {isMorning && <span>GoodMorning</span>}
        </div>
    )
  }
}

上記の場合、isMorningがtrueの場合にのみ、<span>GoodMorning</span>が表示されます。
この方法はシンプルでオススメです。

方法3：三項演算子を使う

&&では条件がtrueの時にしか対応できませんが、falseの時にも対応したい場合には、三項演算子が便利です。

class Hello extends React.Component {
  render() {
    let isMorning = true
    return (
      <div>
        {isMorning ? <span>GoodMorning</span> : <span>Hello</span>}
      </div>
    )
  }
}

これもシンプルでオススメです。

方法4：関数でコンポーネントを表現する

JavaScriptの関数を定義すれば、それをJSX内でタグとして利用でます。条件に応じて表示を出し分ける関数を作成してJSX内で使うことで、条件分岐を表現します。

class Hello extends React.Component {
  render() {
    let isMorning = false
    
    function Greeting() {
      if (isMorning) {
        return <span>GoodMorning</span>
      } else {
        return <span>Hello</span>
      }
    }
    
    return (
      <div>
        <Greeting/>
      </div>
    )
  }
}

Greetingという関数を<Greeting/>というタグで参照しています。

関数は、以下のようにアロー形式でも定義可能です。

// Arrow function として定義してもOK.
let Greeting = () => {
    if (isMorning) {
      return <span>GoodMorning</span>
  } else {
  return <span>Hello</span>
  }
}

&&や三項演算子だと複雑になってしまう場合には、この方法も良いと思います。

方法5：メソッドとして用意する

条件に応じてレンダリングを行うメソッドを用意して、それを呼び出す方法もできます。

class Hello extends React.Component {

  // 条件に応じてレンダリング内容を変える.
  renderWithCondition(isMorning) {
    if (isMorning) {
      return <span>GoodMorning</span>
    } else {
      return <span>Hello</span>
    }
  }

  render() {
    let isMorning = true
        
    return (
        <div>
        {this.renderWithCondition(isMorning)}
        </div>
    );
  }
}

1つ前の関数を用意する方法でrenderメソッドが長くなる場合には、この方法も使います。

JSXをオンラインで試す

上記のコードも含めJSXをオンラインで試すことが出来ます。以下のFiddleのページで編集できるので、お試しに使ってみてください。

https://jsfiddle.net/69z2wepo/164279/

最後に

他にも、別コンポーネントとして切り出す（React.Componentを継承したクラスを別で作る）といった手段も考えられます。どれだけ条件が複雑なのか、再利用したいのか、によって取るべき手段は変わります。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！