💡 概要
SwiftUIでTextFieldの入力内容をもとに、List内のアイテムをリアルタイムで絞り込み表示するサンプルです。
@Publishedとfilterを使うだけで、簡単に検索機能を実装できます。
🧱 完成イメージ
TextFieldに文字を入力すると、リスト内のアイテム名を含むものだけが表示されます。
例:
「スイカ」「キウイ」があり、「ス」と入力すると「スイカ」だけ表示されるようになります。
🧩 コード全体
✅ ViewModel(ListViewModel.swift)

✅ View(ListView.swift)

🧠 解説
自分の場合は、**ViewModelで計算プロパティ(computed property)**を作り、
それをViewのForEachで使っています。
このようにすることで、TextFieldに入力した検索ワードをもとに
items配列をリアルタイムで絞り込むことができ、
UIの更新も自動で反映されます。
✅ まとめ
@PublishedでsearchItemを監視
filterを使ってitemsを動的に絞り込み
計算プロパティでViewがシンプルに書ける
シンプルな構成ですが、SwiftUIの@Published+filter+ForEachの理解が深まる良い練習にもなります💪
【SwiftUI】でTextFieldの検索ワードを使ってListのアイテムを.filterで絞り込む方法
Posted at
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme