[Javascript] データリストからID一覧を抜き出してunique処理する簡単な方法

javascriptのデータ処理は、find,filter,map,sortで、大体思った通りの処理ができてしまいます。 この辺に慣れておくと、非情に効率のいいコードが書けるので、webでシステム構築を行う人は絶対に使い慣れておきましょう。 今回、とある雑多に登録されたデータリストにセットされているname値のユニークリストを作成するという状況があり、そのコードがシンプルに書けたので、ブログに備忘録しておきます。 データベースなどから取得したデータの処理とかに使えるので、効率化ハンパないです。

データリストサンプル

次のようなデータリストをサンプルとして用意してみました。 const dataLists = [ { name:'a', value:1, }, { name:'a', value:2, }, { name:'b', value:3, }, { name:'c', value:4, }, ] データの中身は、objectデータを配列で持っている状態で、まさにSQLデータベースから取得したばかりの状態ってこんな感じだと思います。 ちなみに、objectデータの中身はどんなカラムを持っていても対応できるので、応用次第で利用頻度無限大です。

name値一覧を抜き出してunique処理するコード

いきなり正解コードを書きます。 Array.from(new Map(dataLists.map(e => [e.name])).keys()) > ['a', 'b', 'c'] １行でできてしまいますが、このコードを見て、意味不明と感じた人のために、解説もしておきます。 （未来の自分の為）

コード解説

まず、dataListをmapで、name値を抜き出します。 dataLists.map(e => [e.name , e]) [ ["a",{"name":"a","value":1}], ["a",{"name":"a","value":2}], ["b",{"name":"b","value":3}], ["c",{"name":"c","value":4}] ] 必要なのはname値のkeyの部分だけなので、一覧を取得します。 配列in配列なのは、map処理の特徴ですが、通過途中なので気にしなくても大丈夫です。 そして、元データも入れ込んでいるのは、この後いろいろな処理に繋げやすくするためなので今回は無くても大丈夫なんですが、便利スニペットとして書いておきました。 次に、new Mapとすると、配列を連想配列に変換してくれます。 コレ本当に便利ですよね。 new Map(dataLists.map(e => [e.name])) { "a":{"name":"a","value":2}, "b":{"name":"b","value":3}, "c":{"name":"c","value":4} } この時点で、key値がunique化されていることが分かりますね。 そして、このkey部分のみを抜き出します。 new Map(dataLists.map(e => [e.name])).keys() MapIterator {'a', 'b', 'c'} Mapインスタンスで処理しているので、Mapイテレータで値が返ります。 このままだと扱いづらいので、最後に配列に変換します。 Array.from(...) 分解するとこんな処理を１行で行っていたんですね。

個人的感想

こんな風に、コードが理解できると、分解して行くことで内容をちゃんと把握していくことができ、 さらにはその応用ができるようになると、自分のコードがどんどんスマートになっていくでしょう。 でも、他人が書いたこういうコードって、ホント理解するのに時間がかかることが多いので、 読みなれるというのもスキルの一つかもしれませんね。 ちなみに、今回、mapデータを配列データに変換する処理を行いましたが、mapデータをObjectデータに変換したい場合は、次のようにするといいですよ。 # Mapデータを配列データに変換 Array.from(Mapデータ) # MapデータをObjectデータに変換 Object.fromEntries(Mapデータ) なんとなく、共通点があって、言語理解が進みますね。