2. 構成ライブラリ
この章では、構成ライブラリの概要を説明し、本ガイドラインで説明している機能と構成ライブラリの対応について示す。
2.1. 構成ライブラリ概要
Macchinetta Client (1.x)の構成ライブラリはオープンソースソフトウェアから選出したものである。
この章では、構成ライブラリの規定バージョン、機能概要、公式サイト、及び依存ライブラリを説明する。
構成ライブラリの名称とそれらの機能の分類を以下の表に示す。✔ は構成ライブラリが機能を提供していることを示し、✗ は提供していないことを示す。
機能分類
| 機能分類 |
説明 |
|---|
| UIコンポーネント |
パネルやダイアログなどの画面に関する汎用部品の提供 |
| テーブル |
行の追加・削除、ソート、ページネーションなどテーブルについての機能を提供 |
| 操作性向上・制御 |
入力操作の補助・制限など操作性についての機能を提供 |
| 非同期処理 |
非同期処理を制御する機能を提供 |
構成ライブラリと機能分類
| |
UIコンポーネント |
テーブル |
操作性向上・制御 |
非同期処理 |
|---|
| jQuery |
✗ |
✗ |
✔ |
✔ |
|---|
| jQuery UI |
✔ |
✗ |
✗ |
✗ |
|---|
| Bootstrap |
✔ |
✔ (表示のみ) |
✗ |
✗ |
|---|
| SlickGrid |
✗ |
✔ |
✗ |
✗ |
|---|
| tablesorter |
✗ |
✔ |
✗ |
✗ |
|---|
| Mousetrap |
✗ |
✗ |
✔ |
✗ |
|---|
| slick |
✔ |
✗ |
✗ |
✗ |
|---|
| bootstrap-datepicker |
✔ |
✗ |
✗ |
✗ |
|---|
| Moment.js |
✗ |
✗ |
✔ |
✗ |
|---|
| Parsley |
✗ |
✗ |
✔ |
✗ |
|---|
2.1.1. jQuery
| ライブラリ名 |
jQuery |
|---|
| 規定バージョン |
3.3.1 |
|---|
| 公式サイト |
https://jquery.com/ |
|---|
| 概要 |
- DOM要素の操作、イベント処理、アニメーション、Ajax通信等のAPIを提供するライブラリ。
- JavaScriptを使用したウェブアプリケーション開発時のデファクトスタンダードとなっている。
|
|---|
| 依存ライブラリ |
なし |
|---|
2.1.2. jQuery UI
| ライブラリ名 |
jQuery UI |
|---|
| 規定バージョン |
1.12.1 |
|---|
| 公式サイト |
https://jqueryui.com/ |
|---|
| 概要 |
- UIコンポーネントなどを提供するライブラリ。
- ドラッグアンドドロップなどのマウスベースのイベント処理、ダイアログや日付入力用カレンダーなどのウィジェットを提供する。
- 作成したHTMLに対して、JavaScriptで提供されている各種メソッドを実行することで動的な部品を利用する。
|
|---|
| 依存ライブラリ |
|
|---|
2.1.3. Bootstrap
| ライブラリ名 |
Bootstrap |
|---|
| 規定バージョン |
3.3.7 |
|---|
| 公式サイト |
https://getbootstrap.com/ |
|---|
| 概要 |
- UIコンポーネントなどを提供するライブラリ。
- パネルやダイアログなどの汎用部品を数多く提供しており、レスポンシブウェブデザインやグリッドレイアウトにも対応している。
- あらかじめ用意されたクラスやData APIと呼ばれる機能を用いることで、JavaScriptを書かずにHTMLをマークアップするだけで動的な部品が利用できる。
|
|---|
| 依存ライブラリ |
|
|---|
2.1.4. SlickGrid
| ライブラリ名 |
SlickGrid |
|---|
| 規定バージョン |
2.3.19 |
|---|
| 公式サイト |
https://github.com/6pac/SlickGrid/ |
|---|
| 概要 |
- 高機能なテーブルを提供するライブラリ。
- 行の追加・削除、列のサイズ変更、列の並び替えや、ソート、ページネーションなどを提供する。
- 表示すべきデータが画面外に及ぶ場合は、スクロール操作がなされたタイミングで表示内容を書き換えるという手法で遅延レンダリングを実現している。生成するDOM要素の数を削減したことで大量のデータを扱える。
|
|---|
| 依存ライブラリ |
|
|---|
2.1.5. tablesorter
Note
tablesorterは、SlickGridと比較して機能の数は少ないものの、各機能は特定のオプションを指定するだけで容易に利用できる。
一方、SlickGridは、単にオプションを指定するだけでは利用できない機能が多い。その代わり、詳細な振る舞いを独自に実装するためのインターフェースやイベント発生の仕組みが提供されており、拡張性が高い。
どちらを使用するか選択する際は、まずは実現したい機能がtablesorterで提供されているかどうかを確認し、もし機能が提供されておらず、かつ拡張も困難である場合にSlickGridを使用することを推奨する。
Warning
同一ページ内でのtablesoterとSlickGridの同時利用は、それぞれのライブラリが競合する恐れがあるため、禁止とする。
2.1.6. Mousetrap
| ライブラリ名 |
Mousetrap |
|---|
| 規定バージョン |
1.6.2 |
|---|
| 公式サイト |
https://craig.is/killing/mice |
|---|
| 概要 |
- JavaScriptでキーボードショートカットを処理するためのライブラリ。
- 特定のキー操作で任意の処理を実行したり、標準のショートカットキー操作の動作を無効化するコードの作成を支援する。
|
|---|
| 依存ライブラリ |
なし |
|---|
2.1.8. bootstrap-datepicker
2.1.9. Moment.js
| ライブラリ名 |
Moment.js |
|---|
| 規定バージョン |
2.22.2 |
|---|
| 公式サイト |
https://momentjs.com/ |
|---|
| 概要 |
- 日付操作機能を提供するライブラリ。
- 解析、検証、操作および表示などの機能を提供する。
|
|---|
| 依存ライブラリ |
なし |
|---|
2.2. 機能と構成ライブラリの対応
ここでは、ウェブアプリケーションの開発において頻繁に求められる機能の実現方法を、動作するサンプルと共に説明する。
なおサンプルは機能を実現する上で最低限必要な構成になっている。またサンプルの動作環境については 動作確認環境を参照。
機能を実現するために使用するライブラリを以下の表に示す。