🐣

TypeScript 覚えておくべき配列操作のメソッド

2023/08/25に公開

JavaScript

TypeScript

tech

はじめに

JavaScript、TypeScriptを扱う上で覚えておくべき配列操作のメソッドについてまとめています。
紹介する6つのメソッドを覚えておくだけで、配列操作が結構楽になります。

今回扱う配列

各メソッドのコード例では、以下の配列booksを用いて説明しています。

type Book = {
    id: number; 
    title: string; // タイトル
    author: string; // 著者
    genre: string; // ジャンル
    pages: number; // ページ数
};

const books: Book[] = [
    {
      id: 1,
      title: "Book1",
      author: "Author1",
      genre: "Fantasy",
      pages: 250,
    },
    {
      id: 2,
      title: "Book2",
      author: "Author2",
      genre: "Horror",
      pages: 300,
    },
    {
      id: 3,
      title: "Book3",
      author: "Author3",
      genre: "Fantasy",
      pages: 400,
    }
  ];

forEach

forEachは、配列内の各要素に対して処理を実行します。返り値はありません。
以下の例では、booksの各要素のtitleを出力する処理を行います。

 books.forEach((book) => console.log(book.title));
 // => 'Book1', 'Book2', 'Book3'

map

mapは、配列内の各要素に対して処理を実行し、その結果からなる配列を返します。
配列内の各要素に対して何かしらの操作をしたいというときに便利です。

以下の例では、forEachとmapの処理を変数に代入し、その変数をコンソールに出力します。
一見同じように見えますが、forEachではundefinedを返すのに対し、mapでは配列を返しています。

// forEachの場合
const bookTitles = books.forEach((book) => book.title);
console.log(bookTitles)
// => undefined

// mapの場合
const bookTitles = books.map((book) => book.title);
console.log(bookTitles)
// => ["Book1", "Book2", "Book3"]

filter

filterは、指定した条件を満たす要素を配列として返します。満たす要素が1つもない場合、空の配列を返します。
以下の例では、ページ数が300ページ以上である要素を調べます。

const thickBooks = books.filter((book) => book.pages >= 300);
console.log(thickBooks);
/* => [{ 
	id: 2, 
	title: "Book2",
         ~~ 省略 ~~
       },
       {
        id: 3,
        title: "Book3",
         ~~ 省略 ~~
       }]
*/

some

someは、指定した条件を少なくとも1つの要素が満たすときtrue、そうでないときはfalseを返します。
以下の例では、Author2、kagunyanという著者を持つ要素があるかどうかを調べます。

const isAuthor2 = books.some((book) => book.author >= 'Author2');
console.log(isAuthor2)
// => true
const isKagunyan = books.some((book) => book.author >= 'kagunyan');
console.log(isKagunyan)
// => false

every

everyは、指定した条件を配列内の全ての要素が満たすときtrue、そうでないときはfalseを返します。
以下の例では、全ての要素が100ページ以上であるかどうか、全ての要素がFantasyジャンルであるかどうかを返します。

const hasAll100Pages = books.every((book) => book.pages >= 100);
console.log(has100Pages)
// => true
const isAllFantasyGenre = books.every((book) => book.genre === 'Fantasy');
console.log(isAllFantasyGenre)
// => false

find

findは、指定した条件を満たす1つ目の要素を返します。満たす要素が1つもない場合、undefinedを返します。
以下の例では、Fantasyジャンルである要素、SFジャンルである要素を調べます。

const hasFantasyBook = books.find((book) => book.genre === 'Fantasy');
console.log(hasFantasyBook)
/* => {
        id: 1,
        title: "Book1",
        author: "Author1",
        genre: "Fantasy",
        pages: 250,
      }
*/
const hasSFBook = books.find((book) => book.genre === 'SF');
console.log(hasSFBook)
// => undefined

まとめ

今回まとめた各メソッドの返り値は以下のようになります。

	返り値
forEach	なし
map	配列
filter	配列
some	真偽値
every	真偽値
find	要素

配列を操作するメソッドはMDNの公式から閲覧できます。

おわりに

今回まとめたのは6つですが、他のメソッドについてもよく使うものが出てきたらまとめてみようと思います。