LoginSignup
52
50

More than 5 years have passed since last update.

@cognitom(Tsutomu Kawamura)

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

Last updated at Posted at 2016-07-02

よく使う/見てるモジュールをまとめておきます。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('ＡＢＣＤ０１２３４').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') と表記
  • まだ、書き途中です。しばらくの間、使ったモジュールを随時ここにメモしていこうかと、思います。
52
50
0

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
Sign upLogin
52
50