Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

開発をちょっと楽にする、nodeモジュール紹介

技術

こんにちは，maxmellonです．

javascriptやnodeで開発する際に便利なnodeモジュールを紹介したいと思います．

モジュール選択・比較するときの判断基準

モジュールを紹介する前に，いくつか役割が重複したモジュールを選択する時の自分なりの ポイントをまとめておこうと思います．

  • Githubの更新が活発
    • 過渡期で破壊的変更がたくさんあることもあるのでその点は注意する
  • QiitaやStackOverFlowなどの情報が豊富
  • twitterなどで活動している有名jsエンジニアが利用しているかどうか
  • 巨大なものよりミニマムなもの（時と場合による）

これらを踏まえて，今から紹介していくモジュールから自分好みのものを 考えてくださると幸いです．

Testingフレームワーク/ランナー

簡単な分類

  • describe/context/it 形式のもの

    • mocha
    • jasmine

  • test 形式のもの

    • tape
    • ava

これら4つともサーバー/ブラウザで動作する．

それぞれ機能については，

が非常に分かりやすかったです．

HTTPクライアント

最近では，DOMを直接操作する必要がない場合があります． (Vue, Polymer, Angular, Reactなどを使った時) $.ajax は馴染みあるし使いやすいですが，DOM操作を直接行わない場合， すこしjQueryでは肥大です． そこで，superagentやaxiosが使われるようになってきました．

特に，複数のリクエストを同時に投げたり，非同期処理を 任意の順番で走らせたい場合の時には Promise化されているほうが綺麗にコードをかけます．

Promise化するメリットは，このスライドとか分かりやすかったです．

www.slideshare.net

なので僕は次のように利用するものを選択するのがベストだと考えています．

  • たくさんリクエストを送る可能性が高い -> axios
  • jQueryとかは使わない．ajaxだけ楽に書きたい -> superagent or axios
  • DOM操作する．ajax処理は比較的単純 -> $.ajax

その他知っておいて損はないモジュールなど

nyc

testのカバレッジを測るモジュール． CLIで実行した時の結果もなかなか見やすいと感じました．

lcovも吐き出してくれるので，codeclimateやCoverallsとの連携も可能．

lcovだけではなく，htmlも作るので，circle ciなどのartifactに， 出力されたhtmlを指定しておくと，よりカバレッジが見やすく便利．

使い方も非常にシンプルで，mochaやavaとかでも使えるので便利．

詳しい使い方は，次の記事がわかりやすかったです．

qiita.com

KeyboardJS

keycodeを意識することなくkeybindすることができます．

例えば，次のように．

const callback = (e) => {
  console.log('enter is pressed');
};
// 13でも'enter' でもbind可能
keyboardJS.bind('enter', callback);
keyboardJS.unbind('enter', callback);

単なるバインドであれば素のjavascriptでも案外簡単にできます． これが本当に便利なのは，コンビネーションや同時押しを超カンタンにかけるということです．

keyboardJS.bind('a + b', function(e) {
  console.log('a and b is pressed');
});
keyboardJS.bind('a + b > c', function(e) {
  console.log('a and b then c is pressed');
});
keyboardJS.bind(['a + b > c', 'z + y > z'], function(e) {
  console.log('a and b then c or z and y then z is pressed');
});

material-ui

material-design-lite の React版． cssフレームワーク版より使いやすかったです．（個人の感想）

Reactのアプリケーション開発時，jQuery依存しているcssフレームワークを使いたくない時とかに使うみたいです．

json-server

カップ麺を作るように，json流しこむだけでサーバー作れるというものです．

とりあえず今すぐモックサーバーを立てて動作を確かめたい時に便利です．

esbox

babelなどでトランスパイルすることなく， es6, es7のコードを動かすサンドボックス環境を提供してくれるもの．

ちょっと，確認するときや，部分的に動作確認したいときに便利です．．

sweet-scroll

ECMAScript2015対応, jQuery非依存のモダンなスムーススクロールモジュール

アニメーションの種類も豊富です．

lodash

モダンなjavascript関数群

underscoreより高速なのも，人気の理由だと思います．

もちろん，ブラウザでも利用できます．

lodashとunderscoreの比較はこの記事が分かりやすかったです．

qiita.com

一部では，lodashからramdaに乗り換えてる人もいるみたいです．

abigail

gulp, gruntからnpm script乗り換えた時に便利なモジュール．

npm-run-all のように並列，直列を指定でき，かつ watchも搭載している． 環境変数の設定も --env で行うことができる． (windows環境で NODE_ENV=production browserify... みたいなことをするとエラーになるのを防げる) 設定ファイルも不要で，package.jsonに追記する形式をとっている．

余談ですが，gulp, gruntからnpm scriptsに乗り換える理由は，次の記事がわかりやすかったです．

qiita.com

さいごに

AngularやVuejsをほとんどやったことがないので，若干Reactに偏った内容にも見えますが許してください．

OSSはたしかに便利ですが，業務アプリなどでは，とにかく使えばいいというわけでもないと思います．

僕が，これからOSSを利用する，あるいは利用を検討するときに思っていることは

利用するOSSにもバグが有る可能性がある

ということを忘れずに，そしてもしバグが直せるチャンスが有れば

積極的にpull requestを送っていけるようになれば良いなあと思います．

参考サイト