npm の登場により、フロントエンドにも世界共通の巨大なエコシステムができつつあります。
利用には Browserify や Babel 等の利用が必須になりますが CommonJS や ES6 などによってもたらされる恩恵もまた絶大です。
今回はそんな npm に登録されているパッケージの中から、私が Web サイトやアプリケーションを作成するにあたって重宝しているものを幾つか紹介します。
deep-assign
複数のオブジェクト、配列をマージしてくれます。PHP で言うところの array_merge に近いです。Object.assign はネストされたオブジェクトや配列をマージしませんが、これは再帰的に実行してくれます。
挙動を一部 Readme から抜粋すると
import deepAssign from 'deep-assign';
deepAssign({a: {b: 0}}, {a: {b: 1, c: 2}}, {a: {c: 3}});
//=> {a: {b: 1, c: 3}}
こんな感じ。
リポジトリのマスターは Sindre Sorhus という Node.js の大御所なので安心です。
js-cookie
これも超便利、ネイティブでこれくらい楽だったらと思わずには居られない。基本的な操作はこんな感じ。
import Cookies from 'js-cookie';
Cookies.set('name', 'value', { expires: 7 });
Cookies.get('name'); // => 'value'
Cookies.remove('name');
screenfull.js
スクリーン API のラッパー的なやつです。スクリーン API はブラウザ毎の対応がまちまちで、まともに扱おうとするとプレフィクス地獄に陥ると思います。こいつを使えば大抵のブラウザに一発で合わせることが可能です。例外的に iOS と 一部の旧 Android ブラウザは動作しません。私はよく動画プレイヤーを作った時などに利用しています。
import screenfull from 'screenfull';
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request();
} else {
// Ignore or do something else
}
});
smoothScroll
昔はよく jQuery でアニメーション作ったりした人も多いのでは。最近もっぱら使う機会はなくなり、アニメーションも JS ライブラリか CSS アニメーションが主流になってきました。
基本的には困らないのですが、たまーに “あれ、これどうするんだっけ” ってなるのがこれ、画面を特定の要素のところまでアニメーションさせながらスクロールするってやつです。CSS アニメーションでは実装できない (多分) ですし、自分で書くのもなんか違う。そんな時の smoothscroll さんです。指定した要素のところまでスムーズに画面をスクロールしてくれます。
import smoothScroll from 'smoothscroll';
smoothScroll.animateScroll('#hobe');
humanize-plus
こまかなファンクションが詰まったちょいライブラリになっていて、やはりかゆいところに手が届くいいやつです。私はフォームの改行とプレビュー表示なんかに nl2br と br2nl をよく使います。PHP にはあって JS 無くて悔しかったあれですね。
import Humanize from 'humanize-plugs';
// nl2br
let text = 'test\ntext';
text = Humanize.nl2br(text);
// => test<br>test
// br2nl
text = Humanize.br2nl(text);
// => test\ntext
sanitize-html
JS で管理画面とかフォーム扱うなら絶対にこれ。名前の通り、HTML 系のサニタイザです。
許可するタグやアトリビュートを細かく指定できます。サンプルだとこんな感じ。
import sanitizeHtml from 'sanitize-html;
let dirty = '<div><span>span</span><a href="/hoge" title="aaa">anchor</a></div>';
let clean = sanitizeHtml(dirty, {
allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
allowedAttributes: {
'a': [ 'href' ]
}
});
//=> span<a href="/hoge">anchor</a>
validator
名前の通りバリデート関係の関数ライブラリです。これもかなり種類があるので詳細は GitHub 見てもらうとよいですが、いくつか紹介します。
import validator from 'validator';
validator.isEmail('foo@bar.com'); //=> true
validator.isIP('192.168.1.1', 4); //=> true
validator.isHexColor('#888'); //=> true
import validator from 'validator';
const str = '<div><p>Paragraph</p></div>'
validator.escape(str); //=> <div><p>Paragraph</p></div>
validator.unescape(validator.escape(str)) //=><div><p>Paragraph</p></div>
まとめ
そんな感じで7個ほどつらつらと紹介してきました。動きのあるサイトや Web アプリケーション扱ってるとありがたいものがあるのではと。
ES6 で書かない人は let とか const は全部 var に、
import validator from 'validator;
// ↓
var validator = require('validator');
() => {}
// ↓
function() {}
とかに置き換えてもらうと大丈夫と思います。
それではよい JS ライフを。