配列データの処理を行う際に便利な
javascriptのライブラリ「Underscore.js」
難しいアルゴリズムを書かなくても
短いコードで処理が出来るらしいので、
インストールしてみました。
ただ、インストールするだけでは使えずしょんぼり。
なので、いろいろ調べながら解決してみました。
その方法をまとめてみる。
まずはUnderscore.jsをインストール
yarn add underscore
// npmの場合
npm install underscore
インストール完了！
実際に使ってみる
インストールできたので、
試しに配列から任意の条件に合う値を出力してみる。
var _ = require('underscore');
var array = [1,2,3,4];
var result = _.filter(array, function(num){
return num>3;
});
console.log(result);
// 配列[1,2,3,4]から4より大きい数字をコンソールに出力
あれ？エラーが出たよ
require is not defined
underscoreを読み込むために記述している
requireが定義されていませんと出ている。
なんでだろう？グーグル先生に聞いてみた
そもそもnode.jsの関数だからブラウザでは使えないので、
今度はブラウザでもrequireが使えるように
browserifyを使ってビルドしてあげる必要があるらしい。
早速browserifyをインストール
yarn add browserify
// npmの場合
npm install -g browserify
インストール完了！
ビルドします
browserify assets/js/script.js -o build.js
// script.jsをbuild.jsと言う名前で出力
ビルド完了！
出来上がったjsファイルに変更
もともとscript.jsを読み込んでいた部分を出来上がったjsファイルに変更します。
<script type="text/javascript" src="./build.js"></script>
これで、requireが使えるようになりました！
もう一度、チャレンジしてみる
requireが使えるようになったのか、
再度、配列から任意の条件に合う値を出力してみます。
var _ = require('underscore');
var array = [1,2,3,4];
var result = _.filter(array, function(num){
return num>3;
});
console.log(result);
// 配列[1,2,3,4]から3以上の数字をコンソールに出力
[4]
できた！
これで、Underscore.jsを使うための準備が整いました。
やったね！
おまけ1：最大値を出力してみる
せっかくなので、_maxを使って、配列の中から最大値を出力してみます。
var _ = require('underscore');
var array = [1,2,3,4];
var result = _.max(array, function(num){
return num;
});
console.log(result);
// 配列[1,2,3,4]から最大値をコンソールに出力
[4]
できた！
おまけ2：毎回ビルドする度にコマンド打つのは大変！効率化してみた
毎回ビルドする度にコマンド打つのは大変なので、
gulpを使って自動化します。
まずは事前にvinyl-source-streamをインストール
gulpでbrowserifyを使うには、これが必ず必要。
詳しくはこちらのサイトが参考になりました。 （ありがとうございます！）
yarn add vinyl-source-stream
// npmの場合
npm install vinyl-source-stream
インストール完了！
gulpfileにタスクを書く
まず、ビルドを実装するためにタスクを書きます。
/**
* browserify
*/
gulp.task('browserify', function() {
return browserify('script.js')
.bundle()
.pipe(source('build.js'))
.pipe(gulp.dest('assets/js'));
});
gulp browserify
ビルドの実装完了！
gulpfileにwatchタスクを追加
さらに、常に監視しておいてほしいので、
上で作ったタスクをwatchに追加します。
/**
* watch
*/
gulp.task('watch', function() {
gulp.watch(directory. , ['browserify']);
});
gulp watch
できた！これで、jsに変更があれば自動でbrowserifyタスクが動いてくれます。
毎回ビルドする面倒もなく、
Underscore.jsで配列処理の作業が出来るようになりました。
やったね！
おわり