Reactを極める！-2023/10/23-

昨日、土日は少し夫婦でのんびりday。
コストコに食料調達などに行ってきました。

今日も朝からreactの続きからやっていきます。

reactとは直接関係ないですが、

<hr />とは？
テーマの区切りとかをつけるための水平線。↓これみたいなやつを出す時に使うのかな。

---

そう思ってこのページを検証してみたら、本当に使ってた！！

アロー関数の記法

本文を波括弧でかこう、という記法がある。
オブジェクトリテラルの波括弧と混在しないように、
オブジェクトリテラルの場合はさらに丸括弧でかこうことになっている。

私が調べていて、わかりやすいと思った参考ページ。

あとは、条件分岐のいろいろな書き方まとめ

import { useState } from "react";

const Example = () => {
  const animals = ["Dog", "Cat", "Rat"];

  const [filterVal, setFilterVal] = useState("");

  return (
    <>
      <input
        type="text"
        value={filterVal}
        onChange={(e) => setFilterVal(e.target.value)}
      />
      <ul>
        {animals
          .filter((animal) => {
            const isMatch = animal.indexOf(filterVal) !== -1;
             //console.log(animal.indexOf(filterVal));
            return isMatch;
          })
          .map((animal) => {
            if(animal === 'Dog'){
              return<li key={animal}>{animal}★</li>
            }else{
              return<li key={animal}>{animal}</li>
            }
          }
         )}
      </ul>
    </>
  );
};

export default Example;

上記の中で

 .map((animal) => {
    if(animal === 'Dog'){
       return<li key={animal}>{animal}★</li>
    }else{
       return<li key={animal}>{animal}</li>
    }
  }

この部分の書き方は他に２種類あります。

1️⃣３項演算子

return<li key={animal}>{animal === "Dog" ? animal + "★" : animal}</li>;

これのオブジェクトの中が長くて嫌なら

const preAnimal = animal === "Dog" ? animal + "★" : animal;
return<li key={animal}>{preAnimal}</li>;

これでもOK。


2️⃣??（Null合体演算子）
正直これは書く内容は違ってしまうけど、1つ覚えておいてもよさそう。

return(
            <li key={animal}>{animal ?? "null,undefinedでした"}</li>);

これはanimalがNullかundefinedの場合は文字列を表示します、という内容です。

3️⃣&&演算子

return<li key={animal}>{animal}{animal === "Dog" && "★"}</li>;

key以外で前半のanimalは変数、後半は条件です。
trueなら（今回はDogなら）★をつけ、falseなら（Dog以外なら）animalをそのまま表示する。

という意味合いでしょうか。

次はリファクタリングについて。

これは、前にRailsでもやっていたように、
内容によってコードを切り分ける作業のこと。

コードを見やすくするために大事なことですね。（初心者には複雑ですが）