最近実際仕事で使ったJSライブラリ/ツールまとめ #dev #javascript version 3

2016/11/16 17:56 by zk33 zk33
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
最近実際仕事で使ったJSライブラリ/ツールまとめ #dev #javascript
色んな仕事してると、「あの案件で使ったやつ何だっけ」っていうのが稀によくあるので淡々とまとめておくページ。

# ビルド

## タスクランナー

[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/

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

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

ビルド

タスクランナー

gulp
他のツールも気にはなっているけど今はとくに困ってないのでこれで。

パッカー

browserify
主にbabelify使いたい時に。mimemoはこれでまとめてる。
webpack
jsと一緒にCSSもモジュール化して組み込むとかしたい時に。conasuはテンプレートをdirective単位で作って、JS内にHTMLを埋め込んでまとめたりしていて、webpackのほうがだいぶ都合がよかったのでこちらを利用中。

CSS/SASS

node-sass
だいたい使う道具がJSにまとまってきたので、RubyのSassは使い勝手が悪いのでこっちを利用する。大抵gulp-sassで走らせる

HTML generator

wig
自作ツール。jinja2的なテンプレート(nunjucks、swig)+JSONデータを元にHTMLを出力するツール。
actless
同じく自作ツール。↑のwigを中核に、CSSなども含めて1コマンドで制作環境を初期化するために作ってるいわゆるboilerplate的なもの

JSライブラリ類

フレームワーク

AngularJS
フルスタックフレームワーク。conasuで利用。SPA作成時に必要なものはほぼ揃っているので迷う部分が少なくてよい。

Markdownパーサ

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

補完

awesomplete
jQuery依存のない補完ライブラリの中ではよかった。mimemoの検索窓で導入。

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

jcarousel
jQueryベースのカルーセルプラグイン。必要十分なオプションがあり、PCのみを対象としたページなら安定して使えてる
slick
スマホでスワイプもできるカルーセルを実装するのに利用。こちらも必要十分なオプションとイベントがあり使いやすい

スマホメニュー

mmenu
いわゆるハンバーガーメニュー的なものの実装に

ES6 polyfill

whatwg-fetch
fetch APIのpolyfill。jQuery.ajax()とはちょっと違うところがあるので要注意
es6-promise
Promise未実装のブラウザ向けのpolyfill
pepjs
PointerEventsのpolyfill

おまけ

jQuery依存からの脱却

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

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