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>
    )
  }
}
上記の場合、isMorningtrueの場合にのみ、<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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。