【ReactNative/JavaScript】JSONオブジェクトから特定キーに対するユニーク値のリストを取得する

こんにちは。今日もReact Nativeと格闘しております。今日は、React Native（React Nativeアプリ開発中に直面した問題ですが）、というよりはJava Scriptの話ですが、また一つスッキリしたことがありましたのでここに残しておこうと思います。

実現したいこと

以下のようなJSONオブジェクトから、特定のキーのユニーク値のリストを取得したかったです。

data = [
{"key1":"valueA","key2":....},
{"key1":"valueA","key2":....},
{"key1":"valueB","key2":....},
{"key1":"valueB","key2":....},
{"key1":"valueB","key2":....},
{"key1":"valueC","key2":....}
]

key1のユニーク値のリストとして、["valueA",valueB","valueC"]を取得したい

実現方法

こちらのStack Overflowで解決することができました！

https://stackoverflow.com/questions/53720210/how-to-get-unique-value-of-keys-from-array-of-object-using-javascript

const list = data.map((value) => value.key1).filter((value, index, _data) => _data.indexOf(value) == index)
console.log(list)

む・・・確かにのぞんだ結果は取得できるようになりましたが、これは一体何をやっとるんや・・・Java Scriptの構文にあまり詳しくない私はうっと思ってしまいました。ので、これを機にもう少し構文の理解を深めておきます。

まずは、それぞれの段階でどういった情報が出ているかを実際に確認しておきます。

ステップ１：map関数を適用する

初めにdataに対してdata.map((value)=>console.log(value))を実行して、処理の結果がどうなるかをみてみます。以下の通り、JSONの各要素がそれぞれのObjectとして出力されていることが分かります。

Object {
  "key1": "valueA",
}
Object {
  "key1": "valueA",
}
Object {
  "key1": "valueB",
}
Object {
  "key1": "valueB",
}
Object {
  "key1": "valueB",
}
Object {
  "key1": "valueC",
}

なので、data.map((value)=>console.log(value.key1))は、指定したキーに対する値の一覧を出力しているわけですね。この段階では値に重複はあります。

valueA
valueA
valueB
valueB
valueB
valueC

ちなみに、map関数の定義は以下から確認できます。上記の実験結果を見ると、書いていることの意味がよく分かりますね。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

ステップ２：filter関数を適用する

さて、次にFilter関数の適用です。引数が３つもあってようわからんので、こちらは定義の方から確認しておきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

構文：

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

例文：
const words = [‘spray’, ‘limit’, ‘elite’, ‘exuberant’, ‘destruction’, ‘present’];
const result = words.filter(word => word.length > 6);
console.log(result);

なるほど。改めて、今回の構文を眺めてみます。ステップ１で取得したリストに条件式を適用して、その条件に合致するオブジェクトを取得する、という処理であることまでわかりました。

outputList.filter((value, index, _data) => _data.indexOf(value) == index)

最後に、条件式の中身を理解するためにもう一歩。

ステップ３：indexOfを使ってユニーク値のみを取得する

IndexOfって何してくれるんだっけ・・・？これも定義を確認しておきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

indexOf() メソッドは、呼び出す String オブジェクト中で、 fromIndex から検索を始め、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返します。

なるほど！指定された値が”最初に現れた”インデックスを返すんですね・・・！確かにこれを使うと重複が排除できそうです。

_data.indexOf(value) == indexという条件式にすることで、最初に現れたオブジェクトだけ取得することができそうです。

以上、JavaScriptで、JSONの特定キーに対するユニーク値のリストを取得する方法の解説でした。mapやindexOf, filterなどの復習にもなって良い勉強になりました・・・・！同じ問題に悩まれている方の参考に少しでもなりましたら幸いです！

おしまい