配列やオブジェクトを操作する時に便利なJavascriptライブラリ「collect.js」の紹介です。
Javascriptで配列・オブジェクトを操作するライブラリと言えば
" lodash.js " が鉄板ですが、PHPで有名なライブラリの１つに* 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]
"""
PHPのMVCフレームワーク「Laravel」に用意されている * Collection メソッド と
同じ振る舞いを Javascriptで 有志によって再現されたライブラリ
( * 配列やオブジェクトを操作するメソッド )
"""
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は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()// 配列を１つにまとめる
.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ページ目, アイテムは２つずつ
.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' } ]
*/
以上がcollect.jsの紹介でした。
Laravelで開発しているプロジェクトの フロントエンド側で使うと 効率が上がりそうなライブラリです。
上記で紹介したのはメソッドは ほんの一部なので 気になった人はゼヒ×２チェックしてみてください！
GitHub : ecrmnn/collect.js
