[React]map/filter/splice/三項演算子/スプレッド

概要

• Reactでよく使う関数を備忘します。
• 扱う関数はタイトル通りです。

目次

1. map
2. filter
3. splice
4. 三項演算子
5. スプレッド

1.map

map関数とは

MDNでは以下のように紹介されています。

MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

簡単に言うと、for文みたいなことをしてくれています。配列から要素を取得して順に要素を出力します。
以下に例を示します。このコードでは、divの中で、list配列とdatalist配列をmapメソッドを用いて要素をuiに出力されています。datalistの場合は、単に{datalist}とするとエラーになります。しっかりとkeyを指定して、どのkeyに対するvalueを表示するべきかを判断させます。

例

export default function App() {
  const list = [1, 2, 3, 4];
  const datalist = [
    {
      name: "hanako",
      level: 20
    },
    {
      name: "akiko",
      level: 21
    }
  ];
  return (
    <div className="App">
      {list.map((number) => (
        <div>{number * 10}</div>
      ))}
      {datalist.map((data) => (
        <div>
          {data.name}
          {data.level}
        </div>
      ))}
    </div>
  );
}

2.filter

filter関数とは

MDNでは以下のように紹介されています。

MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

簡単に言うと、条件に合格した要素のみを残します。不合格な要素は削除します。
以下に例を示します。このコードでは、words配列に対してfilterメソッドを適用し、6文字未満の要素のみresultに代入します。

例

export default function App() {
  const words = [
    "red",
    "blue",
    "green",
    "yelow",
    "white",
    "brack",
    "redandblue"
  ];
  const result = words.filter((word) => word.length < 6);
  console.log(words); //全ての要素を表示
  console.log(result); //6文字以下の文字列のみ表示
  return <div className="App"></div>;
}

3.splice

splice関数とは

MDNでは以下のように紹介されています。

MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

簡単に言うと、指定した位置の要素を削除したり指定した位置に要素を追加したりします。
以下に例を示します。このコードでは、list配列の中身の順番をA,B,Cから、B,A,Cに変更しています。
splice関数は引数に以下の意味を持ちます。

配列.splice(start, deleteCount, item)

start：始まりの位置、deleteCount：削除する個数、item：作成したい要素
例では、list.splice(0, 1)で、listの0番目の要素を1個消しています。つまり、"A"を削除します。また、remove_valueに”削除した値”を代入します。
次に、list.splice(1, 0, remove_value[0])で、listの1番目の要素を0個削除しています。つまり、なにも削除していません。そして、remove_value[0]を1番目に追加します。つまり、"A"をlistの1番目に追加しています。これで、B,A,Cの順番になりました。

例

export default function App() {
  const list = ["A", "B", "C"];
  //we wanna show you the order "BAC".
  const remove_value = list.splice(0, 1); //削除した要素を代入
  console.log(remove_value);
  list.splice(1, 0, remove_value[0]); //配列として記述する必要
  console.log(list);

  return <div className="App"></div>;
}

4.三項演算子

三項演算子とは

MDNでは以下のように紹介されています。

MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

簡単に言うと、{ A ? B : C }のとき、AがtrueならBの処理を実行、AがfalseならCの処理を実行します。Aによってどっちの処理を実行するかが決まるってことですね。
以下の例では、ボタンがクリックされると、handleclickが実行されます。handleclickが実行されると、setIsClickを使って、isClickにtrue/falseをセットします。初期値は、falseです。isClickがtrueの場合はh1タグを表示し、falseの場合はpタグがuiに出力されます。つまり、ボタンを押す前は、pタグが、ボタンが押された後は、h1タグがui表示されます。

例

function App() {
const [isClick, setIsClick] = useState(false); //初期値はfalseをセット
//クリック時に動作
const handleclick = (e) => {
  //更新を防ぐ
  e.preventDefault();
  //Clickされた場合trueをセット
  setIsClick(true);
}

}
return(
    <div onClick={handleclick}>
    <input type="button" value="ボタン"></input>
    {isClick ? (
      <h1>h1タグを表示</h1>
    ) : ( 
      <p>pタグを表示</p>
    )}
    </div>
);

5.スプレッド

最後にスプレッド構文についてです。

スプレッド構文とは

MDNでは以下のように紹介されています。

MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

簡単に言うと、"...配列名"の形で記述することで、要素を全て取り出しつなぎ合わせます。
以下の例では、Array1とArray2の値をを1つずつ取り出し、Array1に返しています。letで定義している理由としては、constを使うとエラーが出るためです。

例

let Array1 = [10,20,30];
let Array2 = [40,50,60];

Array1 = [...Array1,...Array2];

おわりに

• いくつかの関数について備忘録を記述しました。