sside.net

ユーザによる入力が可能なタグ入力フォーム用意するなら、Choices.jsよりtagifyだった

当Blog、現状だと

  • メタタグの入力UI
  • 画像のアップロード
  • codeタグのシンタックスハイライト

などが全然未実装なので、とりあえずメタタグの入力UIを何とかすることにした。

作ってる最中はカンマ区切りの文字列渡してたけれど、formのPOST時にダメ文字のバリデーションしてる(パスパラメータに使ってる)ので、入力時にバリデーション掛けられないと面倒よなということで、何か入力ライブラリないかと探したところ、真っ先に見つかったのがChoices-js

とりあえずフォームに追加して、スタイルとか弄ってたんですが、これ、ユーザの入力時にアイテムの追加ができないのな…。8割方書いた時点で動作確認して「出来ねえぞ?」と思ってissues見てみたら、こんなリンクが貼られており、無理じゃんとなった時のゲンナリ感よ。Choices-js使おうとしたときに、他のオルタナティブも調べて、GitHub Starの数も多いし大丈夫だろうと思ってたらこれ。真面目にドキュメント読んだり、ライブラリの目的にしてるアプリケーションを把握しないとやっぱ駄目だな…。

で、そこで挙げられてたyairEO/tagify、すげえ簡単に使えるので実によかったですという話。

  • 所謂メタタグの入力に特化している
  • ReactやVueのコンポーネントも付いてくる
  • inputタグ内の値もライブラリ側で自由に加工できる
    • submit時に加工する必要がない
  • スタイルのカスタマイズがCSS Variablesで楽に変更可能
    • Choices-jsは上書きが面倒だった

ということで、滅茶苦茶良かった。ありがてえ…。