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

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

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

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

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

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

1. humane.js

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

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

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

2. AniX

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

AniXは軽量で簡単に使うことができる、ハイパフォーマンスなアニメーション プラグイン です。
たった10KBという軽量さながら、さまざまなモダン ブラウザ にも対応しています。

AniXは、 CSS トランジションの属性を使えるので、操作がしやすいのが特徴です。
onCompleteイベントにも対応しているので、複数のシナリオを作ってアニメーションを動かすことも可能です。

3. 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なので、ホームページに取り入れてみてはいかがでしょうか。

4. Amplitude

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

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

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

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

5. t-scroll

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

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

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

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

6. DOMtastic

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

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

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

7. Britecharts

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

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

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

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

8. Zuck.js

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

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

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

9. 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')

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

10. Blurify

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

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

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

11. CamanJS

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

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

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

まとめ

自分でゼロから機能を実装するよりも、 JavaScript のライブラリを利用することで、圧倒的に早く期待している機能を実装することができます。
昔と違って、こうした プラグイン のほとんどが1MB未満と非常に軽量なので、 ページ スピードを左右することもほとんどありません。

また、 プラグイン の使い方は非常に簡単なので、 JavaScript の初歩を勉強するだけで利用することができます。
今まで使ったことがない人も、気に入った プラグイン やライブラリがあれば利用してみてはいかがでしょうか。