次のプロジェクトに取り入れたい！ユニークですぐに使えるJavaScriptライブラリ10選

JavaScriptが誕生して2017年で22年を迎えます。

JavaScriptはそれ自体でも非常に便利ではありますが、JavaScriptを使って組み立てられた便利なプラグインが豊富にリリースされています。
2017年現在でも、日々新しいプラグインがリリースされ続けています。

そこで今回は、最近リリースされたプラグインの中でも、次のプロジェクトに取り入れたい、ユニークですぐに使えるJavaScriptライブラリをご紹介させていただきます。

少しのコードを挿入するだけで使うことのできるシンプルなものから、カスタマイズ性が高く汎用的なライブラリまで、幅広い顔ぶれが揃っています。
使えそうなライブラリがあれば、ぜひブックマークして保存をしておきましょう。

ユニークですぐに使えるJavaScriptライブラリ10選

1. humane.js

スクリーンショット：2017年10月

humane.jsはシンプルで他のフレームワークに依存しない、軽量な通知(ノーティフィケーション)用のプラグインです。
インタラクションにはCSSトランジションを使用していますが、もし(モバイル環境などで)ブラウザの状況によって使えない場合でも、JavaScriptのアニメーションで代用します。

通知の表示テーマは6種類用意されており、オプションを指定することで通知の大きさやタイミングなども細かく指定することができます。

2. Mousetrap

スクリーンショット：2017年10月

Mousetrapはホームページ上にキーボードショートカットを設定できるJavaScriptライブラリです。
複数のキーによるコンビネーションのほか、シングルキーによる反応、あるいはGmailスタイルで順番に押すコマンド、コナミの隠れコマンド(上・上・下・下・右・左・右・左・B・A・エンターキー)まで設定することができます。

使えるキーは、アルファベットに加え、シフト(shift)・コントロール(ctrl)・オルト(alt)・メタ(meta)や、バックスペース(backspace)やタブ(tab)キーなども使うことができます。

例えば、「Ctrl＋S」キーで内容を保存したい場合には、以下のように設定すればいいのです。

Mousetrap.bind('ctrl+s', function(e) {
　　_saveDraft();
});

軽量版はわずか4.5KBなので、ホームページに取り入れてみてはいかがでしょうか。

3. Amplitude

スクリーンショット：2017年10月

AmplitudeはJavaScriptとHTML5によるモダンでクリーンなオーディオプレイヤープラグインです。

まるでスマートフォンで再生しているかのような、アートワーク画像と再生ボタンのUIが特徴的です。
もちろん複数の曲をアルバムのようにして連続再生させたり、再生したい曲までスキップさせたりすることができます。
プレイリストを複数再生することもできます。

さらに、何と言ってもうれしいのが、タッチディスプレイ対応なので、スマートフォンでも表示可能です。
さらに、ライブストリーミングにも対応しているので、インターネットラジオをホームページ経由で開設することもできます。

4. t-scroll

スクリーンショット：2017年10月

t-scrollはスクロールエフェクトを簡単に実装することができます。

GulpとSass、BabelやES6を使っており、jQueryには依存していません。
45のオプションが用意されているので、幅広くアニメーションを設定することができます。

Npmにも対応しているので、インストールも簡単です。
最新のブラウザのほとんどに対応しています。

5. DOMtastic

スクリーンショット：2017年10月

[DOMtastic]はDOM操作やイベント操作をシンプルで直感的に行うことができるJavaScriptライブラリです。
たった12KBと軽量で、ES6・Rollup・Babelを同梱しており、特別なライブラリをダウンロードする必要もありません。

APIが用意されており、jQueryの記法で記述することができます。
JavaScriptでCSSや他のライブラリを操作したい時などに重宝しそうです。

6. Britecharts

スクリーンショット：2017年10月

[Britecharts]は、クライアントサイドでシンプルなチャートを描画することのできるJavaScriptライブラリです。

描画にはD3.jsのバージョン4を利用しているので、利用方法次第では驚くほど美しいデータビジュアライゼーションを描画することもできるでしょう。

APIも用意されているので、グラフの数値はリアルタイムで変更することもできます。
また、オンマウスイベントで数値をチールチップで表示することもできるなど、かゆいところに手の届くおすすめのプラグインです。

7. RAMON

スクリーンショット：2017年10月

RAMONはInstagramのストーリーズやFacebookメッセンジャーのDay機能のように、フリックしながら動画を再生することのできるプラグインです。

本来はモバイルページ用に開発されたプラグインですが、パソコンのマウスを使って操作を行うこともできます。

8. Tippy.js

スクリーンショット：2017年10月

Tippy.jsは13KBと超軽量のツールチップ表示用のJavaScriptライブラリです。

アニメーションやディレイ、矢印の表示・表示やトリガーによる表示など、シンプルながらも汎用性が高いのが特徴です。
jQueryに依存していませんが、代わりにPopper.jsを利用しています。

使い方は簡単で、HTMLのタグのtitleにツールチップ表示用のテキストを設定します。

<button class="btn" title="I'm a tooltip!">Text</button>

そして以下のようにJavaScript側で設定するだけです。

tippy('.btn')

もちろん、オプションを加えることでカスタマイズすることも可能です。

9. Blurify

スクリーンショット：2017年10月

Blurifyは、2KBの非常に軽量なJavaScriptプラグインです。
さまざまな画像に「ぼかし」を加えることができます。

用途が限られている分、設定はシンプルで、JavaScriptに数行加えるだけでぼかし効果を得られます。
Photoshopいらずなのでデザイナーにとっても重宝されるのではないでしょうか。

10. CamanJS

スクリーンショット：2017年10月

[CamanJS]は画像にさまざまな編集効果を加えることができるJavaScriptライブラリです。
Blurifyと同じく、Photoshopいらずで画像の見た目を変えることができます。

CamanJSが得意なのは、画像の明度・コントラスト・セピア比・彩度などのパラメーターです。
他の画像プラグインと組み合わせることも可能で、Npmによるインストールも可能です。