#21 TypeScriptで学ぶコレクション操作の応用(フィルタ・マップ的な考え方)の基本

はじめに

以前の記事「#7 TypeScriptで学ぶ配列の基本」では、配列の基本操作に軽く触れました。配列とは複数の値をまとめて扱うための入れ物のことで、これを「コレクション」とも呼びます。具体的には、条件に合う要素だけを残すfilter()と、各要素を加工して新しい配列にするmap()を紹介しました。今回はその発展編として、これらを実務でよく使う形で組み合わせる書き方と、TypeScriptならではの「型」が絡む注意点を見ていきます。

filter・map・reduceをチェーンして使う

実際の開発では、「絞り込み→加工→集計」という一連の流れを一度に書くことがよくあります。商品データの配列から「在庫がある商品」だけを選び、「税込価格」に変換し、その合計金額を求める例を見てみましょう。

interface Product {
  name: string;
  price: number;
  inStock: boolean;
}

const products: Product[] = [
  { name: "ノート", price: 100, inStock: true },
  { name: "ペン", price: 50, inStock: false },
  { name: "消しゴム", price: 80, inStock: true },
];

const total: number = products
  .filter((p) => p.inStock)              // 在庫があるものだけ残す
  .map((p) => p.price * 1.1)             // 税込価格(10%)に変換
  .reduce((sum, price) => sum + price, 0); // 合計を計算

console.log(total); // 198

reduce()は「複数の値をまとめて1つの値にする」ためのメソッドです。第1引数のコールバック関数(処理のたびに呼び出される関数)では、「これまでの計算結果(sum)」と「今見ている要素(price)」を受け取れます。第2引数の0は計算の初期値です。ここで注目したいのが、interface Productで型を定義しておくと、p.inStockやp.priceのようにプロパティ名を打つ際にエディタが補完候補を出してくれる点です。プレーンなJavaScriptには無い、TypeScriptならではの利点です。

型ガードでフィルタ結果の型を絞り込む

TypeScriptならではの応用として、「型ガード」を使ったフィルタリングがあります。型ガードとは、ある値が特定の型であることをコンパイラ(ここではTypeScriptをJavaScriptに変換するプログラム)に伝えるための書き方です。例えば、nullが混ざった配列からnullを取り除きたいとします。

const items: (string | null)[] = ["A", null, "B", null, "C"];

// 普通のfilterだと、戻り値の型は (string | null)[] のまま
const filtered1 = items.filter((x) => x !== null);

// 型ガードを使うと、戻り値の型が string[] に絞り込まれる
function isNotNull(x: string | null): x is string {
  return x !== null;
}
const filtered2: string[] = items.filter(isNotNull);

x is stringという戻り値の書き方が型ガード(型述語とも呼びます)です。これがあることで、TypeScriptは「この関数がtrueを返した要素はstring型に確定している」と認識します。そのため、filtered2を後で使うときにnullチェックを重ねて書かずに済みます。JavaScriptのfilter()には無い、型を持つ言語ならではの発想です。実務では、APIレスポンスの中から不要なundefinedやnullを除外して以降のコードを安全に書きたい場面でよく使われます。

for文・forEachとの使い分け

同じ集計処理をfor文で書くと、ループの添字管理や条件分岐を自分で細かく書く必要があります。一方でfilter・map・reduceは「何をしたいか」を並べる宣言的な書き方(処理の手順ではなく目的を書くスタイル)で、処理の意図が読み取りやすいのが利点です。ただし、要素数が非常に多い場合や途中で処理を打ち切りたい場合は、for文の方が効率的なこともあります。また、forEach()は戻り値が無い(常にvoidを返す)ため、コンソール出力など「新しい配列を作らない処理」に向いています。新しい配列を作りたい場合はfilter・mapを、単に繰り返し処理したいだけならforEachを、と使い分けると迷いにくくなります。

readonly配列で意図しない書き換えを防ぐ

もう1つTypeScript特有の工夫として、関数の引数にreadonly T[]という型注釈(変数や引数がどんな型かを明示する書き方)を付ける方法があります。例えばfunction sumPrices(list: readonly Product[])のように書くと、関数内でlist.push(...)のように配列を書き換えようとした時点でコンパイルエラーになります。呼び出し元の配列を安全に保ちたい場面で役立つ、型を持つ言語ならではの工夫です。

まとめ

今回は、filter・map・reduceをチェーンして使う実践的な書き方を紹介しました。あわせて、型ガードによるフィルタ結果の絞り込み、for文・forEachとの使い分け、readonly配列によるバグ防止にも触れました。TypeScriptでのコレクション操作は基本的な考え方こそJavaScriptと同じですが、型ガードやreadonly修飾子を組み合わせることで、より安全で読みやすいコードを書けるようになります。ぜひ手元のエディタで小さな配列を作り、型の恩恵を実感しながら試してみてください。

関連記事

本ページはプロモーションを含みます。

参考書籍(PR)

TypeScriptをもっと学びたい方には「プロを目指す人のためのTypeScript入門」がおすすめです。

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方は こちらをご覧ください。

コメント

コメントを投稿

このブログの人気の投稿

#25 Rustで学ぶAI API(ChatGPT等)の呼び出し方の基本

ChatGPTのようなAI(人工知能)の機能を自分のアプリに組み込みたいとき、多くの場合は「AI API」と呼ばれる仕組みを使います。APIとは「Application Programming Interface」の略です。簡単に言えば、「あるサービスの機能を、プログラムから呼び出せるようにした窓口」のことです。この記事では、Rustから外部のAI APIをHTTPリクエストで呼び出す基本的な流れを、初心者向けに解説します。 AI APIを呼び出すとはどういうことか ChatGPTを提供するOpenAI社などは、インターネット経由でAIに質問を送り、回答を受け取れる「AI API」を公開しています。これはWebブラウザで検索するときのように、決まった宛先(URL)にデータを送信し、返ってきた結果を受け取る仕組みです。この「データを送って結果を受け取る」通信方式を、HTTPリクエストと呼びます。Rustのプログラムからこの通信を行うことで、自分のアプリの中でAIに質問し、回答を取得できるようになります。 reqwestクレートを使う Rustには標準でHTTP通信の機能は含まれていません。そこで使うのが「クレート」と呼ばれる外部ライブラリです。クレートはPythonのライブラリやJavaScriptのパッケージに近いもので、 Cargo.toml というファイルに追記するだけで簡単に導入できます。HTTP通信でよく使われるのが reqwest というクレートです。 Cargo.toml に次のように追記します(バージョン番号は執筆時点の例なので、実際に使う際は最新版を確認してください)。 [dependencies] reqwest = { version = "0.11", features = ["json"] } tokio = { version = "1", features = ["full"] } serde_json = "1.0" ここで tokio という見慣れないクレートも一緒に入れています。これは「非同期処理」と呼ばれる、通信の待ち時間の間に他の処理を進められる仕組みを扱うためのものです。ネットワーク通信は結果が返ってくるまで時間...
続きを読む

#8 C++で学ぶ文字列操作の基本

C++の文字列操作は、`std::string`という型を使うのが現代的な基本の書き方です。この記事では、C++における文字列操作の基本と、注意しておきたい落とし穴を解説します。 文字列を連結する std::string greeting = "こんにちは、" + name + "さん"; `std::string`同士であれば、`+`を使った連結がそのまま使えます。既存の文字列に追加する場合は`+=`や`append`メソッドも使えます。 greeting += "。よろしくお願いします。"; よく使う文字列操作 name.length() 文字数を調べる(バイト数であることに注意、後述) name.substr(0, 3) 一部分を取り出す(開始位置と長さを指定) name.find("A") 特定の文字の位置を探す(見つからなければ`std::string::npos`) name.replace(0, 2, "XX") 一部分を置き換える 文字列を数値に変換する 文字列を数値に変換したい場合は`std::stoi`(整数)や`std::stod`(小数)、逆に数値を文字列にしたい場合は`std::to_string`を使います。 int num = std::stoi("123"); std::string s = std::to_string(456); 文字列を分割する C++の標準ライブラリには、他言語の`split`のような文字列分割の関数が長らく用意されていませんでした。`std::stringstream`を使うのが伝統的な方法です。 #include <sstream> std::stringstream ss("a,b,c"); std::string item; while (std::getline(ss, item, ',')) { std::cout << item << std::endl; } C++ならではの注意点 C++には、古くからある`char`の配列を...
続きを読む

#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方と、用途別の型の選び方を解説します。 型付きのオブジェクト interface Person { name: string; age: number; } const person: Person = { name: "太郎", age: 20 }; キーの型が決まっていない辞書 キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。 const scores: { [key: string]: number } = {}; scores["太郎"] = 90; 同じ意味を Record というユーティリティ型で簡潔に書くこともできます。 const scores: Record = {}; Mapを使う場合 const person = new Map (); person.set("name", "太郎"); console.log(person.get("name")); Map<string, string> のように、キーと値それぞれの型を指定できます。 Object と違い、キーの数を person.size で正確に取得できる、キーの型を文字列以外にもできるといった利点があります。 値が存在しないかもしれない場合 キーが実在するとは限らない辞書の場合、値の型に | undefined を含めておくと、より正確な型になります。 const scores: { [key: string]: number | undefined } = {}; const value = scores["三郎"]; // number | undefined 型 こうしておくと、存在しないキーへのアクセスがコンパイル時に見過ごされにくくなります。 存在しないキーへのアクセスを防ぐ tsconfig.json で noUncheckedIndexedAccess を有効にす...
続きを読む