【React】TypeScriptでif文の条件分岐を書く方法ご紹介。

今回の記事はTypeScriptベースのReactでif文の条件分岐を書く方法をご紹介する記事です。初心者にも分かりやすいように記載するので是非参考にしてみてください。

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次にmap関数で処理を行う方法をご紹介します。

Reactでif文を使って条件分岐

if文の使い方は基本的に他の言語と変わりありません。

作成した「App.tsx」を下記のように書き換えましょう。

const flag:boolean = false;

const App: React.VFC = () => {
  if(flag==false) {
    return (
    
      <div>
        FALSEです。
      </div>
    );
  } else {
    return (
    
      <div>
       TRUEです。
      </div>
    );
  }
}

export default App;

上記のようにreturnで返るJSXノードをif文ごとの記述するという流れです。

ただし、この場合少々記述が増えてしまうため三項演算子を使うことでif文を使わなくとも条件分岐を行うことができます。

Reactでif文を使わずに条件分岐

const flag:boolean = false;

const App: React.VFC = () => {
  return (
    <div>
      {flag==false ? 'FALSEです' : 'TRUEです。'}
    </div>
  );
}

export default App;

三項演算子に関しては別記事でも解説しているので是非そちらを参考にしてみてください。

【TypeScript】三項演算子の書き方ご紹介。

では今回の記事は以上です。他にも多数のTypeScript関連の記事を記載しているので是非興味があればそちらも参考にしてみてください。