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


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

- **含む**: Nodeで動く
- **含む**: フロントエンドで動く
- 含まない: UIコンポーネント系
- 含まない: フレームワークっぽいやつ

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

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

## API・通信

### fetch

`XMLHttpRequest`に代わる新標準。旧ブラウザに対応させる時はこのポリフィルを使う。Safari以外では[足並みが揃ってきた](http://caniuse.com/#search=fetch)印象。サーバサイドでも使える。

```javascript
import 'whatwg-fetch' 

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

- リポジトリ: [npm](https://www.npmjs.com/package/whatwg-fetch), [github](https://github.com/github/fetch)

### fortune

軽量なAPIサーバを作る時に。[JSON API](http://jsonapi.org/)などに対応。LoopBackやDeploydですらめんどくさい時に。

```javascript
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](https://www.npmjs.com/package/fortune), [github](https://github.com/fortunejs/fortune)
- 月間ダウンロード: 20K

### request

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

```javascript
const request = require('request')

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

- リポジトリ: [npm](https://www.npmjs.com/package/request)

### [socket.io](http://socket.io)

サーバ側。

```javascript
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](https://github.com/socketio/socket.io)

### socket.io-client

クライアント側。

```javascript
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](https://github.com/socketio/socket.io-client)

## CSS

### normalize-css

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

### paper-css

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

### postcss

JavaScript APIから使う。

```javascript
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](http://cssnano.co/)

- リポジトリ: [npm](https://www.npmjs.com/package/cssnano), [github](https://github.com/ben-eb/cssnano)
- 月間ダウンロード: 1.2M

#### postcss-import

(執筆中...)

#### postcss-url

(執筆中...)


## 日付操作

### fecha

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

```javascript
import fecha from 'fecha'

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

- リポジトリ: [npm](https://www.npmjs.com/package/fecha)


### moment

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

```javascript
import moment from 'moment'

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

- リポジトリ: [npm](https://www.npmjs.com/package/moment), [github](https://github.com/moment/moment)

### pretty-hrtime

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

```javascript
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'
```

- リポジトリ: [npm](https://www.npmjs.com/package/pretty-hrtime), [github](https://github.com/robrich/pretty-hrtime)

## データベース

### momy

(執筆中...)

### mongodb

(執筆中...)

### mysql

(執筆中...)

## Express

### express-middleware-rollup

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

## ファイル操作

### chokidar

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

```javascript
const chokidar = require('chokidar')

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

### chokidar-cli

chokidarのCLI版。

```bash
$ chokidar lib/* -c 'make build'
```

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

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

### cpy

ファイルをコピーする。

```javascript
const cpy = require('cpy')

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

- リポジトリ: [npm](https://www.npmjs.com/package/cpy), [github](https://github.com/sindresorhus/cpy)
- 月間ダウンロード: 5K

### del

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

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

- リポジトリ: [npm](https://www.npmjs.com/package/del), [github](https://github.com/sindresorhus/del)
- 月間ダウンロード: 2.8M

### fs-extra

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

```javascript
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](https://www.npmjs.com/package/fs-extra)
- 月間ダウンロード: 5M

### fs-promise

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

```javascript
const fsp = require('fs-promise')
 
fsp.writeFile('/path/to/file', 'hello world')
  .then(() => fsp.readFile('/path/to/file', 'utf8'))
  .then(contents => { /* do something */ })
```

- リポジトリ: [npm](https://www.npmjs.com/package/fs-promise), [github](https://github.com/kevinbeaty/fs-promise)
- 月間ダウンロード: 100K

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

### csv-parser

(執筆中...)

### JSONStream

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


## Promise, Async/Await

### any-promise

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

```javascript
const Promise = require('any-promise')
 
function promiseReturningFunction(){
    return new Promise((resolve, reject) => {...})
}
```

### co

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

> stepping stone towards ES7 async/await

```javascript
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](https://www.npmjs.com/package/co), [github](https://github.com/tj/co)
- 月間ダウンロード: 1.6M

### mz

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

```javascript
const exec = require('mz/child_process').exec
 
exec('node --version').then(stdout => {
  console.log(stdout)
})
```

## ルーター

(執筆中...)

## ストリーム

### event-stream

(執筆中...)

### merge-stream

(執筆中...)

### streamqueue

(執筆中...)

### through2

(執筆中...)


## 文字列操作

### moji

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

```javascript
import moji from 'moji'
// 全角英数 → 半角英数
moji('ＡＢＣＤ０１２３４').convert('ZE', 'HE').toString()
// 「ひらがな」のみに絞込
moji('abcあいうアイウ123').filter('HG').toString()
```

- リポジトリ: [npm](https://www.npmjs.com/package/moji), [github](https://github.com/niwaringo/moji)
- 月間ダウンロード: 0.8K

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

### js-beautify

(執筆中...)

### marked

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

```javascript
import marked from 'marked'

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

- リポジトリ: [npm](https://www.npmjs.com/package/marked)

### mustache

```javascript
const Mustache = require('mustache')

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

## テスト

(執筆中...)

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

### [babel](https://babeljs.io/)

最近は`buble`に少しずつ切り替えているものの、まだ使う機会が多い。とっさに見るES6のドキュメントとして[Learn ES2015](https://babeljs.io/docs/learn-es2015/)が助かる。

- リポジトリ: [github](https://github.com/babel/babel)

#### babel-cli

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

#### babel-core

Nodeから使う場合。

### [buble](https://buble.surge.sh/)

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

```javascript
const buble = require('buble')
const result = buble.transform(source)
```

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

```bash
$ buble input.js > output.js
```

- リポジトリ: [npm](https://www.npmjs.com/package/buble), [gitlab](https://gitlab.com/Rich-Harris/buble)

### browserify

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

#### watchify

(執筆中...)

#### coffeeify

(執筆中...)

### rollup

バンドラーの一押し。

```javascript
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`を指定。

```javascript
bundle = yield rollup({
  entry,
  plugins: [
    babel()
  ]
})
```

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

```javascript
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`内のモジュールを探し出しだすプラグイン。

```javascript
{
  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要らないよね的な。

```javascript
const yo = require('yo-yo')

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

### yolk

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


## その他

### chalk

ターミナルに表示する文字列の色とスタイルを指定するのに、`\x1b[1;31m`とかやると可読性が落ちてしまうけれど、その辺をchalkは解決してくれる。同様のライブラリとしては、[clor](https://github.com/brj/clor)もある。cf. [ターミナルでの色指定について](http://jafrog.com/2013/11/23/colors-in-terminal.html)

```javascript
const chalk = require('chalk')

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

- リポジトリ: [npm](https://www.npmjs.com/package/chalk), [github](https://github.com/chalk/chalk)

### [loglevel](http://pimterry.github.io/loglevel/)

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

```javascript
const log = require('loglevel')
log.setLevel(log.levels.DEBUG, false)

log.debug('log message')
```

- リポジトリ: [npm](https://www.npmjs.com/package/loglevel), [github](https://github.com/pimterry/loglevel)

### node-check-updates

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

```bash
$ ncu
```

- リポジトリ: [npm](https://github.com/tjunnone/npm-check-updates)

## 補足

- 月間ダウンロードは、npmでのダウンロード件数です。調べた時現在なので、参考程度に。
- 主にブラウザで使うものは `import something from 'something'` と表記
- 主にサーバで使うものは `const something = require('something')` と表記
- まだ、書き途中です。しばらくの間、使ったモジュールを随時ここにメモしていこうかと、思います。