.map()メソッドの復習
今日はjavascriptのArray.map()について復習する。
.map()を最初に勉強したときは、なんかやってることは分かるけど、
こんなサンプル見ても使い道があまり想像できなかった。
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]なんなら先に習得した “for loop” でもできるし、今後必要になったら覚えようくらいの気持ちで
さっさと次のレッスンに進んでしまったが、
その後のOdin の課題で map()を使う機会が多いことに気づく。
使わなくてもできるはずが、多少無理して使ってみると、意外と受け入れられてしまった感覚。
早速ポイントを押さえていく。
.map()メソッド
ポイント１： Arrayの中身を１つずつ順番に呼び出す
ポイント２： 呼び出されたものを使って１つずつ処理を実行する
ポイント３： 出てきた全ての結果で新しいArrayを作る
ポイント４： Arrayの長さは変わらない
ポイント５： 元々のArrayは変更されない
💡 つまり、あるArrayを元にして、ちょっと形を変えて使いたい時にmap()を使う。
ObjectのArrayから、一部のプロパティだけ欲しいときは？
こちらは「.filter()メソッドの復習」の最後の問題部分。
条件に合うplatypusの名前だけ欲しいときはfilterとmapのコンビネーションで必要な情報だけを抜き取ってArrayを作れる。この方法はAPI使う時も便利。
const platypuses = [
{ name: 'Perry', age: 11, gender: 'male' },
{ name: 'Mary', age: 9, gender: 'female' },
{ name: 'B.B', age: 13, gender: 'male' },
{ name: 'Ollie', age: 6, gender: 'male' },
{ name: 'Yammy', age: 5, gender: 'female' },
{ name: 'Milo', age: 8, gender: 'male' },
{ name: 'Emma', age: 12, gender: 'female' },
{ name: 'Luna', age: 7, gender: 'female' }
];
// Filterでオスのカモノハシを抽出
const malePlatypus = platypuses.filter((platypus) => {
return platypus.gender === "male"
})
//Mapで全てのカモノハシの名前を抽出
const platypusNames = platypuses.map((platypus) => {
return platypus.name
})
console.log(malePlatypus);
// Output: [{ name: 'Perry', age: 11, gender: 'male' },{ name: 'B.B', age: 13, gender: 'male' },{ name: 'Ollie', age: 6, gender: 'male' },{ name: 'Milo', age: 8, gender: 'male' }]
console.log(platypusNames);
// Output: ['Perry', 'Mary', 'B.B', 'Ollie', 'Yammy', 'Milo', 'Emma', 'Luna']
上記コードの12行目〜を見てほしい。オスのカモノハシを抽出するというときはオスかどうかのTrue or Falseの判定が必要なので、Filterを使った。
さらに今回はArrayを絞り込むだけではなく、情報の一部を切り取りたい（カモノハシの名前だけ欲しい）ということでMapを使った。（17行目〜）
FilterもMapもreturn の後が少し違うくらいで書き方はとても似ていることにも注目。
あと、なるほどなと思ったのは.filter()メソッドで作成された、新しいArrayも、（当たり前だが）Arrayなので、そのまま後ろにくっつけてしまうことが可能。以下のように書き換えられる。（FilterしただけのArrayを他で使わないのであれば、むしろこの書き方の方がベター）
// Filterでオスのカモノハシを抽出し、Mapでオスだけの名前を抽出
const malePlatypusNames = platypuses
.filter((platypus) => {
return platypus.gender === "male";
})
.map((platypus) => {
return platypus.name;
});
console.log(malePlatypusNames);
// Output: ['Perry', 'B.B', 'Ollie', 'Milo']
書き方も大事だが、今回はもう一つ、実際の使われ方についても押さえておきたい。
mapを知ってからもしばらくはExcelで扱うようなデータを加工するときに使われているものかなという
イメージだったが、次に出てくる使い方を知ってから、.map()の本当の使われ方が分かった。
Reactで使う.map()
Reactを使ってJSXのコードを書いているときに.mapが頻繁に登場する。
Reactで使う.map()
手元のデータを一つずつ<div>などのタグで囲んで表示するためのパーツを作れる。
const PlatypusList = function() {
const platypuses = [
{ id: 1, name: 'Perry', age: 11, gender: 'male' },
{ id: 2, name: 'Mary', age: 9, gender: 'female' },
{ id: 3, name: 'B.B', age: 13, gender: 'male' },
{ id: 4, name: 'Ollie', age: 6, gender: 'male' }
];
return (
<div>
{platypuses.map((platypus) => (
<div key={platypus.id}>
{platypus.name} - {platypus.age} years old
</div>
))}
</div>
);
};例えば、OXゲームやBattleshipなどのボードゲームで１マスごとの情報をArrayで管理し、状態に合わせて表示を変えたい場合、
履歴書の学歴や職歴などの情報を小さなTableで表示したい場合、
商品のObject （objectに商品名、価格、写真などの情報が入っている）の中から、お客さんが選んだものだけを買い物かごに表示したい場合、などなど。
いずれもThe Odin Projectの課題で、私はmapを多用している。
Arrayの長さは変わらない
もう一つ、最後に実験。
mapの場合、undefinedやfalseなどがあっても、そもまま新しいArrayに含まれるので、
元のArrayと比べて長さは変わらない。FilterだとSkipされるということだったが、MapではSkipされなかった。
const platypuses = [
{ name: 'Perry', age: 11, gender: 'male' },
{ name: 'Mary', age: 9, gender: 'female' },
{ name: '', age: 13, gender: 'male' },
{ age: 6, gender: 'male' },
{ name: false, age: 5, gender: 'female' },
{ name: 0, age: 8, gender: 'male' },
{ name: undefined, age: 12, gender: 'female' },
{ name: null, age: 7, gender: 'female' }
];
//Mapで全てのカモノハシの名前を抽出
const platypusNames = platypuses.map((platypus) => {
return platypus.name
})
console.log(platypusNames);
// Output: ['Perry', 'Mary', '', undefined, false, 0, undefined, null]
というわけで本日は以上！
.map()に限らず、書き方よりも使われ方のほうを理解することが大事だと
個人的には思う。書き方は忘れてしまっても調べればすぐに出てくるけど、
こういう時にアレが使えるかな？という感覚がないと何も書き出せない。
