【JavaScript】SelectBoxライブラリはselect2が無難だけど、結局自分で作ったほうがいい説
表題のとおりですが、受託のお仕事で
- レスポンシブの管理画面っぽいサイトで、セレクトボックスをカスタマイズ
- PCは一般的なセレクトボックスっぽく。スマホはモーダルで出したい
という要件でしたが、需要が無いのかselect2以外のプラグインは微妙でした。以下経緯。
choiceを試す
最初にchoiceというライブラリを試しました。（chosenじゃないよ！）
https://tokunagakazuya.tk/t8rp
こんな記事も書いたのですが、案外かゆいところに手が届かない感じです。セレクトボックスはPCだと、mousedownで開いて、mouseup（click）で項目を決定する、という動作が一般的ですがそれもなっておらず、selectタグが沢山あると重くなる上に、IE系でスクロールバーをクリックできないという問題も残っていたりしました。
jQueryプラグインを探した結果select2を採用
他も軽くググりましたが、remodalみたいないい感じにカスタマイズ性のあるライブラリは無さそうで、所謂デザイナー向けのjQueryプラグインをベースにする必要がありそうでした。そこでパフォーマンスや認知度、モバイル対応など総合的に判断し、select2が無難でしたので採用に。個人的に決めた理由としては、
- 実際使ってみてパフォーマンスがそこそこ良かった
- </body>の手前に中身が展開されるのでモーダルっぽく出来る
- イベントがまぁまぁ揃っている
特にセレクトボックスを展開する場所を指定できるのはポイント高かったです。大概はselectタグの直後ぐらいに出力されるのが多いですからね。こちらはdropdownParentで指定可なので、モーダル向きのDOMになりますね。イベントの種類が多いのも良さ気。
chosenも人気っぽいですがイベント少なそうなのと、日本語対応がイマイチ？でモバイル未対応っぽいことを書いてる記事も見かけたので今回は見送りました。他のはパフォーマンスが悪かったり、そもそも人気が無くて情報が少ないものも多いです。
select2も完全ではない…
ただselect2にも気になるところはたくさんあります。
スマホの場合はtouchendでセレクトボックスが展開されるようですが、セレクトボックスを開くと「モーダルウインドウで項目が表示される→セレクトボックスと同じ位置にあった項目が勝手に選択される（touchend）→モーダル閉じる」という処理が同時に発生するため、何も選択していないのに勝手に選択された？という感じになります。
かなり雑な対策ですが、setTimeoutを用いてモーダルが表示されるまで遅延させたり、透過されたposition:fixed;の縦横100%のdivを用意しておき、これが表示されているときは一切の操作を受け付けないようにするなどで対策しました。
他にも.select2-containerが自動でposition:absolute;やtop,leftをつけていたり、selectタグの直後に中身を出力するのは難しかったり（基本的に出力先は一箇所）、細かく調整しようと思うと気になるところが多かったです。
で、結論は？
結局、要件が決まっているなら自前で実装した方が速いし確実だな…というところです。