完成予定MultiSelectの実装さいごにはじめにこの記事の概要こんにちは、株式会社TOKOSのスギタです!今回はtailwindcssを用いてUIライブラリMantineを使いMultiSelectコンポーネントを作成する方法を説明していきたいと思います。UI辺りだと思います。UIライブラリを用いることで、スピーディーなフロントエンド開発、インタラクティブなUIを実現させることが容易になります。多くのフロントエンド開発何かしらのUIライブラリを用いているのでは無いでしょうか?UIライブラリのメリットは先程挙げた事になりますが、デメリットももちろんあります。思いつくデメリットとしては、スタイルの変更が容易では無いことやUIライブラリの制約が強いことではないでしょうか?場合によっては、tailwindcssと親和性が低いというところもあると思います。ヘッドレスUIを使えばとなると思いますが、ヘッドレスUIの代表的ライブラリのHeadlessUIやRadixではUIの種類が少ないというのもあるのでは無いでしょうか。そこで紹介したいのがMantineです。MantineUIについて皆さんMantineは知っていますか?聞いたこともない人も多いと思うので軽く説明したいと思います!MantineはReact専用のUIライブラリになります。私が思うMantineの強みを5つあげたいと思います。6.0.13下記参照内でフレームワークを選択してください。今回はNext.jsで行っていきたいと思います!また使用したいパッケージを選択してインストールしてください。今回はmantine/core内にあるコンポーネントを使用するので、@mantine/coreをインストールしています。startedMantinetailwindcssとの整合性をあわせる問題点tailwindcss×Mantineの場合問題なことが2点あります。ブレークポイントの整合性リセットCSSの整合性この上記2つを解消しないとスタイルの崩れや、意図しない挙動になってしまいます。前提としてtailwindとMantineでお互いにブレークポインを持ってます。下記はtailwindのブレークポイント(初期値)です。1536px次はMantaineのブレークポイントです。1400px上記でも分かる通り、名称と値がそれぞれ違います。これを統一したほうが、意図しない挙動を避けるためには必要です。問題がなければMantaine側に合わせるのがbetterだと思います。},}これでブレークポイントの問題は解消です。次にリセットCSSの競合解消です。解消の方法はあると思いますが、個人的には、Mantine側のリセットCSSを削除する方法が一番良いかなと感じております。Mantaine側のリセットCSSを採用したところ、破壊的なスタイルが多かったためです。逆にtailwind側のリセットCSSを採用した場合わかる範囲で問題となった箇所はButton関係のコンポーネントを使用する際に背景が消える点です。リセットCSSで背景が消えてもCSSでスタイルを上書きができるので、問題がないと思っています!またMantineのButtonコンポーネントを使うよりボタンに関しては自作コンポーネントを使うほうが多いかなと思っています!影響範囲についてすべてのコンポーネントに対して試したわけでは無いので、ご了承ください。他に良い方法があればご教授していただけると幸いです🙇‍♂️ではMantineのリセットCSSの削除方法ですが、pages/_app.tsxのMantineProvider内の記述を削除すれば良いです。);}ハイライトされている2行を削除します。今回はGrobalStylesも不要なので削除しています。今回は例としてMantineのCoreパッケージの中からMultiSelectを使ってみたいと思います。今回の完成予定は下記になります。COREのinputs内のMultiSelectを押してください。参考MultiSelectMantineドキュメント内から要件によって近しいものを選択肢コピペすればOKになります。example」の必要な箇所をコピペします。);}ここから今回の完成に向け必要な箇所、不必要な箇所を修正します。);}これでドキュメントのように表示できていると思います。現状と完成予定と比べると下記と相違があります。全体のスタイリング+(左のユーザーアイコン)閉じる開くに連動する矢印アイコン選択肢がなくなった場合の文字の「選択肢がありません」の表示はじめにスタイルの調整から行います。コンポーネントに対しPropsでsize等のPropsを渡すことも可能ですが、細かく調整したい場合はコンポーネント内の要素に個別プロパティを当てることも可能です。API」で確認します。ドキュメントをに書いてある通り、関わってくる箇所(Name)としては「root」「input」「value」「values」辺りでしょうか!かなりドキュメントも読みやすいのではないでしょうか!確認後tailwindでスタイリングしていきます。);}上記のように要素に対し個別でスタイルを与えることができます。props」で確認します。閉じる開くに連動する矢印アイコンは「rightSection」でアイコンを追加し、選択欄が開くとき発火するコールバック関数「onDropdownOpen」、選択欄が閉じるとき発火するコールバック関数「onDropdownClose」を使って矢印の制御をしていきます。選択欄が開いている状態閉じる状態をbooleanで状態管理したいので、useStateで定義していきます。三項演算子を用いてアイコンが回転するスタイルを追記していきます。);}これで完成になります。他にも必要なpropsを選択肢自分でカスタムしてみてください!さいごに今回はReact専用のUIライブラリのMantineを紹介しました。