Edited at

JavaScript モジュール辞書 (自分用)

More than 3 years have passed since last update.

よく使う/見てるモジュールをまとめておきます。Nodeで使うものフロントエンドで使うもの両方含まれます。分野ごとに分けてアルファベット順に。基本、1モジュールごとES6の例文を付けます。



  • 含む: Nodeで動く


  • 含む: フロントエンドで動く

  • 含まない: UIコンポーネント系

  • 含まない: フレームワークっぽいやつ


一覧 (アルファベット順)

any-promise / buble / chokidar / chokidar-cli / chalk / co / cpy / cssnano / del / fecha / fetch / fortune / fs-extra / fs-promise / loglevel / marked / moji / moment / mustache / mz / node-check-updates / request / postcss / pretty-hrtime / rollup / socket.io / socket.io-client / yo-yo / yolk ...随時追加中。


API・通信


fetch

XMLHttpRequestに代わる新標準。旧ブラウザに対応させる時はこのポリフィルを使う。Safari以外では足並みが揃ってきた印象。サーバサイドでも使える。

import 'whatwg-fetch' 

fetch('/users.html')
.then(response => response.text())
.then(body => {
document.body.innerHTML = body
})


fortune

軽量なAPIサーバを作る時に。JSON APIなどに対応。LoopBackやDeploydですらめんどくさい時に。

const fortune = require('fortune')

const store = fortune({
user: {
name: { type: String },
posts: { link: 'post', inverse: 'author', isArray: true }
},
post: {
message: { type: String },
author: { link: 'user', inverse: 'posts' }
}
})


  • リポジトリ: npm, github

  • 月間ダウンロード: 20K


request

HTTPリクエストクライアント。URLを指定して外部サーバからデータを取得する。

const request = require('request')

request('http://google.com/doodle.png')
.pipe(fs.createWriteStream('doodle.png'))


  • リポジトリ: npm


socket.io

サーバ側。

const

app = require('express')(),
server = require('http').Server(app),
io = require('socket.io')(server)

server.listen(80)

io.on('connection', socket => {
socket.emit('news', { hello: 'world' });
socket.on('my other event', data => { console.log(data) })
})


socket.io-client

クライアント側。

import io from 'socket.io-client'

const socket = io('http://localhost')

socket.on('news', data => {
console.log(data)
socket.emit('my other event', { my: 'data' })
})

socket.on('disconnect', () => {
// 通信が切れた時の処理
})

明示的に再接続だけするメソッドはない(多分)ので、適当なオプジェクトを取って来ることで、その代わりとすること。reconnectオプションのからみにも注意。


CSS


normalize-css

スタイルのノーマライズ。JavaScriptじゃないけどnpm経由で。


paper-css

印刷用CSS。JavaScriptじゃないけどnpm経由で。


postcss

JavaScript APIから使う。

const

co = require('co'),
postcss = require('postcss'),
postcssImport = require('postcss-import'),
postcssUrl = require('postcss-url'),
autoprefixer = require('autoprefixer'),
cssnano = require('cssnano'),
fsp = require('fs-promise')

co(function* (config) {
const
from = 'src/style.css',
to = 'style.css',
css = yield fsp.readFile(from, 'utf8'),
p = postcss()
.use(postcssImport())
.use(postcssUrl())
.use(autoprefixer())
.use(cssnano({ safe: true })),
result = yield p.process(css, { from, to })

yield fsp.writeFile(to, result.css)
yield fsp.writeFile(`${ to }.map`, result.map)
})


autoprefixer

(執筆中...)


cssnano


  • リポジトリ: npm, github

  • 月間ダウンロード: 1.2M


postcss-import

(執筆中...)


postcss-url

(執筆中...)


日付操作


fecha

2KBと軽量。moment.js(13KB)じゃ重すぎるってときに。ただし、フォーマットとパースのみなので、日付の足し算引き算とかはできない。

import fecha from 'fecha'

fecha.format(new Date(), 'YYYY/mm/dd h:mm:ss');


  • リポジトリ: npm


moment

日付操作ならほぼなんでもできるライブラリ。足し算引き算、国際対応ほか。ただし、重たいのでバンドルする場合は要注意。

import moment from 'moment'

moment().format('YYYY/mm/dd h:mm:ss') // 現在の日付と時刻
moment().add(7, 'days').format('YYYY/mm/dd') // 7日後


pretty-hrtime

process.hrtime()の返す値を、読みやすく。gulpの内部で使われている。自作のライブラリで実行時間の確認が必要な場合に。

const prettyHrtime = require('pretty-hrtime')

const start = process.hrtime()
// do stuff

const
end = process.hrtime(start),
words = prettyHrtime(end)
console.log(words) // '1.2 ms'


データベース


momy

(執筆中...)


mongodb

(執筆中...)


mysql

(執筆中...)


Express


express-middleware-rollup

(まだ作ってる最中...)


ファイル操作


chokidar

ファイルの変更を検知する。

const chokidar = require('chokidar')

chokidar.watch('src/**', {
ignoreInitial: true
}).on('all', (e, p) => {
console.log(`Update detected: ${ p }`)
/* do something */
})


chokidar-cli

chokidarのCLI版。

$ chokidar lib/* -c 'make build'

あるいは、package.jsonで、scriptsに書く。

{

"scripts": {
"watch": "chokidar lib/* -c 'make build'"
}
}


cpy

ファイルをコピーする。

const cpy = require('cpy')

cpy(['src/*.png', '!src/goat.png'], 'dist').then(() => {
console.log('files copied')
})


  • リポジトリ: npm, github

  • 月間ダウンロード: 5K


del

ファイル/フォルダを削除する。rimrafより使いやすい。ファイルはglobで指定可能。

const del = require('del')

del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => { ... })


  • リポジトリ: npm, github

  • 月間ダウンロード: 2.8M


fs-extra

標準ライブラリfsでサポートされないけれどよく使われる関数をまとめたもの。ディレクトリの再帰的な作成ほか。

const fs = require('fs-extra')

fs.mkdirs('/tmp/some/long/path/that/prob/doesnt/exist', (err) => {
if (err) return console.error(err)
console.log("success!")
})


  • リポジトリ: npm

  • 月間ダウンロード: 5M


fs-promise

ファイル操作をpromiseで扱えるようにするラッパー。fs-promiseもカバーする。標準ライブラリfsについてはmz/fsのまま。

const fsp = require('fs-promise')

fsp.writeFile('/path/to/file', 'hello world')
.then(() => fsp.readFile('/path/to/file', 'utf8'))
.then(contents => { /* do something */ })


  • リポジトリ: npm, github

  • 月間ダウンロード: 100K


特定のファイルタイプに特化したもの


csv-parser

(執筆中...)


JSONStream

巨大なjsonファイルを扱いたい場合、これでストリームとして読み込む。


Promise, Async/Await


any-promise

主に、旧いNodeのバージョンに対応させる必要がある場合に。

const Promise = require('any-promise')

function promiseReturningFunction(){
return new Promise((resolve, reject) => {...})
}


co

プロミス地獄から解放してくれるありがたいライブラリ。Async/Awaitが来るまではこちらで。


stepping stone towards ES7 async/await


const

co = require('co'),
fsp = require('fs-promise')

co(function* () {
yield fsp.writeFile('/path/to/file', 'hello world')
const contents = yield fsp.readFile('/path/to/file', 'utf8')
console.log(contents) // 'hello world'
})


  • リポジトリ: npm, github

  • 月間ダウンロード: 1.6M


mz

NodeがAPIをES6に対応させるまで、その替わりをはたすラッパー。主にpromisifyする。

const exec = require('mz/child_process').exec

exec('node --version').then(stdout => {
console.log(stdout)
})


ルーター

(執筆中...)


ストリーム


event-stream

(執筆中...)


merge-stream

(執筆中...)


streamqueue

(執筆中...)


through2

(執筆中...)


文字列操作


moji

全角半角変換ほか、日本語特有な文字列操作。

import moji from 'moji'

// 全角英数 → 半角英数
moji('ABCD01234').convert('ZE', 'HE').toString()
// 「ひらがな」のみに絞込
moji('abcあいうアイウ123').filter('HG').toString()


  • リポジトリ: npm, github

  • 月間ダウンロード: 0.8K


テンプレート・テキスト整形


js-beautify

(執筆中...)


marked

フロントでも使えるmarkdownコンバータ。

import marked from 'marked'

const converted = marked('I am using **markdown**.')


  • リポジトリ: npm


mustache

const Mustache = require('mustache')

const
input = 'My name is {{{ name }}}.',
variables = { name: 'John' },
rendered = Mustache.render(input, variables)


テスト

(執筆中...)


トランスパイル、バンドラー


babel

最近はbubleに少しずつ切り替えているものの、まだ使う機会が多い。とっさに見るES6のドキュメントとしてLearn ES2015が助かる。


babel-cli

コマンドラインで使う場合。


babel-core

Nodeから使う場合。


buble

babelよりシンプルな分、圧倒的に速い。実際には、これを直接使うとううよりは、rollupのプラグイン経由で使うことが多い。

const buble = require('buble')

const result = buble.transform(source)

あるいはコマンドラインから。

$ buble input.js > output.js


browserify

最近、あんまり使わないけど、お世話になりました。


watchify

(執筆中...)


coffeeify

(執筆中...)


rollup

バンドラーの一押し。

const

co = require('co'),
rollup = require('rollup').rollup,
buble = require('rollup-plugin-buble'),
commonjs = require('rollup-plugin-commonjs'),
inject = require('rollup-plugin-inject'),
json = require('rollup-plugin-json'),
resolve = require('rollup-plugin-node-resolve')

co(function* (config) {
const
entry = 'src/index.js',
dest = 'dest/index.js',
bundle = yield rollup({
entry,
plugins: [
json(),
inject({ 'config': config }),
resolve({ jsnext: true, main: true }),
commonjs(),
buble()
]
})

yield bundle.write({
format: 'iife',
moduleName: 'app',
dest
})
})


rollup-plugin-babel

通常は、上記の例のbubleを置き換えればOK。.babelrcを別途設置し、プリセットとしてes2015-rollupを指定。

bundle = yield rollup({

entry,
plugins: [
babel()
]
})

.babelrcを置きたくない場合、次のようにする。

bundle = yield rollup({

entry,
plugins: [
babel({
babelrc: false,
presets: ['es2015-rollup']
})
]
})


rollup-plugin-buble

(執筆中...)


rollup-plugin-commonjs

(執筆中...)


rollup-plugin-inject

(執筆中...)


rollup-plugin-json

(執筆中...)


rollup-plugin-node-resolve

以前は、rollup-plugin-npmという名称だった。node_modules内のモジュールを探し出しだすプラグイン。

{

jsnext: true, // package.jsonでjsnextが指定された場合に優先
main: true, // デフォルトで`true。package.jsonのmain
browser: true // package.jsonでbrowserが指定された場合に優先
}


webpack

(略)


UI

Polymer/React/Riot/Vueとかは略。コンポーネントライブラリも略。この辺はどこか別のところで。


yo-yo

ES6でテンプレート構文入ったんだから、jsx要らないよね的な。

const yo = require('yo-yo')

const element = yo`<h1>hello world!</h1>`


yolk

アイコンの目玉焼きがかわいい。jsxだけど、なるべく単純にをモットーに。RxJsでごにょごにょする系。


その他


chalk

ターミナルに表示する文字列の色とスタイルを指定するのに、\x1b[1;31mとかやると可読性が落ちてしまうけれど、その辺をchalkは解決してくれる。同様のライブラリとしては、clorもある。cf. ターミナルでの色指定について

const chalk = require('chalk')

console.log(chalk.blue('Hello world!'))


loglevel

ログレベル設定だけできる、シンプルな実装。クライアントサイドでの利用がメイン。

const log = require('loglevel')

log.setLevel(log.levels.DEBUG, false)

log.debug('log message')


node-check-updates

依存パッケージのアップデートを確認する。

$ ncu


  • リポジトリ: npm


補足


  • 月間ダウンロードは、npmでのダウンロード件数です。調べた時現在なので、参考程度に。

  • 主にブラウザで使うものは import something from 'something' と表記

  • 主にサーバで使うものは const something = require('something') と表記

  • まだ、書き途中です。しばらくの間、使ったモジュールを随時ここにメモしていこうかと、思います。