はじめに
個人開発者のKikoといいます。このようなAI駆動の単語アプリを開発しています
今回、自分の開発のために検索フォームでタイピングするとタグとして入力できるUIを作ろうとしていました。
Reactで作るとなると意外とむずかしかったのですが、React-selectを使うと簡単にできたのでまとめます。
作ろうとしたのはこんなUI
React-Select とは
React アプリで「選択 UI」を爆速で作るためのライブラリ。
とくに次のような機能が「何もしなくても」使えるのが特徴です
保存した単語カードにラベルとしてタグを複数つけられるような機能を実装しようとしていました。
検索できるドロップダウン
タイピングすると候補をフィルタリングしてくれる
マルチ選択
複数選べて、pill（タグ）表示になる
カスタムスタイルが簡単
デフォルトでも美しいが、細かく CSS を上書きできる
非同期データでサジェスト
API から検索候補を取ってきて動的に表示できる
Creatable（自由入力）モード
今回使った「新しいタグを自分で追加できる UI」
これは react-select/creatable の機能。
React にはタグ UI が標準で用意されていません。自作すると、次の要素をすべて作る必要があります。
- pill（タグ）の見た目
- 入力した文字を Enter で確定させる処理
- 既存タグのサジェスト表示
- 複数選択の管理
- 削除や追加の UI
プロジェクトでの利用シーン
私は英単語学習アプリを作っており、各単語に対して次のようなタグ付けが必要でした。
- 自分で自由にタグを追加したい（例：HP2-CH3, grammar）
- 既存のタグから選びたい
- 編集モードでタグの追加・削除を行いたい
このニーズに最も適していたのが CreatableSelect でした。
<CreatableSelect
isMulti
value={localTags}
onChange={(newValue) => setLocalTags([...newValue])}
placeholder="タグを入力"
/>
これだけで必要な UI がすべて揃います。
- Enter でタグ化
- 既存候補のサジェスト
- pill 表示
- 削除操作
- state 管理との連動
実装の流れ
1. 編集モードに入る
単語カードの右下にある✏️を押すと編集モードになり、タグ UI が表示されます。
2. タグ入力 UI で編集する
- 既存タグ → 初期値として表示される
- 新規タグ → 入力して Enter
- 削除 → pill の × ボタン
3. 保存して Supabase に渡す
保存ボタンでタグ配列を親へ渡し、Supabase 側で差分更新を行います。
react-select を使って良かったところ
Enter を押すだけで pill が生成される
自前で作ると地味に大変な部分ですが、ライブラリだけで解決できます。
サジェストが自動で出る
候補配列を渡すだけで補完 UI が完成します。
CSS をほとんど書かなくていい
デフォルトで綺麗な UI が用意されていますが、調整可能です。
型がシンプル
{ label, value } の形式を扱うだけでよく、初心者でも理解しやすいです。
まとめ
タグ UI を自作するとコストが高くなりがちですが、react-select を使うと 短時間で動作するプロトタイプを作りつつ、プロダクションにも耐えられる UI が実装できます。
個人開発や MVP 開発でスピードを出したい人に特におすすめです。