Webアプリを個人開発した時に使用した便利なJavaScriptのライブラリを5つ紹介する

# はじめに
　個人でWebアプリを開発した際に使用したJavaScriptの便利なライブラリを紹介します。

HTML/CSS/JavaScriptの知識があれば公式サイト見たり、ググったりすれば移植できます！

:::note info
この記事はライブラリの使い方を細かく説明するものではなく、ライブラリの特徴を簡単に紹介する記事です。
:::

# 目次
[1.グラフを書きたい！=Chart.js](#グラフを書きたいchartjs)
[2.並び替えができる表を作成したい！=List.js](#並び替えができる表を作成したいlistjs)
[3.画像を自動再生するスライドショーを作りたい!＝VEGAS2](#画像を自動再生するスライドショーを作りたいvegas2)
[4.モーダルで画像を表示したい!=Lightbox](#モーダルで画像を表示したいlightbox)
[5.カンバンボードを作成したい！=Muuri](#カンバンボードを作成したいmuuri)
[6.最後に](#最後に)


# グラフを書きたい！=Chart.js
**Chart.js** は棒グラフ、折れ線グラフ、円グラフなどを簡単に画面に表示できるようになるライブラリです。

### 公式サイト
https://www.chartjs.org/

### デモ
以下のようなグラフを表示できます。

棒グラフ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/d62db0ee-87dd-d72f-e144-60b5eb3ac92e.png)

折れ線グラフ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/593d468c-8b3f-7bd0-2b2b-ab5256ad97fa.png)

レーダーチャート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/eb873467-6e91-04a5-7fcb-e1e0424b89ac.png)






### サンプルコード
円グラフを表示するコードです。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGQEMMo" data-user="haruharu3220" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haruharu3220/pen/bGQEMMo">
  Untitled</a> by hayaharu3220 (<a href="https://codepen.io/haruharu3220">@haruharu3220</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# 並び替えができる表を作成したい!=List.js
**List.js**は検索バー付きの表や並び替え(ソート)ができる表を作成したすることができるライブラリです。

### 公式サイト
https://listjs.com/

### デモ
並び替えや検索を行っています。
公式ページのサンプルを動かしています。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/abebbfd8-a523-e7a6-7fa9-e679a36b2f23.gif">



### サンプルコード
名前順、年齢順、誕生日順に並び替えができます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwVedYm" data-user="haruharu3220" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haruharu3220/pen/VwVedYm">
  Untitled</a> by hayaharu3220 (<a href="https://codepen.io/haruharu3220">@haruharu3220</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# 画像を自動再生するスライドショーを作りたい!＝VEGAS2
**VEGAS2**は画像をスライドショー表示してくれるライブラリです。


### 公式サイト
https://vegas.jaysalvat.com/

### デモ
デモ動画は以下のCodepenを見てください。

### サンプルコード
わんちゃんの写真がスライドショーで表示されるサンプルです。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwVeBwx" data-user="haruharu3220" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haruharu3220/pen/VwVeBwx">
  Untitled</a> by hayaharu3220 (<a href="https://codepen.io/haruharu3220">@haruharu3220</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# モーダルで画像を表示したい!=Lightbox
**Lightbox**は画像をモーダルで表示できるようにするライブラリです。

### 公式サイト
https://lokeshdhakar.com/projects/lightbox2/

### デモ!
画像をクリックするとモーダルで大きく表示されます。
また、矢印をクリックすると隣の写真がモーダル表示されます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/f7537f26-0a27-1da4-75fc-cff54d11fcc9.gif">


### サンプルコード
３枚のワンちゃんの写真がモーダルで表示されます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGQExdB" data-user="haruharu3220" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haruharu3220/pen/bGQExdB">
  Untitled</a> by hayaharu3220 (<a href="https://codepen.io/haruharu3220">@haruharu3220</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>




# カンバンボードを作成したい！=Muuri
**Muuri**はカンバンボードのようにドラッグ＆ドロップ可能な要素を作成したり、要素を表示/非表示できるようにするライブラリです。

### 公式ページ

https://muuri.dev/

### デモ
公式ページのサンプルを動かしています。
こんな感じを作ることができます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/8b06af14-7157-51dd-4e7d-c99073b71ea7.gif">

### サンプルコード
すみません。これだけ公式ページのサンプルコードをコピペしました。
カンバンボードになります。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYQJLvj" data-user="haruharu3220" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haruharu3220/pen/eYQJLvj">
  Untitled</a> by hayaharu3220 (<a href="https://codepen.io/haruharu3220">@haruharu3220</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# 公式ページ以外で参考にしたサイト集
本記事で紹介したライブラリも載っていますし、他のライブラリも具体例と一緒に紹介してくれているサイトです。

https://coco-factory.jp/ugokuweb/

Lightboxの使い方の理解の助けに確認しました。

https://haniwaman.com/lightbox/

List.jsの使い方の理解の助けに確認しました。

https://qiita.com/kanaxx/items/ce78289fdbb13be7dadf

Muuriの使い方の理解の助けに確認しました。

https://coliss.com/articles/build-websites/operation/javascript/responsive-grid-layouts-muuri.html




# 最後に
JavaScriptには便利なライブラリがたくさんあります。ただ、どんなライブラリがあるか分からないと活用することができません。
今回は私が個人開発で使用したライブラリを紹介しました。ぜひ皆さんも使ってみてください。
公式ページにSampleがあるのでそれを触ってどんな動きをするのかイメージをつけて、
その後は大体、どんなライブラリにもexampleがあるのでそれを参考に実装するのが良いと思います！