【Underscore.js】最初の壁を攻略してみた


配列データの処理を行う際に便利な
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で配列処理の作業が出来るようになりました。

やったね!

おわり