よく使う/見てるモジュールをまとめておきます。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' }
}
})
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) })
})
- リポジトリ: github
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
オプションのからみにも注意。
- リポジトリ: github
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
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')
})
del
ファイル/フォルダを削除する。rimraf
より使いやすい。ファイルはglobで指定可能。
const del = require('del')
del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => { ... })
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 */ })
特定のファイルタイプに特化したもの
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'
})
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()
テンプレート・テキスト整形
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が助かる。
- リポジトリ: github
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')
と表記 - まだ、書き途中です。しばらくの間、使ったモジュールを随時ここにメモしていこうかと、思います。