即席のinput要素が欲しいときはquicksettingsが便利そう #JavaScript

ブラウザ用JSライブラリやアプリの簡単なAPI動作確認などでinput要素が欲しいときがあります。
例えば以下のようなクラスがあったとして、add/subメソッドがちゃんと動いているのかを、実際に色々値を入れて確認したいとき、input type="number"要素を用意したりします。

class CounterApp {
  constructor(root) {
    this._count = 0;
    this.viewElement = document.createElement('div');
    root.appendChild(this.viewElement);
    this.viewElement.innerText = this._count;
  }

  add(v) {
    this._count += v;
    this.viewElement.innerText = this._count;
  }

  sub(v) {
    this._count -= v;
    this.viewElement.innerText = this._count;
  }
}

const app = new CounterApp(document.querySelector("#app"));
const input = document.createElement('input');
input.type = "number";
input.onchange = function(e) {
  const num = Number(e.target.value);
  app.add(num);
}
document.body.appendChild(input);

ただ、そのためだけに冗長なhtmlやらjsやらを正直書きたくはないので、ライブラリに頼りたいところです。
この手のライブラリはdat.guiしか知らなかったのですが、こちらはオブジェクトのpublicなプロパティを指定する必要があり、また値を直接変えたいわけではなので、用途としてはちょっと違うなと思いました。

もっと簡単で用途に合ったライブラリは無いものかとネットの海をさまよっていたら、quicksettingsというライブラリがsweeeetな感じだったので紹介します。

デモページを見れば何となく分かると思いますが、簡単なコードでパネルコンポーネントの生成し、そこに色々なinput要素などを追加できます。

使い方

githubのREADMEを見れば大体わかりますが、ポイントだけ書いてみます。
以下に示すコードではライブラリはすでに読み込んでる前提となります。
scriptタグでもrequireでも読み込めます。

<script src="https://cdn.jsdelivr.net/npm/quicksettings@latest/quicksettings.min.js"></script>

インスタンス生成

create関数でインスタンスを生成・取得します。

// settings = QuickSettings.create(x, y, panelTitle, parent);
const settings = QuickSettings.create(0, 0, "タイトル", document.getElementById('qs-parent'));

引数で初期位置x、y、パネルのタイトル、親要素を指定できます。
引数はすべて省略可能。その場合、左上にパネルが表示されますが、邪魔になりそうならx、yを指定します。

個人的には以下のように指定して右上に配置するのがおすすめです。

const settings = QuickSettings.create(window.innerWidth-200);

※パネル幅がデフォルトの200pxの場合。パネルサイズをsettings.setSize等で変える場合は適宜調整します。
なお、パネルはドラッグ操作で移動させることもできます。

（ここはdat.guiを見習ってデフォルト右上配置にしてほしい…）

パネルに要素を追加

要素はsettings.addXxxみたいな関数で追加します。
それぞれ引数が違い、ラベル名や初期値、限界値などを指定できます。
またすべてのメソッドで値変更やインタラクション時のcallbackを指定できます。

const cat = new Cat();
const settings = QuickSettings.create();

// input:text
settings.addText("名前", (v)=> {
  // コールバックで変更値vが取得可能
  cat.setName(v);
});
// チェックボックス
settings.addBoolean("寝", cat.isSleep, (v)=> {
  cat.setSleep(v);
});
// ボタン
settings.addButton("鳴く", ()=> {
  cat.meow();
});

何を追加できるか、引数はどうなっているのかは公式のリストを参照して下さい。

他にも指定オブジェクトとバインディングしたり、localStorageに設定値を保存できたりするそうですが、使ったことが無いので保留。
古典SFチックなデザインと相まって、割と気に行ってます。