React 夕食の献立ルーレットアプリ

先日公開したモグラたたきゲームを使っていた友人から、

夕飯考えるのが面倒だから何か提案してくれる系アプリ作れない？

と相談を受けました。

そこで今回は夕食を提案してくれるアプリとして、

夕食の献立提案アプリ(ルーレットアプリ)

を作ってみました！！

アプリはこちらに公開しました。
https://elsammit.github.io/CookingApp/

現状品数少ないし、偏ってるし、主食系しか出てこないから、、、
友人には怒られるかもしれませんが、、、

ちょっと触っていただき、感想をもらいたいと思います！！

今回技術的に報告すべき点はないのですが、、、
強いて言うなら、React(jsx)で分岐処理を初めて挑戦したので備忘録として残しておきます。

React(jsx)の場合、jsx内でif文が使用できます。
ただし、直接分岐処理(if文)を使うことはできず、
こちらのように、関数化させてその中で分岐処理を使う必要があります。

function(){
    if(Menu ===""){
        return (
            <a></a>
        );
    }else{
        return (
            <form>
                <a>今夜の献立： </a>  <u　className="kondate" color="Red" >{Menu}</u>
                <br/>
                <iframe src={URL} width="400" height="500"></iframe>
            </form>
        );
    }
}()

上記はMenuがあった時のみ"今夜の献立"を表示する処理になるのですが、function内に分岐させた結果表示させたいタグを載せればよいです。

また今回は用いませんでしたが、アロー関数を用いてこちらのように書くこともできるようです。

(() =>{
    if(***){
      // 実行したい処理.
　}else{
     //実行したい処理.
    })()
}

最後に、、、
友人からの反応をもとに
　・今後もこのアプリを続けるか？
　・続けるとしたらどこを修正するか？
を決めていきたいと思います！！

■参考
React JSX の中で if で分岐させたい - かもメモ
DELISH KITCHEN | 料理レシピ動画で作り方が簡単にわかる