2022年2月28日 React実践の教科書モダンJavaScriptの機能に触れる　map filter~

map filter

従来for文で行っていて記述量が増えてしまうところを、この二つのメソッドを使う事でわかりやすく短く描けるようになります。

mapメソッド

配列を順番に処理して処理した結果を新しい配列で返します。

const arr1 = [1, 2, 3];

const arr2 = arr1.map((num) => {
  console.log(num);
  return num * 2;
});

console.log(arr2);

// 実行結果
// numの中身
1
2
3
// 新しい配列
[ 2, 4, 6 ]

mapメソッドの中身に console.log を書いてmapメソッドの引数にarr1の中身が順番に渡されているのを確認しています。
arr2にはmapメソッド内で num * 2 された新しい配列が返されています。
mapメソッドの中でreturnせずに console.log だけをすれば配列の中身を繰り返し処理ができます。

filterメソッド

returnの後の条件に合う配列のみを新しい配列として返します。

const arr1 = [1, 2, 3, 4];

const arr2 = arr1.filter((num) => {
  console.log(num);
  return num / 2 === 1;
});

console.log(arr2);

// 出力結果
// numの中身
１
２
３
// 新しい配列
[ 2 ]

arr1の中身をfilterの引数に渡しているのはmapと同じ挙動です。
returnの後の条件に一致しているもののみを新しい配列で返しているから[ 2 ]が返されています。

配列の中身から特定の条件に合うものを取り出したいときにfilterメソッドを使いましょう。

indexの扱い

配列のループ処理の場合、index番号の何番目の要素かを意識したいケースが多くあります。

mapやfilterの第２引数を持たせる事で index番号を渡せます。

const arr1 = ["あ", "い", "う", "え"];

const arr2 = arr1.map((name, index) => {
  return `${index + 1}番目は${name}さんです。`
});

console.log(arr2);　　=> [ '1番目はあさんです。', '2番目はいさんです。', '3番目はうさんです。', '4番目はえさんです。' ]

第二引数のindexは配列のindexなので0の数字からなので +1　をする事で1番目はという文字列を出力させています。
第二引数に渡ったindex番号をテンプレートリテラルで出力しています。

何番目か？という概念が必要なときは第二引数を持たせる事で解決できると覚えておきましょう。

三項演算子

if文のように条件分岐ができます。基礎ですがよく使われる記法なので覚えておきましょう。

ある条件 ? true時の処理 : false時の処理

// 条件がtrueになるようにします。

const ry = 1 > 0 ? "trueです。" : "falseです。";

console.log(ry); => trueです。

// 条件がfalseになるようにします。

const ry = 0 > 0 ? "trueです。" : "falseです。";

console.log(ry); => falseです。

関数内で三項演算子を使ってみます

入力値が数値の場合はそのままの数値を、３桁以上ならカンマがついた数値に変換して、数値でなければ数値で入力してください。と出力する関数を書いてみます。

const numberConsole = (num) => {
    const typeNum = typeof num === "number" ? num.toLocaleString() : "数値を入力してください";
    console.log(typeNum);
};

numberConsole(1200); => 1,200
numberConsole("1200"); => 数値を入力してください
numberConsole(12); => 12

typeof ~ で引数が何に属しているかを判定しています。
Number.prototype.toLocaleString()を使って数値だった場合にカンマをつけた返り値にしています。
数値でなければ数値を入力してくださいが返されます。
関数内で console.log をしているので関数名()で出力まで行っています。

return時に三項演算子を使ってみます

引数の合計値が100を超えている(101以上)ならば文字列の100を超えています。を出力し、100以内ならば合計値を出すような関数をreturn時に三項演算子を使って書いてみます。

const sumNumberOver = (num1, num2) => {
   return num1 + num2 > 100 ? "100を超えています。" : (num1+num2); 
};

console.log(sumNumberOver(20, 40)); => 60
console.log(sumNumberOver(100, 2)); => 100を超えています。
console.log(sumNumberOver(100, 0)); => 100

return時の条件式で100を超えていないかで条件分岐しています。
関数内でreturnした結果を関数外で console.log(関数名()) で出力しています。

&& と ||

要点

&& は左辺がtrueなら右辺を返します。
||は左辺がfalseなら右辺を返します。

この書籍にはありませんでしたが8つのfalsyな値がJavaScriptにはあります。

Falsy

false
undefined
null
0n
0
-0
NaN
“”

この8つが左辺かどうか？で処理が別れます。私はこの8つを歌のメロディーに乗せて覚えていますが何かで覚えておくか使うときに調べると良いと思います。

&&使用時の例

const num = 10;

// 左辺がtrueです。
const ry = num && 100;

console.log(ry); => 100

const num = null;

// 左辺がfalseです。
const ry = num && 100;

console.log(ry); => null

左辺がfalseの場合は左辺の値を返しています。

||使用時の例

const num = 10;

// 左辺がtrueです。
const ry = num || 100;

console.log(ry); => 10

const num = null;

// 左辺がfalseです。
const ry = num || 100;

console.log(ry); => 100

左辺がfalseの場合に右辺を返しています。

かつ　または　という言葉で覚えるのも良いですが

左辺の評価結果で変わる事を覚えておくのが重要です。

基礎ですがReactでよく使われるようなので理解しておくと良いでしょう。

最後に

基礎学習の続きでした。これからJavaScriptのDOM操作に入っていきます。

Reactを学ぶ上でそれだけJavaScriptの基礎が大切だという事のようです。

読んでくださった方、ありがとうございます。

参考

Number.prototype.toLocaleString()