---
Title: '最近実際仕事で使ったJSライブラリ/ツールまとめ #dev #javascript'
Keywords:
  - dev
  - javascript
Author: zk33
Web: 'https://mimemo.io/m/daJjOoY1roEyDMZ'
---

色んな仕事してると、「あの案件で使ったやつ何だっけ」っていうのが稀によくあるので淡々とまとめておくページ。

# ビルド

## タスクランナー

[gulp](http://gulpjs.com/)
: 他のツールも気にはなっているけど今はとくに困ってないのでこれで。

## パッカー

[browserify](http://browserify.org/)
: 主に[babelify](https://github.com/babel/babelify)使いたい時に。[mimemo](https://mimemo.io)はこれでまとめてる。

[webpack](https://webpack.github.io/)
: jsと一緒にCSSもモジュール化して組み込むとかしたい時に。[conasu](https://conasu.co/)はテンプレートをdirective単位で作って、JS内にHTMLを埋め込んでまとめたりしていて、webpackのほうがだいぶ都合がよかったのでこちらを利用中。

## CSS/SASS

[node-sass](https://github.com/sass/node-sass)
: だいたい使う道具がJSにまとまってきたので、RubyのSassは使い勝手が悪いのでこっちを利用する。大抵[gulp-sass](https://github.com/dlmanning/gulp-sass)で走らせる

## HTML generator

[wig](https://github.com/zk33/wig)
: 自作ツール。jinja2的なテンプレート（nunjucks、swig）＋JSONデータを元にHTMLを出力するツール。

[actless](https://github.com/zk33/actless)
: 同じく自作ツール。↑のwigを中核に、CSSなども含めて1コマンドで制作環境を初期化するために作ってるいわゆるboilerplate的なもの

# JSライブラリ類

## フレームワーク

[AngularJS](https://angularjs.org/)
: フルスタックフレームワーク。[conasu](https://conasu.co/)で利用。SPA作成時に必要なものはほぼ揃っているので迷う部分が少なくてよい。

## Markdownパーサ

[markdown-it](https://github.com/markdown-it/markdown-it)
: [marked](https://github.com/chjj/marked)なども速度面や枯れてる感の上でよいのだけど、絶望的にカスタムしづらいのが玉に瑕。こちらのほうが記法の追加などカスタマイズがしやすく、アドオン的なものもある程度公開されているのでよい。[mimemo](https://mimemo.io/)に利用中

## 補完

[awesomplete](https://leaverou.github.io/awesomplete/)
: jQuery依存のない補完ライブラリの中ではよかった。[mimemo](https://mimemo.io/)の検索窓で導入。

## カルーセル、画像スライダー系

[jcarousel](http://sorgalla.com/jcarousel/)
: jQueryベースのカルーセルプラグイン。必要十分なオプションがあり、PCのみを対象としたページなら安定して使えてる

[slick](http://kenwheeler.github.io/slick/)
: スマホでスワイプもできるカルーセルを実装するのに利用。こちらも必要十分なオプションとイベントがあり使いやすい

## スマホメニュー

[mmenu](http://mmenu.frebsite.nl/)
: いわゆるハンバーガーメニュー的なものの実装に

## ES6 polyfill

[whatwg-fetch](https://github.github.io/fetch/)
: fetch APIのpolyfill。jQuery.ajax()とはちょっと違うところがあるので要注意

[es6-promise](https://github.com/stefanpenner/es6-promise)
: Promise未実装のブラウザ向けのpolyfill

[pepjs](https://github.com/jquery/PEP)
: PointerEventsのpolyfill

# おまけ

## jQuery依存からの脱却

You Might Not Need jQuery
http://youmightnotneedjquery.com/

でおおよその代替コードはわかる。