【令和最新版！自分用】覚えにくかったjsのアレコレを解説！【超初心者】

Reactを勉強中に分からなくてイヤになったところを
自分が分かるように、楽しく、自分のためだけに書く記事です。
参考になさらないことをおすすめします。

• map
• filter
• if
• スプレッド演算子 (...)
• その他

map

何するメソッド？

→配列に対して"何か"処理をして、その結果を 新しい配列 のオブジェクトを返す

map_example.js

const items = [
  { name: 'a', age: 10},
  { name: 'b', age: 20},
  { name: 'c', age: 30},
]

const itemsName = items.map(item => item.name);
└['a', 'b', 'c']

やっていることメモ

const itemsName = 

mapで処理した結果を「itemsName」という定数に入れる

---

items.map(item => 

itemsの中身を一つずつ取り出して「item」という変数名でアローの次に書く処理を行う

---

item.name);

「item」のnameプロパティを参照する

書き方覚え方(まとめ)

const itemsName = items.map(item => item.name);

1, 定数名を決めます（var / let / constのうち、基本「const」を使え！って見た）
2, どの変数に対してmapを実施するか決めます(items)
3, map関数内での変数名を決めます(item)
4, アローを書きます
5, 処理内容を実装します

filter

何するメソッド？

→配列に対して"何か"処理をして真偽値がtrueのもので作った 新しい配列 のオブジェクトを返す
※mapと違って"何か"の戻り値がbooleanじゃないとダメ

filter_example.js

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0); 
└numberを2で割って余りゼロならtrue(偶数ならtrue)で新しい配列に入れる
└[2, 4]

やっていることメモ

const evenNumbers = 

filterで処理した結果を「evenNumbers」という定数に入れる

---

numbers.filter(number => 

numbersの中身を一つずつ取り出して「number」という変数名でアローの次に書く処理を行う

---

number % 2 === 0);

「number」を2で割って余りゼロの場合にtrueを返す
(この例だと2,4の場合にtrueを返して、[2, 4]の配列を新しく作る結果になる

書き方覚え方(まとめ)

const evenNumbers = numbers.filter(number => number % 2 === 0); 

1, 定数名を決めます（var / let / constのうち、基本「const」を使え！って見た）
2, どの変数に対してmapを実施するか決めます(numbers)
3, map関数内での変数名を決めます(number)
4, アローを書きます
5, 処理内容を実装します
※料金がX円以上の商品のリストを作りたい！とかで便利かもね！。

if

何するメソッド？

→割愛。java / rubyなら分かるけどjsのif文になった瞬間混乱するから一覧にする
※似たような書き方ができるものはまとめたい

if_example_1.js

if (score >= 80) {
  console.log("よくできました");
}

or

1行の場合は{}を省略できる
if (score >= 80) console.log("よくできました");

or

trueの時だけ実施する
isLoggedIn && showDashboard();

if_example_2.js

if (isLoggedIn) {
  console.log("ログイン中");
} else {
  console.log("ログアウト中");
}

or

const status = isLoggedIn ? "ログイン中" : "ログアウト中";

・nameが(false, 0, "", null, undefined)なら"名無し"
const userName = name || "名無し";

if_example_3.js

if (color === "red") {
  console.log("止まれ");
} else if (color === "yellow") {
  console.log("注意");
} else if (color === "blue") {
  console.log("進め");
} else {
  console.log("定義なし");
}

if_example_4.js

undefined または null の場合??の後に書いたものを実施する
0や空欄でもOKで「receivedData」が代入される
const count = receivedData ?? 0;

if_example_5.js

長くなり過ぎるのを防ぐ効果があるらしい
const actions = {
  save: () => console.log("保存します"),
  delete: () => console.log("削除します"),
  update: () => console.log("更新します"),
};

const mode = "save";
actions[mode]?.(); // "保存します" が実行される

スプレッド演算子 (...)

何するもの？

→すでにある配列Aを別の配列Bとして再作成する(イミュータブル)

supureddo_example.js

const user = { name: '名字', age: 25 };

// 新しい箱 {} を用意して、その中に user の中身をぶちまける
const newUser = { ...user }; 

console.log(newUser); // { name: '名字', age: 25 }
全く同じ内容で別の配列が作られる

一部だけ書き換え。が強力

supureddo_example2.js

const user = { name: '名字', age: 25, gender: 'male' };

コピーを作成するが、ageだけは26に変更して作る
const updatedUser = { ...user, age: 26 };

console.log(updatedUser); 
// { name: '名字', age: 26, gender: 'male' }

要素ごとに書き換え内容を変更することもできる

supureddo_example3.js

const people = [
  { name: '名字1', gender: 'male', age: 20 },
  { name: '名字2', gender: 'female', age: 20 },
  { name: '名字3', gender: 'male', age: 30 }
];

const result = people.map(person => {
  // 条件分岐：男性なら+2、そうでなければ+1（女性と仮定）
  const addedAge = person.gender === 'male' ? 2 : 1;

  return {
    ...person,
    age: person.age + addedAge // 年齢だけ計算して上書き
  };
});

console.log(result);
/* 結果:
[
  { name: '名字1', gender: 'male', age: 22 },
  { name: '名字2', gender: 'female', age: 21 },
  { name: '名字3', gender: 'male', age: 32 }
]
*/

その他

1. map, filterなどのアロー以降の実装で{}をつけたりつけなかったりする時がある
→処理が2行以上になる時に{return value}が必要になる

const result = people.map(person => `{`←2行以上になるから{}で囲む
  // 条件分岐：男性なら+2、そうでなければ+1（女性と仮定）
  const addedAge = person.gender === 'male' ? 2 : 1;

  `return`←{}をつけたら必ずreturnも必要になる {
    ...person,
    age: person.age + addedAge // 年齢だけ計算して上書き
  };
`}`←これ);