こんにちは。中塚です。
データの扱い方について学びがあったため記事に書かせていただきます。
Object.fromEntriesを使ってデータを効率的に扱う
背景
TypeScriptを使用している多くのプロジェクトで、データの加工や表示のために多くの工夫を行っています。Object.fromEntriesを活用することで、これらの操作を効率化し、パフォーマンスの向上が期待できます。
実装方法
まずは、APIから取得したデータをIDとデータオブジェクトのマップに変換します。これにより、レンダリング時に必要なデータへのアクセスが容易になります。
const fetchData = async () => {
const data = await fetchSomeData(); // APIからデータを取得
const dataMap = Object.fromEntries(data.map(item => [item.id, item]));
return dataMap;
};
fetchしたデータをのまま扱おうとして、idからデータを取得する際に、データの中から一致するidを走査すると非効率になります。
この方法で、データへのアクセスをO(1)で実行可能になり、大量のデータ操作を効率的に行えます。
flatMapを使用して型解決を行う
問題点
jobOffer.ids のような配列に対して操作を行う際、対象のIDが見つからない場合にundefinedとなる可能性があります。
解決策
flatMap を使って、各要素に対する処理を行い、undefinedを除外することができます。
const resolvedTypes = jobOffer.ids.flatMap((id) => (idToProfessionsMap[id] ?? []))
このコードスニペットでは、flatMap を使用して、各職種IDに対して処理を行い、存在する職種のみを新しい配列として返しています。これにより、安全に配列を扱うことができ、型エラーを防げます。
まとめ
この記事では、Object.fromEntries と flatMap を使用したTypeScriptでのデータ処理の効率化について解説しました。これらのテクニックを用いることで、コードのパフォーマンスと安全性を向上させることが可能です。
Discussion