どうも、まさとらん(@0310lan)です!
今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。
ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください!
なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。
オーディオファイルを柔軟に制御できるライブラリ!
【 howler.js 】
MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。
音楽プレイヤーはもちろん、オーディオ制作アプリやゲーム音楽の制御などにも利用できる汎用性の高い機能が特徴でしょう。
提供されているAPIがとてもシンプルなのも魅力で、例えば単純に音楽ファイルを再生するだけなら次のような記述だけで完結します。
var sound = new Howl({ src: ['sound.mp3'] }); sound.play();
インスタンスを生成する際の初期設定において、srcプロパティに任意の音楽ファイルを配列で設定するだけです。
あとは、play()メソッドを実行すれば音楽が再生されます。
同様に音量や再生モード、イベント登録などをオプションとして設定することも可能です。
var sound = new Howl({ src: [''sound.mp3'], autoplay: true, loop: true, volume: 0.5, onend: function() { console.log('音楽は終了しました'); } });
このように扱い方がとてもシンプルなのに、オーディオの制御、複数ファイルの再生、オーディオの切り抜きなどを簡単に実現できるので重宝します。
また、プラグインによる機能拡張も実現できるように設計されているので、自分の欲しい機能をカスタマイズできます。これもうれしいですね。
<参考>
HTML要素を自在にソート・フィルタリングできるライブラリ!
【 jPList 】
特定の範囲にあるHTML要素を並び替えたり、任意の条件を設定してフィルタリングするようなケースで役立つのがこちらのライブラリ「jPList」です。
例えば何らかのデータを一覧表示するような場合で、特定の条件をチェックボックスやドロップダウンリストなどでフィルタリング表示することも簡単に実現できます。
大きな特徴としては、HTML要素内にあらかじめ決められたdata属性を付与するだけで実行できる点でしょう。
<div style="display: none" data-jplist-control="hidden-sort" data-group="sort-list" data-path=".name" data-order="asc" data-type="text"> </div>
「data-group」にはソートやフィルタリングを実行する対象の要素を指定し、「data-path」にはその範囲内にあるどの要素を基準にソートするかを設定するわけです。
JavaScriptコードに関しては次の1行を実行するだけです。
jplist.init();
あとは、HTML要素内のdata属性をカスタマイズするだけで、自在に並び替えたり必要な要素だけを抽出することもできます。
フォーム要素と組み合わせたサンプルデモが公開されているので、ぜひ一度どのように実行されるのかを試してみてください!
<参考>
「Trello」風のタスク管理アプリを簡単に作れるライブラリ!
【 jKanban 】
Trelloのようにドラッグ&ドロップで任意のタスクを移動させながら進捗管理ができるWebアプリを簡単に構築できるライブラリが「jKanban」です。
ボードの作成、タスクの入力・登録、移動、削除など、タスク管理を行うために必要なメソッドやイベント処理が一通りそろっているのですぐにでも開発を始められます。
タスクボードの作成は簡単で、JSON形式のデータを用意してあげるだけである程度のタスクアプリが完成します。
const defaultBoards = [ { "id": "sample-board-1", "title": "タスク", "item": [ { "title": "報告書の作成" }, { "title": "14時から打ち合わせ" } ] }, { "id": "sample-board-2", "title": "進行中", "item": [{ "title": "○○案の企画書作成" }] }, { "id": "sample-board-3", "title": "完了", "item": [{ "title": "日報の提出" }] } ];
このようなJSONデータを用意してインスタンスを生成する際にオプションとして渡してあげればOKです。
「titleプロパティ」がボードの名称になり、「itemプロパティ」が1つずつのタスクになります。
このようにドラッグ&ドロップによるタスクの移動も可能です。
もちろん、タスクを入力して登録することもできるし、ボードを動的に生成したり不要なタスクを削除するボタンを設置することもできます。
jKanbanの基本的な使い方やイベント処理のプログラミング方法などは次の記事でまとめているのでご興味ある方は参考にしてみてください!
<参考>
高機能な画像ギャラリー機能を組み込めるライブラリ!
【 lightgallery.js 】
ギャラリー系のJavaScriptライブラリはたくさんあるなかで、必要な機能が全部入りで拡張性も高い優秀なライブラリが「Lightgallery.js」です。
複数の画像を分かりやすいUIで閲覧できる機能を提供してくれて、PC・スマホでも利用できるレスポンシブ対応のデザインでタッチ操作もサポートされています。
使い方も簡単で、それぞれの画像をaタグを使って囲んでいくだけで準備が整います。
<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>
あとは、JavaScriptで次の1行を実行するだけで高機能な画像ギャラリーが利用可能です!
lightGallery(document.getElementById('lightgallery'));
基本的な閲覧機能に加えて、プラグインを導入するとSNSへのシェア機能やフルスクリーンモードなど多彩な機能を追加していけるような設計にもなっているので便利です。
もちろん、自分でプラグインを開発して独自機能を追加することもできます。
<参考>
普通のリンク要素をリッチな可視化ツールに変えるライブラリ!
【 Microlink 】
HTMLに記述したリンク要素のURLを自動的に読み込んで、リンク先の画像や情報などをカード形式で表示してくれるライブラリが「Microlink」です。
豊富なオプションが用意されているのでカスタマイズ性が高く、リンク先の動画を検出して表示したりスクリーンショットを撮影した画像を利用するなど、便利な機能がたくさん用意されているのが特徴です。
使い方は簡単で、例えば人気のフレームワークVue.jsのサイトURLを次のように配置してみます。(リンクの文字列は書かなくても構いません)
<a href="https://jp.vuejs.org/index.html"></a>
このリンクをリッチなカード形式で表示するには、JavaScriptで次のように記述します。
microlink('a', { size: 'large', video: true });
microlink()の第1引数にリンク要素の「aタグ」を指定し、第2引数にはオプションをオブジェクト形式で設定するだけです。
ページを開くと以下のように表示されます!
これはVue.jsのトップページに動画のリンクが配置されており、この動画を読み込んでカード形式で表示しているわけです。
ちなみに、リンク要素に付与したclass名で対象を限定したり、キャッシュを活用して読み込みを高速化するなどさまざまなカスタマイズが可能です。
<参考>
Webサイトを制作可能なオーサリングツールを開発できるライブラリ!
【 GrapesJS 】
HTMLコンテンツをドラッグ&ドロップで組み立てるだけでWebサイトを制作できるオーサリングツールを丸ごと自分で開発できるライブラリが「GrapesJS」です。
Webサイトの基本的な制作機能はもちろんのこと、GUIによるプレビュー表示やソースコードの書き出しなど幅広いツールが標準で利用できます。
さらに、自分で欲しい機能をJavaScriptでどんどん追加していけるのも大きな特徴となっています。
基本的な使い方としては非常にシンプルで、HTML内にGrapesJSのオーサリングエディタを表示するdivタグを1つ用意します。
<div id="gjs"></div>
あとは、JavaScriptで初期化設定を次のように記述するだけです!
var editor = grapesjs.init({ container : '#gjs' });
すると、すぐにでもWebサイトを制作できるエディタが起動します!
このままでもコンテンツをドラッグ&ドロップしながらWebサイトを作っていけるのですが、独自のボタンや機能などを追加していけば自分だけのオリジナルアプリに変えていくことができます。(ドキュメント参照)
また、既存のHTML / CSSのソースコードを流し込んで作業をGrapesJS上で進めていくような使い方も可能です。
<参考>
おまけ
最後にGitHubと連携したブログをJavaScriptで簡単に構築できるライブラリも合わせてご紹介しておきます!
【 CMS.js 】
最大の特徴はフロントエンド側だけでブログサイトの制作から公開までを完結できてしまうという点です。
記事はマークダウンで書いてGitHubへpushするだけなので、あとはどのように記事を表示するかを普段使い慣れているJavaScriptでプログラムしていけば良いのです。
(GitHubのコードエディタを使えばブラウザだけで完結できます)
詳しい使い方やカスタマイズ方法などについては次の記事でまとめているので、ご興味ある方はぜひ参考にしてみてください!
動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
まとめ
今回は、単体でもそのままWebアプリとして使えるくらい高機能なJavaScriptライブラリをピックアップしてご紹介してみました。
いずれのライブラリもドキュメント関連が充実しているので、自分なりにカスタマイズがしやすく扱い方もシンプルなのが特徴です。
これらのライブラリを活用してぜひみなさんも独自のWebアプリ開発に挑戦してみてください!
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら