JavaScriptで配列ではなくオブジェクトをループする方法

環境

• macOS Monterey 12.6
• Windows 11
• VSCode
• node.js v18.6.0
• npm 8.13.2

コード例はTypeScriptで書いていますが、型システム以外は基本的にはJavaScriptでも同様です。

JavaScriptでオブジェクトをループする際の考え方

このようなエラーオブジェクトがあると仮定する。

const errors: Record<string, string[]> = {
  name: ['名前を入力してください。'],
  profession: ['職業を選択してください'],
  // ...more
}

オブジェクトをループしたい場合は以下の手順を踏む

• 一度配列に変換する
• 変換された配列をforEachやfor分でループする。ループの際に配列の分割代入を使用してキーバリューを取得する

JavaScriptでオブジェクトをループするコード例

一度配列に変換する

まず、Object.entriesを使用して、errorsオブジェクトのキーバリューの配列を取得する。配列の中に配列の要素があり、その配列の要素のインデックス0が元のオブジェクトのキー、インデックス1がバリューとなる

// Object.entriesはerrorsのキーバリューの配列
const errorEntries = Object.entries(errors); 

// console.log(errorEntries); 
// [
　　　　　　　　['name', ['名前を入力してください。']], ['profession', ['職業を選択してください']]
　　　　　　]

変換された配列をforEachやfor文でループする

次に、errorsオブジェクトのキーバリューの配列をforやforEach文でループする。この際、渡ってくる要素は['name', ['名前を入力してください。']]、['profession', ['職業を選択してください']]のような配列となるため、これを分割代入で配列のインデックス0をキーとして、インデックス1をバリューとして取得する

forEach

errorEntries.forEach(([k, v]) => console.log(k,v))
// "name",  ["名前を入力してください。"]
// "profession",  ["職業を選択してください"] 

for of

for (const [k, v] of errorEntries) {
  console.log(k, v);
}

// "name",  ["名前を入力してください。"]
// "profession",  ["職業を選択してください"]

あとは、ループの中の後続の処理でキーバリューを使用した行いたい処理を記述すればOK

まとめ

いかがでしたでしょうか。本記事では、JavaScriptで配列ではなくオブジェクトをループする方法について紹介しています。配列ではなくオブジェクトをループする際は少し特殊な手順を踏む必要がありますが、仕組みさえ理解すれば特に難しいものではないので、ぜひコード例を参考に学習いただければと思います。