JSパッケージ管理Duoの使い方（DuoとD3を使ってビジュアルプロトタイピング）

Duo

duojs/duo · GitHub

Component, Browserify, Goに影響を受けたパッケージ管理。平たく言うと、Go方式でrequireしたものがComponentのようにビルドされる。

Duoのインストール

$ npm install -g duo

パッケージ取得時にGitHubのAPIを利用するので、API制限を緩和してプライベートリポジトリを利用できるよう、~/.netrcに認証情報を書き込んでおく。

machine api.github.com
  login <username>
  password <token>

使い方

var uid = require('matthewmueller/uid');

ビルドを実行するとmatthewmueller/uidリポジトリからコードを取得し、結合したコードが出力される。

$ duo index.js > build.js

結合後のコードは即時関数でラップされるので、CommonJSに準拠していることが求められる。

@import 'necolas/normalize.css';

CSSも@importによってリポジトリからコードを取得し、結合できる。

var js = require('./relative');
var text = require('./relative.txt');
var html = require('./relative.html');

相対パスを使用することで、ローカルに存在するファイルをrequireできる。テキストやhtmlを読み込むとStringとして展開される。

D3を使った実例

上記をふまえると、D3本体と集計対象データを含んだJSが生成できる。

var _ = require('lodash/lodash');
var d3 = require('mbostock/d3');
var dataset = require('./dataset.tsv');

var svg = d3.select('.target')
    .append('svg')
    .attr({ width: 640, height: 480});

svg.selectAll('circle')
    .data(
        _.map(dataset.split('\n'), function(v) {
            return v.split('\t');
        })
    )
    .enter()
    .append('circle')
    .attr('cx', function(d) {
        return d[0];
    })
    .attr('cy', function(d) {
        return d[1];
    })
    .attr('r', function(d) {
        return d[2];
    });

ローカルでサーバを立ち上げなくてもクロスオリジンを回避しつつビジュアライズできるので、プロトタイピングに大変便利だった。