どうも、まさとらん（@0310lan）です。
今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。
そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください！
■入力された内容を自動検証する！
【 Cleave.js 】
フォームなどでよく使う「inputタグ」で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが「Cleave.js」です。
使い方は非常にシンプルで、例えば「電話番号」を入力する「inputタグ」があったとします。
<input type=”tel” id=”input-tell” />
「inputタグ」には「id」か「class」を付与しておいてください。
あとは、JavaScriptで「書式」と「国」を指定するだけでOK！
var phone = new Cleave( '#input-tell', { // 書式を電話番号に指定 phone: true, // 国を「日本」に指定 phoneRegionCode: 'JP' });
たったこれだけで、入力された数値を検証して番号以外は入力できないようにしてくれます。さらに、例えば東京の市外局番「03」とか大阪の「06」などを自動認識して適度にスペースを空けてくれるので便利です！
他にも、日付のフォーマットを揃えたり、クレジットカードの種類を判別できたり、独自のルールを指定して入力制限を付けたりなども簡単に行えます。
■スムーズな「お絵描き」を実現する！
【 atrament.js 】
こちらはCanvas上でお絵描きするのに最適なライブラリとなっており、描いた「線」がスムージング機能によりとても綺麗に見えるのが特徴となっています。
（スムージング機能はON / OFF可）
使い方も非常に簡単で、まずは普通に「Canvasタグ」をHTMLに記述します。
<canvas id="myCanvas"></canvas>
そして、Canvasタグの「id名（myCanvas）」と描画サイズをJavaScriptで指定すれば完了するというお手軽さ！
var sketcher = atrament('#myCanvas', 500, 400);
これでもうスムージング機能を使った「お絵描き」を行うことが可能です！
また、他にも「画面クリア」「カラーパレット」「線の太さ調整」…など、細かいオプションも充実しているので、このライブラリだけでもユニークな「グラフィックエディタ」が作れてしまうのが魅力です。
＜参考＞
■リアルタイム「顔認識」トラッキングを行う！
【 clmtrackr.js 】
画像や動画・Webカメラなどから、人物の「顔」を認識させてトラッキングできるようにしてくれるのが「clmtrackr.js」です。
ごく普通のJavaScriptライブラリで提供されており、特別なツールは一切不要なので動画や画像のファイルがあればすぐにでも試すことできます！
使い方ですが、例えば動画ファイルに写っている人物の「顔」を認識させる場合は、「videoタグ」で貼り付けた「要素」と「顔パターン」を指定します。
// HTMLに貼り付けたvideo要素を取得 var videoInput = document.getElementById('video'); // インスタンスを作成 var ctracker = new clm.tracker(); // 顔パターンを初期化 ctracker.init(pModel); // video要素の解析を実行 ctracker.start(videoInput);
わずか4行のコードですが、これだけで基本的な準備作業が完了します。
あとは、解析結果を元にしながら動画に写っている「顔」にワイヤーフレームをトラッキングしていけば完了です！
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function drawLoop() { // 前の描画をクリアにする ctx.clearRect(0, 0, canvas.width, canvas.height); // トラッキングした顔にワイヤーフレームを描画 ctracker.draw(canvas); // 毎フレームずつ処理を繰り返す requestAnimationFrame(drawLoop); } drawLoop();
これを応用すれば、最近人気のスマホアプリ「SNOW」の顔認識スタンプのようなモノも開発できるかもしれませんね。
＜参考＞
■リッチな「画像・動画」ギャラリーを作る！
【 lightgallery.js 】
もうギャラリー系のJavaScriptライブラリはコレ1つで良いんじゃないか…と思えるほど、多機能で使いやすく設計されているのが大きな魅力となっています。
レスポンシブ対応なのでPC・スマホで利用でき、動画や画像などのギャラリーとしてサクサク動くうえ、さまざまな機能を拡張できるプラグインも提供されています！
基本的な使い方として、例えば「画像ギャラリー」を作りたければ、HTMLにこんな感じで記述していきます。
<div id=”lightgallery”> <a href=”1枚目の画像パス”> <img src=”1枚目の画像パス”> </a> <a href=”2枚目の画像パス”> <img src=”2枚目の画像パス”> </a> <a href=”3枚目の画像パス”> <img src=”3枚目の画像パス”> </a> <!-- 以下省略 --> </div>
「imgタグ」を「aタグ」で囲うカタチでギャラリー用の画像を用意し、それを「divタグ」でグルーピングすればOK。
そしてJavaScriptから「divタグ」の「id」を指定するだけでリッチなギャラリーの完成です！
var gallery = document.getElementById( 'lightgallery' ); lightGallery( gallery );
画像を1クリックでダウンロードする機能や、SNSにシェアする機能、フルスクリーンモード、画像のズームイン・アウト…など、多彩な機能を簡単に利用できるようになります。
これらの機能はプラグインとして提供されており、「lightgallery.js」本体ファイルの後にプラグイン用のファイルを読み込むだけですぐに利用できるので便利です。
// lightgallery.jsの本体 <script src="lightgallery/js/lightgallery.js"></script> // シェア用のプラグイン <script src="lightgallery/js/lg-share.js"></script> // フルスクリーンモード用のプラグイン <script src="lightgallery/js/lg-fullscreen.js"></script> // ズーム用のプラグイン <script src="lightgallery/js/lg-zoom.js"></script>
さまざまなオプション設定やイベント処理も充実しているので、大抵のケースで柔軟に活躍するライブラリと言えるでしょう。
＜参考＞
■「Git」を可視化する！
【 Gitgraph.js 】
Webサイト上でGitの解説をする場合や、インタラクティブなGit学習サービスなどを構築する時に便利なライブラリが「Gitgraph.js」です！
最大の特徴は、JavaScriptから「Gitコマンド」風のプログラムを書いていくだけで、コミットログなどを分かりやすく可視化してくれる点です。
例えば、新規に「master」ブランチを作って3回「commit」するにはこのように書きます。
var gitgraph = new GitGraph(); // 新規にmasterブランチを作成 var master = gitgraph.branch('master'); // commitを3回行う gitgraph.commit().commit().commit();
とても直感的で理解しやすいプログラムだと思います。
他にも、ブランチの切り替えに「checkout()」を使ったり、ブランチを結合するのに「merge()」を使うなど、Gitコマンドと同じような感覚でプログラミングすることが出来ます。
ちなみに、可視化の「表示スタイル」は、独自テンプレートを作成して簡単に切り替えることも可能で、オプションを設定すれば、「commit」メッセージなども編集することが出来ます。
＜参考＞
■インタラクティブな「通知」を表示する！
【 notie.js 】
Webサービスなどで、ログインの成功時や重要なメッセージなどをWeb上に通知するケースは多いかと思います。
このような通知を表示する時に、「notie.js」を使えば簡単なコードを書くだけで対応できるうえ、ユーザーに判断して決めてもらう「選択肢」なども通知と一緒に表示させることが出来るので便利です。
シンプルに設計されているのも特徴で、通常の通知はわずか1行で実行可能です！
notie.alert('success', 'ログイン成功!');
1つ目の引数に「success」「warning」「error」「information」などの通知タイプを指定することで、カラースタイルを変更することが出来ます。
2つ目の引数は、表示したいメッセージをそのまま入力すればOK！
また、通知と一緒に「選択肢」も表示したい場合は、「notie.confirm()」を使います。
notie.confirm('今からログインしますか?', 'はい', 'いいえ', function() { // 「はい」を選択した時の処理 notie.alert('success', 'ログインしました!'); });
さらに、「notie.confirm()」は入れ子にすることも可能なので、複雑な条件分岐も簡単に実現できます。
他にも、フォームのような入力ボックスを追加したり、複数の選択肢を表示するようなコンテンツを盛り込むことも可能です。
細かく用意されたオプションを独自に設定することで、通知のカラースタイルも自由にデザインすることが出来るのも魅力的でしょう。
＜参考＞
■「画面遷移」を手軽に高速化する！
【 Barba.js 】
Webサービスやサイトなどで、「ページ」と「ページ」を移動する時の画面遷移を高速化して、ユーザー体験を向上させることができるライブラリが「Barba.js」です！
難しい事は考えずに、普通にHTMLを作っていける柔軟性とシンプルさを兼ね備えている便利なところが魅力的です。
基本的な使い方として、まず画面遷移することで表示が変化する要素の「class名」に指定のクラスを設定します。
（逆に、サイドバーなど共通のコンテンツは通常通りでOK）
<!-- index.html --> <!-- 変化する要素 --> <div id="barba-wrapper"> <div class="barba-container"> <!-- ここにコンテンツを書く --> <!-- 遷移先のURL --> <a href="page.html">「page.html」へのリンク</a> </div> </div>
そして、遷移先のHTMLにも同様の記述を行います。
<!-- page.html --> <div id="barba-wrapper"> <div class="barba-container"> <!-- ここにコンテンツを書く --> <!-- 遷移元のURL --> <a href="index.html">「index.html」へのリンク</a> </div> </div>
あとは、「Barba.js」をJavaScriptで有効にするだけです！
// Barba.jsを有効にする
Barba.Pjax.start();
これで、「index.html」と「page.html」がお互いに画面遷移すると、高速に指定のコンテンツが表示されるようになります。
また、一瞬で表示するのではなく「フェードイン・アウト」や「スライド」のような効果を付けて表示させたり、各種イベント処理を実装しやすいような設定なども豊富に搭載されているので非常に便利です。
ぜひ、サンプルデモなども合わせて確認して見ることをオススメします！
＜参考＞
■ブラウザのサポート機能を一括チェックする！
【 Feature.js 】
ユーザーが利用しているブラウザ環境を検証して、使いたい機能が「利用できる・できない」を手軽に調べることができるのが「Feature.js」です！
直感的に使えるように設計されており、条件分岐が書きやすいのと軽量・高速に動作するのが特徴と言えるでしょう。
例えば、WebGLを使って3Dコンテンツを開発する場合に、ユーザーのブラウザ環境を検証するならこんな感じのコードを書いておけばOK！
// WebGLをサポートしているか？ if (feature.webGL) { // サポートしている場合の処理 } else { // サポートしていない場合の処理 }
また、CSS3で使えるようになった「Transition」でアニメーション作成するなら、こんなコードになるでしょう。
// CSSのTransitionをサポートしているか？ if (feature.cssTransition) { // サポートしている場合の処理 } else { // サポートしていない場合の処理 }
このように、簡単なコードを書くだけでブラウザのほとんどの機能を検証することが出来るわけです。
さらに、PCブラウザはもちろんのこと、スマホブラウザやKindleまで、非常に幅広い端末での利用にも対応しているのは非常に便利でしょう。
＜参考＞
■美少女育成×プログラミングゲーム「もし次の常駐先が女子エンジニアばっかりだったら」を公開！！
paizaでは、美少女育成プログラミングゲーム「もし次の常駐先が女子エンジニアばっかりだったら」の公開を開始いたしました。
「もし次の常駐先が女子エンジニアばっかりだったら」は、ITエンジニアの夢をかなえる楽しく華やかな環境での業務シミュレーションを行いながら、さまざまな難易度のプログラミング問題を解くゲームです。
ITエンジニアとして働くあなたが新しい常駐先を訪ねると……そこは女子エンジニアだらけの開発現場だった！助けを求める女子エンジニアたちへ救いの手を差し伸べていけば、あなたを慕った彼女たちはどんどんチームのメンバーとして仲間になって…！？案件炎上、メンバー離脱……さまざまなトラブルを乗り越えながら案件を成功させ、可愛い女の子たちが成長していくと――。
最高の開発現場を作れるかどうかは、あなたのプログラミングスキルと采配次第！ぜひ挑戦してみてください！
※イベントは終了しました。
■まとめ
今回ご紹介したJavaScriptライブラリは、いずれもドキュメントやサンプルが充実しているものばかりなので、すぐにでも自分のWebページに組み込めるようになると思います。
また、基本的にJavaScriptファイルを読み込むだけで利用可能なので、もし気になったライブラリがあれば「CodePen」や「JSFiddle」などを使って、ブラウザ上からサクッと実行させてみるのも良いでしょう。
ぜひ、みなさんもお気に入りのライブラリを1つ見つけて、積極的にプロジェクトへ取り入れてみてください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
