目次
mapメソッドの基本
基本的な使い方
mapメソッドは、配列の各要素に対して指定された関数を実行し、その結果を新しい配列として返します。元の配列は変更されません。
const nums = [1, 2, 3, 4, 5];
const resultArray = nums.map(x => x + 1);
// 結果: [2, 3, 4, 5, 6]
この例では、配列の各要素に1を加えるという単純な操作を行っています。アロー関数を使用することで、より簡潔に記述することができます。
実践的な使用例
オブジェクトの配列から特定のプロパティを抽出する場合にもmapは非常に便利です。
const people = [
{ id: 1, name: "Chris" },
{ id: 2, name: "Jackson" },
{ id: 3, name: "Tommy" }
];
const names = people.map(person => person.name);
// 結果: ["Chris", "Jackson", "Tommy"]
filterメソッドの基本
基本的な使い方
filterメソッドは、配列の各要素に対して条件をチェックし、条件に合致する要素のみを新しい配列として返します。
const nums = [1, 2, 3, 4, 5];
const resultArrayEven = nums.filter(x => x % 2 === 0);
// 結果: [2, 4]
この例では、偶数のみを抽出しています。
実践的な使用例
オブジェクトの配列から特定の条件に合致する要素を抽出する例です。
const users = [
{ name: 'test1', department: 'systemUnit' },
{ name: 'test2', department: 'creativeUnit' },
{ name: 'test3', department: 'systemUnit' }
];
const creativeUsers = users.filter(user => user.department === 'creativeUnit');
// 結果: [{ name: 'test2', department: 'creativeUnit' }]
mapとfilterの組み合わせ
mapとfilterは組み合わせて使用することで、より複雑なデータ操作が可能になります。
const users = [
{ id: 1, name: "Ben", isActive: true },
{ id: 2, name: "Hong", isActive: false },
{ id: 3, name: "Taro", isActive: true }
];
const activeUserNames = users
.filter(user => user.isActive)
.map(user => user.name);
// 結果: ["Ben", "Taro"]
この例では、まずfilterでアクティブなユーザーを抽出し、その後mapで名前のみを取り出しています。このように、メソッドチェーンを使用することで、より読みやすく保守性の高いコードを書くことができます。
まとめ
mapとfilterメソッドは、ES6で導入された強力な配列操作メソッドです。これらのメソッドを使用することで、
- より宣言的なコードを書くことができる
- ループ処理を簡潔に記述できる
- データの変換やフィルタリングを効率的に行える
- コードの可読性と保守性が向上する
これらのメソッドを適切に使いこなすことで、よりモダンで効率的なJavaScriptコードを書くことができます。特に、Reactなどのモダンなフレームワークを使用する際には、これらのメソッドの理解が非常に重要になります。
