25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptAdvent Calendar 2014

Day 14

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

Last updated at Posted at 2014-12-13

神話序章

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

神話第一章 Loki

ロキ - Wikipedia

ロキ(古ノルド語: 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);

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

神話第二章 Durandal

デュランダル - Wikipedia

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

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

Screen Shot 2014-12-13 at 21.26.18.png
サイトもかっこいい。"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.png
サイトデザインも厨二心がくすぐられる

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のテストがもっと書きやすくなるかもしれないし、コラボレーションツールなどのプラグインを書けば、スクレイピングツールとしてかなり優秀になる気がしている。

まとめ

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

25
24
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?