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

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

ビルド

タスクランナー

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/

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

END

Close

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