[Vue.js]Vue-multiselectで綺麗なセレクトボックスを秒で実装する

# 初めに
こんにちは。皆さんお元気でしょうか。
職務の中でVue.jsを使って開発をしているのですが、ここ最近Vue.jsにはたっっくさんの便利なライブラリが存在することを知りました。本記事では、その中でも一際目を引いた、それはもう綺麗なセレクトボックスを実装できるVue-multiselectについて紹介したいと思います。それでは行ってみよう！！！

# Vue-multiselectって何よ
[公式サイト](https://vue-multiselect.js.org/#sub-single-select-object)曰く、このライブラリは「The most complete selecting solution for Vue.js」。
つまり、**Vue.jsのセレクトボックスにとって最適なソリューション** であるとの説明がなされています。おお、期待値が上がりまくりますね。
シングルセレクト、複数選択、タグ付け、ドロップダウン、フィルタリングなど様々な機能を持ったセレクトボックスを簡単に実装することができるようです。

※今回、インストール手順の説明は省かせていただきます。
※本記事でのVue, Vue-multiselectの各バージョンは以下の通りです。
Vue: `2.6.12`
Vue-multiselect: `2.1.0`

# 基本的な使い方
今回はcodepen上でCDNを用いて試していきます。
基本のセレクトボックスを作りたい場合には、以下のように実装できます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEqVYzN" data-user="miyashu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/miyashu/pen/ZEqVYzN">
  Untitled</a> by miyashu (<a href="https://codepen.io/miyashu">@miyashu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
めっっちゃ綺麗ですね。色もついてて選択状態がわかりやすい上に「Press enter to select」というガイドもあって親切です。さて、以下に主要な項目を列挙していきます。

- `placeholder`
セレクトボックスが初期状態で選択されていない場合、ここで設定したテキストが表示されます。
- `options`
選択肢として設定したい配列を指定。必ず**配列**で指定してください。ハッシュのままだと余裕で動きません。
- `v-model`
これはVueMultiselectではなくVue.jsのデータバインディング機能です。
サーバーサイドへ選択されたデータを渡したい場合には、Ajax通信などを用いてselectedOptionsのデータを渡すことができます。

そしてなんと、、**検索機能がデフォルトで付いています！！！**
セレクトボックスを選択した状態で「スパ」と打つと、「スパイダーマン」の選択肢が自動的に表示されます。こりゃすごい。

以上が基本的な実装方法になります。すごーーく簡単で明快です。
ここからは、使い所が多そうな「複数選択」と「optionsが連想配列の場合」の２つの機能付きセレクトボックスをそれぞれ実装する方法について取り上げていきます。

## 複数選択
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYPbmOw" data-user="miyashu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/miyashu/pen/eYPbmOw">
  Untitled</a> by miyashu (<a href="https://codepen.io/miyashu">@miyashu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `:multiple="true"`
この条件により複数選択が可能になります。
- `:close-on-select="false"`
この条件により選択肢が選択された後もプルダウンが表示されたままになり、複数選択がしやすくなります。

この２つの条件を足すだけです。何やらタグのようなものまで現れました、、、すごい。。。


## optionsが連想配列の場合
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYmMgLo" data-user="miyashu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/miyashu/pen/zYmMgLo">
  Untitled</a> by miyashu (<a href="https://codepen.io/miyashu">@miyashu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `custom-label`
ここで関数を指定すると、その返り値が選択肢として表示されるようになります。
optionsが連想配列で各キーのバリューを組み合わせた選択肢を表示したい時などに助かります。こういうかゆいところまで手が届く感じ、個人的にめっちゃ好きです。

# 終わりに
あまりにも簡単に実装できてしまうことにめちゃくちゃ驚きました。
セレクトボックスが綺麗で使いやすいものであれば、ユーザーからの印象も良くなるのではないかと思うので、開発者、ユーザー双方どちらも嬉しいですね。公式ドキュメントが言う通り、VueMultiselectはVueセレクトボックスにとって**最適なソリューション**だなと思いました。

# 参考文献
この記事を書くにあたり、以下のサイトを参考にさせていただきました。

https://vue-multiselect.js.org/#sub-single-select-object

https://www.kabanoki.net/4224/#%E3%82%BF%E3%82%B0%E4%BB%98%E3%81%91

https://qiita.com/shi_ma/items/db73868136ca5e69ea07