配列データの処理を行う際に便利な
javascriptのライブラリ「Underscore.js」

難しいアルゴリズムを書かなくても
短いコードで処理が出来るらしいので、
インストールしてみました。

ただ、インストールするだけでは使えずしょんぼり。
なので、いろいろ調べながら解決してみました。

その方法をまとめてみる。

まずはUnderscore.jsをインストール

shell

yarn add underscore

// npmの場合
npm install underscore

インストール完了！

実際に使ってみる

インストールできたので、
試しに配列から任意の条件に合う値を出力してみる。

js

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より大きい数字をコンソールに出力

あれ？エラーが出たよ

console

require is not defined

underscoreを読み込むために記述している
requireが定義されていませんと出ている。

なんでだろう？グーグル先生に聞いてみた

そもそもnode.jsの関数だからブラウザでは使えないので、
今度はブラウザでもrequireが使えるように
browserifyを使ってビルドしてあげる必要があるらしい。

早速browserifyをインストール

shell

yarn add browserify
// npmの場合
npm install -g browserify

インストール完了！

ビルドします

shell

browserify assets/js/script.js -o build.js

// script.jsをbuild.jsと言う名前で出力

ビルド完了！

出来上がったjsファイルに変更

もともとscript.jsを読み込んでいた部分を出来上がったjsファイルに変更します。

html

<script type="text/javascript" src="./build.js"></script>

これで、requireが使えるようになりました！

もう一度、チャレンジしてみる

requireが使えるようになったのか、
再度、配列から任意の条件に合う値を出力してみます。

js

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以上の数字をコンソールに出力

console

[4]

できた！

これで、Underscore.jsを使うための準備が整いました。

やったね！

おまけ1：最大値を出力してみる

せっかくなので、_maxを使って、配列の中から最大値を出力してみます。

js

var _ = require('underscore');

var array = [1,2,3,4];
var result = _.max(array, function(num){
    return num;
});
console.log(result);
// 配列[1,2,3,4]から最大値をコンソールに出力

console

[4]

できた！

おまけ2：毎回ビルドする度にコマンド打つのは大変！効率化してみた

毎回ビルドする度にコマンド打つのは大変なので、
gulpを使って自動化します。

まずは事前にvinyl-source-streamをインストール

gulpでbrowserifyを使うには、これが必ず必要。
詳しくはこちらのサイトが参考になりました。（ありがとうございます！）

shell

yarn add vinyl-source-stream
// npmの場合
npm install vinyl-source-stream

インストール完了！

gulpfileにタスクを書く

まず、ビルドを実装するためにタスクを書きます。

gulpfile

/**
 * browserify
 */
gulp.task('browserify', function() {
return browserify('script.js')
  .bundle()
  .pipe(source('build.js'))
  .pipe(gulp.dest('assets/js'));
});

shell

gulp browserify

ビルドの実装完了！

gulpfileにwatchタスクを追加

さらに、常に監視しておいてほしいので、
上で作ったタスクをwatchに追加します。

gulpfile

/**
 * watch
 */
gulp.task('watch', function() {
  gulp.watch(directory. , ['browserify']);
});

shell

gulp watch

できた！これで、jsに変更があれば自動でbrowserifyタスクが動いてくれます。

毎回ビルドする面倒もなく、
Underscore.jsで配列処理の作業が出来るようになりました。

やったね！

おわり