配列やオブジェクトを操作する時に便利なJavascriptライブラリ「collect.js」の紹介です。

 Javascriptで配列・オブジェクトを操作するライブラリと言えば
" lodash.js " が鉄板ですが、PHPで有名なライブラリの1つに* Collectionがあります。
( * Laravelに組み込まれているコンポーネントの1つ )

// LaravelのCollectionメソッド
$collection = collect([1, 2, 3, 4])
               ->filter(function ($value, $key) {
                         return $value > 2;
                        })
               ->all();
// [3, 4]

 
 そんなCollectionと同等の機能・メソッドを Javascriptでも使えるようにされた、
Laravelデベロッパーさんにオススメのライブラリが「collect.js」です。

// collect.js
const collection = collect([1, 2, 3, 4])
                    .filter((value, key) => {
                              return value > 2;
                     })
                    .all();
// [3, 4]


collect.jsの概要

"""
 PHPのMVCフレームワーク「Laravel」に用意されている * Collection メソッド
同じ振る舞いを Javascriptで 有志によって再現されたライブラリ
( * 配列やオブジェクトを操作するメソッド )
"""

collect.jsのインストール

collect.jsの入手はコマンドライン上から' npm || yarn ' コマンドを使っておこないます。

# npm
npm install collect.js --save
# yarn
yarn add collect.js
// collect.jsの読み込み

// CommonJS ( node.js ) の場合
const collect = require("collect.js");
// ES6/2015 ( babel )の場合
import * as collect from 'collect.js'


collect.jsの使い方

collect.jsはLodash.jsとコンセプトが少し違い、メソッドチェーン有りきの処理になります。

 collect.jsの処理は collect() メソッド内の引数に 
元となる 配列 || オブジェクトをセットすることから始まります。

collect([1, 2, 3, 4, 5])


' collect()' メソッドは lodash.jsの ' _.chain() ' メソッドに相当し 処理を繋げていくことができます。
collect()メソッドでラップした 元となる配列 | オブジェクトは 一旦"Collectionオブジェクト"に変換されます )

//元になる配列
let baseArray = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];

const sample = collect(baseArray)
                .collapse()// 配列を1つにまとめる
                .max(); // 配列内で一番大きい数字を返す
// output: 9

  
 collect.jsには 執筆時点で70以上のメソッドが用意されていますが、
よく使いそうなメソッドを集めてみました。

- all() || toArray() || toJson()

この上記3つのメソッドは配列やオブジェクトの結果を返す時に使います。

// Collectionオブジェクトとして返ってきます
collect([1, 2, 3]) // Collection { items: [ 1, 2, 3 ] }

// 結果を配列として返します
collect([1, 2, 3]).all(); // [1, 2, 3]
collect([1, 2, 3]).toArray(); // [1, 2, 3]

// 結果をJSONで返します
collect([1, 2, 3]).toJson(); // [1, 2, 3]


- chunk()

" chunk() " は 元になる配列を "指定したところで分割" するメソッドです。

// chunk
const chunks = collect([1, 2, 3, 4, 5, 6, 7])
                .chunk(4) // 4番目(5)で分割
                .all();
                
console.log(chunks); //=> [[1, 2, 3, 4], [5, 6, 7]]


- pluck()

" pluck() " は オブジェクト内の "指定したkeyのみを取り出す" メソッドです。

// pluck()
const users = [
  { id: 1, name: "シンジ" },
  { id: 2, name: "アスカ" }
];

const collection = collect(users)
                    .pluck("name") // key 'name' だけを取り出し
                    .all()

console.log(collection); // [ 'シンジ', 'アスカ' ]


- flatten()

" flatten() " は オブジェクトを "1つの配列にまとめる" メソッドです。

// flatten
const baseObject = {
  club: "Liverpool",
  players: ["Sturridge", "Firmino", "Coutinho"]
};

const collection = collect(baseObject)
                    .flatten() // オブジェクトを配列に変換
                    .all();

console.log(collection);
// [ 'Liverpool', 'Sturridge', 'Firmino', 'Coutinho' ]


- forPage()

" forPage() " は "ページネーション" 機能を実装するメソッドです。
第一引数には "現在のページ"、第二引数には "取り出すアイテム数"が入ります。

// forPage()
const users = [
  { id: 1, name: "シンジ" },
  { id: 2, name: "アスカ" },
  { id: 3, name: "レイ" }
];

const collection = collect(users)
                    .forPage(1, 2) // 1ページ目, アイテムは2つずつ
                    .all();

console.log(collection);
// [ { id: 1, name: 'シンジ' }, { id: 2, name: 'アスカ' } ]


- map()

" map() " は ベースとなる配列を加工する時に使うメソッドです。
( オブジェクトを加工する場合は "mapWithKeys()" メソッドが用意されています )

// map()
const collection = collect([1, 2, 3, 4, 5])
                    .map(item => {
                      return item * 2;
                    })
                    .all();

console.log(collection); // [ 2, 4, 6, 8, 10 ]


- filter()

" filter() " は 値が ' true' の配列を返すメソッドです。また、反対の意味をもつ ' reject ' メソッドも用意されています。
( 下記の例では Key 'created_at' が '2017' の値を返しています )

// filter()
const base = [
  { id: 1,
    user_name: "シンジ",
    created_at: "2016-07-28 09:44:27" },
  { id: 2,
    user_name: "アスカ",
    created_at: "2017-03-20 06:51:29" },
  { id: 3,
    user_name: "レイ",
    created_at: "2017-01-27 21:16:14" }
];

let b = collect(base)
  .filter(item => {
    return item.created_at.includes("2017");
  })
  .toArray();

/* outputs
[ { id: 2, user_name: 'アスカ', created_at: '2017-03-20 06:51:29' },
  { id: 3, user_name: 'レイ', created_at: '2017-01-27 21:16:14' } ]
*/

 

Summary

以上がcollect.jsの紹介でした。

Laravelで開発しているプロジェクトの フロントエンド側で使うと 効率が上がりそうなライブラリです。

上記で紹介したのはメソッドは ほんの一部なので 気になった人はゼヒ×2チェックしてみてください!

GitHub : ecrmnn/collect.js

 

この記事のカテゴリ

プログラミング

この記事のタグ

jsライブラリー , Laravel , javascript

Socialシェアボタン

スポンサーリンク