paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選!

f:id:paiza:20181226124919j:plain
どうも、まさとらん(@0310lan)です!

今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。

ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください!

なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。

オーディオファイルを柔軟に制御できるライブラリ!

howler.js

f:id:paiza:20181226125136j:plain

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

f:id:paiza:20181226125614j:plain

特定の範囲にある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

f:id:paiza:20181226140332j:plain

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つずつのタスクになります。

f:id:paiza:20181226140445g:plain

このようにドラッグ&ドロップによるタスクの移動も可能です。

もちろん、タスクを入力して登録することもできるし、ボードを動的に生成したり不要なタスクを削除するボタンを設置することもできます。

jKanbanの基本的な使い方やイベント処理のプログラミング方法などは次の記事でまとめているのでご興味ある方は参考にしてみてください!

paiza.hatenablog.com


<参考>

高機能な画像ギャラリー機能を組み込めるライブラリ!

lightgallery.js

f:id:paiza:20181226140706j:plain

ギャラリー系の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'));

f:id:paiza:20181226140834j:plain

基本的な閲覧機能に加えて、プラグインを導入するとSNSへのシェア機能やフルスクリーンモードなど多彩な機能を追加していけるような設計にもなっているので便利です。

もちろん、自分でプラグインを開発して独自機能を追加することもできます。


<参考>

普通のリンク要素をリッチな可視化ツールに変えるライブラリ!

Microlink

f:id:paiza:20181226140958j:plain

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引数にはオプションをオブジェクト形式で設定するだけです。


ページを開くと以下のように表示されます!

f:id:paiza:20181226141206j:plain

これはVue.jsのトップページに動画のリンクが配置されており、この動画を読み込んでカード形式で表示しているわけです。

ちなみに、リンク要素に付与したclass名で対象を限定したり、キャッシュを活用して読み込みを高速化するなどさまざまなカスタマイズが可能です。


<参考>

Webサイトを制作可能なオーサリングツールを開発できるライブラリ!

GrapesJS

f:id:paiza:20181226141321j:plain

HTMLコンテンツをドラッグ&ドロップで組み立てるだけでWebサイトを制作できるオーサリングツールを丸ごと自分で開発できるライブラリが「GrapesJS」です。

Webサイトの基本的な制作機能はもちろんのこと、GUIによるプレビュー表示やソースコードの書き出しなど幅広いツールが標準で利用できます。

さらに、自分で欲しい機能をJavaScriptでどんどん追加していけるのも大きな特徴となっています。


基本的な使い方としては非常にシンプルで、HTML内にGrapesJSのオーサリングエディタを表示するdivタグを1つ用意します。

<div id="gjs"></div>

あとは、JavaScriptで初期化設定を次のように記述するだけです!

var editor = grapesjs.init({

   container : '#gjs'

});


すると、すぐにでもWebサイトを制作できるエディタが起動します!

f:id:paiza:20181226141501j:plain

このままでもコンテンツをドラッグ&ドロップしながらWebサイトを作っていけるのですが、独自のボタンや機能などを追加していけば自分だけのオリジナルアプリに変えていくことができます。(ドキュメント参照

また、既存のHTML / CSSのソースコードを流し込んで作業をGrapesJS上で進めていくような使い方も可能です。


<参考>

おまけ

最後にGitHubと連携したブログをJavaScriptで簡単に構築できるライブラリも合わせてご紹介しておきます!

CMS.js

f:id:paiza:20181226141654j:plain

最大の特徴はフロントエンド側だけでブログサイトの制作から公開までを完結できてしまうという点です。

記事はマークダウンで書いてGitHubへpushするだけなので、あとはどのように記事を表示するかを普段使い慣れているJavaScriptでプログラムしていけば良いのです。

(GitHubのコードエディタを使えばブラウザだけで完結できます)


詳しい使い方やカスタマイズ方法などについては次の記事でまとめているので、ご興味ある方はぜひ参考にしてみてください!

paiza.hatenablog.com

動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

まとめ

今回は、単体でもそのままWebアプリとして使えるくらい高機能なJavaScriptライブラリをピックアップしてご紹介してみました。

いずれのライブラリもドキュメント関連が充実しているので、自分なりにカスタマイズがしやすく扱い方もシンプルなのが特徴です。

これらのライブラリを活用してぜひみなさんも独自のWebアプリ開発に挑戦してみてください!



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud