JavaScript

Webアプリ開発を試したいJSライブラリ

自分が試したいJSライブラリをメモ(2019)

howler.js

オーディオスプライトによる制御可能 > オーディオ機能/音楽

var sound = new Howl({

src:['sound.mp3']
});
sound.play();

play()関数など用意されている

var sound = new Howl({

src:['sound.mp3'],
autoplay:true,
loop:true,
volume:0.5,
onend: function() {
console.log('音楽は終了しました');
}
});

*「howler.js」https://howlerjs.com/


jPList

HTML要素を自由にソート・フィルタリングできる

<div 

style="display:none"
data-jplist-control="hidden-sort"
data-group="sort-list"
data-path=".name"
data-order="asc"
data-type="text">
</div>


jKanban

Trelloのようにドラッグ&ドロップで任意のタスクを移動させながら進捗情報管理ができるWebアプリを簡単に構築

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": "日報の提出" }]
}

];

lightgallery.js

ギャラリー系のJavaScriptライブラリ

<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>

lightGallery(document.getElementById('lightgallery'));


Microlink

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


GrapesJS

HTMLコンテンツをドラッグ&ドロップで組み立てるだけでWebサイトを制作できるオーサリングツール

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

var editor = grapesjs.init({

container : '#gjs'

});


CMS.js

最後にGitHubと連携したブログをJavaScriptで簡単に構築できるライブラリ


参照:paiza開発日誌

簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた!


参照:paiza開発日誌

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