神話序章

最近はReactiveだとか仮想DOMだとかがホットで、その辺りキャッチアップしていかなきゃなあと思ったのですが、今回はコードを書くその右手が疼く人のためのおすすめライブラリを紹介させてください。

神話第一章 Loki

ロキ（古ノルド語: Loki）は北欧神話に登場する悪戯好きの神。その名は「閉ざす者」、「終わらせる者」の意。

か、かっこいい。。。

Loki.js。browser/node両対応のオンメモリストレージエンジン。APIはMongo風で、慣れた人なら直観的に扱えるはず。

var db = new loki();

var users = db.addCollection('users');

users.insert({
  name: 'loki',
  email: 'loki@example.com',
  age: 18
});
users.insert({
  name: 'odin',
  email: 'odin@example.com',
  age: 20
});

var loki = users.findOne({name: 'loki'});

loki.age = 99;
users.update(loki);

db.saveToDisk();

ブラウザでの実行の場合localStorageにデータは保存され、nodeの場合だとファイルに書き出される。

indexingすることでfind系のメソッドを高速化できたり、開発途中のようだがtransactionalを実装していたりする。

こちらはパフォーマンスについての解説。
https://github.com/techfort/LokiJS/wiki/Indexing-and-Query-Performance

var db = new loki();

// 第二引数: indexingさせたいプロパティを指定
// 第三引数: transactional。trueを入れると、insertやupdateなどの途中でエラーが起きたりするとロールバックする。
var users = db.addCollection('users', ['name'], true);

ちなみにロキとは、邪悪な気質でいつも嘘をついている、北欧神話の中でも一目置きたい神。言葉巧みに操ってオーディンの息子同士で兄弟殺しをさせたり、飲み会中に同席した他の神を１人ずつ名指しで罵倒したりと、中々の悪行を行っており、業が深い。

神話第二章 Durandal

デュランダル - Wikipedia

デュランダル (Durandal) は、フランスの叙事詩『ローランの歌』に登場する英雄・ローランが持つ聖剣の名前。イタリア語読みでドゥリンダナ (Durindana) とも読まれ、デュランダーナとも呼ばれる。不滅の刃の意。

その柄は黄金であり、その中には“聖ペトロの歯”、“聖バジルの血”、“聖ドゥニの毛髪”、“聖母マリアの衣片”という四つの聖遺物が収められているという…

サイトもかっこいい。"Your search for a SPA framework ends here."

DurandalはSPA用のフレームワークで、機能の多くがjQuery, Knockout.js, Require.jsによって構成されている。Angularがall-in-oneでパッケージングされているのに対し、Durandalは上記を統括したライブラリとなっている。

依存ライブラリ通りだが、DurandalのモジュールシステムはもちろんAMDに基いており、この辺りで敬遠する人も多そうな印象である。また、データバインディングも基本的にknockoutそのままなので、少々冗長な記述を余儀なくされる。

開発者はRobEisenberg氏（実はangular2.0の開発者でもあったが、先日チームを離れたようだ）のブログに多くの情報が書かれている。

今後のロードマップとして

CommonJS, ES6モジュールの対応
WebComponentsの対応
Object.observeまたはdirty-trackingによるデータバインディング

等が上げられているが、現状あまり開発がアクティブとは言えない。

神話第三章 Nightmare

サイトデザインも厨二心がくすぐられる

Nightmare、segment.io社製。
phantomjsのラッパーライブラリで、生のphantomjsのようにコールバックでネストが深くなっていく苦しみもなく、シンプルにコードを記述できる。ほぼサンプル通りだが以下のような記述で書ける。

var Nightmare = require('nightmare');
new Nightmare()
  .goto('http://yahoo.com')
  .type('input[title="Search"]', '倒錯せし血涙の挽歌')
  .click('#search-submit')
  .wait()
  .screenshot('yahoo.png')
  .run();

UAやデバイスサイズの指定などは、以下の用に指定する。すべて最初のgoto()より前に記述する必要がある。

new Nightmare()
  .viewport(640, 1136) // デバイスサイズ
  .useragent('Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A365 Safari/600.1.4') // UA
  .authentication('user', 'password') // basic認証
  .goto('http://example.com')
  .run();

chaiでフォーム送信のテストを書くとこんな感じになる。

var Nightmare = require('nightmare');
var should = require('chai').should();

describe('form', function() {
  it('should show the posted text', function() {
    var expected = '邪気眼';
    new Nightmare()
      .goto('http://localhost:3000/')
      .type('input[name="text"]', expected)
      .click('input[type="submit"]')
      .wait()
      .evaluate(function() {
        return document.getElementById('#result');
      }, function(elm) {
        elm.innerText.should.equal(expected);
      })
      .run();
  });
});

testingのユーティリティメソッドのようなものはないので、casperjsとは似て非なるもの。自分の開発しているプロダクトなんかのプラグインを書けば、E2Eのテストがもっと書きやすくなるかもしれないし、コラボレーションツールなどのプラグインを書けば、スクレイピングツールとしてかなり優秀になる気がしている。

まとめ

名前が厨二っぽいライブラリは他にもたくさんあるので、みなさまのお気に入りを教えて頂けたら幸いです。

名前が厨二っぽいjsライブラリ3選

神話序章

神話第一章 Loki

神話第二章 Durandal

神話第三章 Nightmare

まとめ