React】苦手だった条件分岐（boolean）を少し克服した方法

こんにちは。ひろっきーです。

現在ITエンジニア転職を目指して現在、独学９ヶ月目で日々学習、現在はNext.js、TypeScript などを学習しており、ポートフォリオとしてSNSアプリケーションを作成しています。
今回は最近やっと使えるようになってきた、条件分岐について忘備録を兼ねて書いて行きたいと思います。

この記事を書こうと思ったきっかけ

私がプログラミングを学び出したのは、2０２０年の１１月で
１２月ぐらいにはJavascriptを学び初めていました。
その時はドットインストールを学習してましたが、私は各演算や値を学ぶ中で一番booleanが苦手でした。。。とにかく応用出来ない、、、

ドットインストールの先生が

こういうときはbooleanですね

と言い正解のコードを書く度私の頭にはいつも「？」マークが浮かんでました。

そもそも演算子とは？

最近気付いたことは
１　＋　１　＝　２
この式が成り立つ場合、この式はtrueになります。
この理論が成り立つか成り立たないかの値がbooleanです。

アプリケーション開発をするにあたってどこかの場面でbooleanは使われます。

条件分岐を覚えるきっかけ

苦手意識が拭えないまま、自身が参加しているコミュニティでライブコーディングという出来るエンジニアさんが、みんなの前で今作ってるもののコーディングを見れるというイベントがありました。

そこで、繰り出されるスマートな三項演算子で書かれた要素の出し分けを見て
「カッコいい！」
と思ったのが最初のキッカケでした（理由が浅はかｗ）

実際によく使う条件分岐やbooleanの自分なりの覚え方。

前提条件

私がアプリ開発を始めたときはReactから始めたので、Reactの書き方で解説していきます。
覚えやすいように読み方と、覚え方を同時に解説していきます。
例文として、関西の人はみんな知っている　５５１の蓬莱のCMに例えて説明していきます。（知らない方はググってみて下さいｗｗ）

&&　論理演算子(論理 AND)

使用ケース

 const Hourai = () => {
   let isHourai = true; //蓬莱がある (初期値）
   return (
    {isHourai && <div>嬉しい</div>}
    // 蓬莱がある時は嬉しい　
  ) 
 }
 // 返り値　：　蓬莱はtrue（ある）ので嬉しい

訳：　（is）蓬莱がある時は嬉しい
構文：　左辺がtrueなら右辺を返す
　読み方は「アンパサンド」と読みます。
＆＆といえば　〇〇かつという感じで覚えてる方も多いと思いますが、この様に覚えたほうが覚えやすいかと思います。

三項演算子

使用ケース

 const Hourai = () => {
   let isHourai = true;　　//蓬莱がある　(初期値）
   return (
    {isHourai ? <div>嬉しい</div> : <div>悲しい</div>}
    // 蓬莱がある時は嬉しい　:ないときは悲しい
  ) 
 }

 // 返り値　：　蓬莱はtrue（ある）ので嬉しい

訳: （is)蓬莱がある時は嬉しい。そうじゃなかったら悲しい。
構文: 左辺がtrueのときは右辺を返して、falseの場合は　：　以降のコードを返す。
代表的な三項演算子の使い方です。
ボタンをクリックしたときに要素を出したり消したりするときなどに使われます。
※　?の後　改行や定数を使う場合は（）で囲む必要があります。＆＆も同じです

if文,if else文

const hourai = false;
if(hourai){　
 return <div>嬉しい</div>　 //もし蓬莱があれば嬉しい
}　else {
  return <div>悲しい</div>　//そうでなければ悲しい
}
 // 返り値　：　蓬莱はfalse（ない）ので悲しい

訳: 蓬莱がある時は嬉しい。そうじゃなかったら悲しい。
構文: 代表的なif else文です。　返り値がtrueならif文内を、falseならelse内を返す

代表的な書き方で基礎を学習している方も学んだことがあるかもしれません。
if文はほかの書き方も出来ます。

const hourai = false;
if(hourai){　
 return <div>嬉しい</div>　 //もし蓬莱があれば嬉しい
}　
if(!hourai){
  return <div>悲しい</div>　//そうでなければ悲しい
}
 // 返り値　：　蓬莱はfalse（ない）ので悲しい

訳：　同上
構文:　今回はif　elseではなく、！マークを使い条件分岐しています。
！　は値の前に付けることで、反対の値を返します。
（子供のときに一度は言ったことのある「お父さん、嫌いの反対」　みたいな表現です）

私がよく使うのはこの３パターンかなと思います。

# まとめ
こんな感じで、コードを日本語訳出来るとこういった構文が理解しやすくなるかと思いました。
皆さんもぜひ使ってカッコいい条件分岐を書いてboolean masterになりましょう。