はじめに
個人でWebアプリを開発した際に使用したJavaScriptの便利なライブラリを紹介します。
HTML/CSS/JavaScriptの知識があれば公式サイト見たり、ググったりすれば移植できます！
この記事はライブラリの使い方を細かく説明するものではなく、ライブラリの特徴を簡単に紹介する記事です。
目次
1.グラフを書きたい！=Chart.js
2.並び替えができる表を作成したい！=List.js
3.画像を自動再生するスライドショーを作りたい!＝VEGAS2
4.モーダルで画像を表示したい!=Lightbox
5.カンバンボードを作成したい！=Muuri
6.最後に
グラフを書きたい！=Chart.js
Chart.js は棒グラフ、折れ線グラフ、円グラフなどを簡単に画面に表示できるようになるライブラリです。
公式サイト
デモ
以下のようなグラフを表示できます。
棒グラフ
折れ線グラフ
レーダーチャート
サンプルコード
円グラフを表示するコードです。
See the Pen Untitled by hayaharu3220 (@haruharu3220) on CodePen.
並び替えができる表を作成したい!=List.js
List.jsは検索バー付きの表や並び替え(ソート)ができる表を作成したすることができるライブラリです。
公式サイト
デモ
並び替えや検索を行っています。
公式ページのサンプルを動かしています。
サンプルコード
名前順、年齢順、誕生日順に並び替えができます。
See the Pen Untitled by hayaharu3220 (@haruharu3220) on CodePen.
画像を自動再生するスライドショーを作りたい!＝VEGAS2
VEGAS2は画像をスライドショー表示してくれるライブラリです。
公式サイト
デモ
デモ動画は以下のCodepenを見てください。
サンプルコード
わんちゃんの写真がスライドショーで表示されるサンプルです。
See the Pen Untitled by hayaharu3220 (@haruharu3220) on CodePen.
モーダルで画像を表示したい!=Lightbox
Lightboxは画像をモーダルで表示できるようにするライブラリです。
公式サイト
デモ!
画像をクリックするとモーダルで大きく表示されます。
また、矢印をクリックすると隣の写真がモーダル表示されます。
サンプルコード
３枚のワンちゃんの写真がモーダルで表示されます。
See the Pen Untitled by hayaharu3220 (@haruharu3220) on CodePen.
カンバンボードを作成したい！=Muuri
Muuriはカンバンボードのようにドラッグ＆ドロップ可能な要素を作成したり、要素を表示/非表示できるようにするライブラリです。
公式ページ
デモ
公式ページのサンプルを動かしています。
こんな感じを作ることができます。
サンプルコード
すみません。これだけ公式ページのサンプルコードをコピペしました。
カンバンボードになります。
See the Pen Untitled by hayaharu3220 (@haruharu3220) on CodePen.
公式ページ以外で参考にしたサイト集
本記事で紹介したライブラリも載っていますし、他のライブラリも具体例と一緒に紹介してくれているサイトです。
Lightboxの使い方の理解の助けに確認しました。
List.jsの使い方の理解の助けに確認しました。
Muuriの使い方の理解の助けに確認しました。
最後に
JavaScriptには便利なライブラリがたくさんあります。ただ、どんなライブラリがあるか分からないと活用することができません。
今回は私が個人開発で使用したライブラリを紹介しました。ぜひ皆さんも使ってみてください。
公式ページにSampleがあるのでそれを触ってどんな動きをするのかイメージをつけて、
その後は大体、どんなライブラリにもexampleがあるのでそれを参考に実装するのが良いと思います！