2 最近実際仕事で使った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/

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

2

メモを他の人に見せる

このメモを見せたい人に、このURL(今開いているページのURLです)を教えてあげてください

コメント(0)

  • someone

  • someone