【Vue.js】検索フィルター付きリストの作成｜computedで絞り込みを実装

<script setup>
import { ref, computed } from 'vue'

const keyword = ref('')

const items = ref([
  { id: 1, name: '山田太郎' },
  { id: 2, name: '田中花子' },
  { id: 3, name: '佐藤健' },
  { id: 4, name: '鈴木一郎' },
  { id: 5, name: '高橋愛' }
])

const filteredList = computed(() => {
  const kw = keyword.value.trim().toLowerCase()
  if (!kw) return items.value
  return items.value.filter((item) => item.name.toLowerCase().includes(kw))
})
</script>

<template>
  <input v-model="keyword" type="text" placeholder="名前で検索...">

  <ul v-if="filteredList.length">
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-else>該当する項目がありません。</p>
</template>

// utils/normalize.js
// 検索用に、文字列を揃える
export function normalize(text) {
  return text
    .normalize('NFKC')                 // 全角英数→半角、半角カナ→全角カナ、全角スペース→半角
    .toLowerCase()                     // 英字の大文字・小文字
    .replace(/[ァ-ヶ]/g,       // カタカナ→ひらがな
      (ch) => String.fromCharCode(ch.charCodeAt(0) - 0x60))
}

// normalize('ＡＢＣ ｱｲｳ カタカナ') → 'abc あいう かたかな'
// normalize('ﾔﾏﾀﾞ') と normalize('ヤマダ') → どちらも 'やまだ'

<script setup>
import { ref, computed } from 'vue'
import { normalize } from './utils/normalize'

const keyword = ref('')

const items = ref([
  { id: 1, name: '山田太郎', kana: 'やまだたろう' },
  { id: 2, name: '田中花子', kana: 'たなかはなこ' },
  { id: 3, name: '佐藤健', kana: 'さとうけん' },
  { id: 4, name: '鈴木一郎', kana: 'すずきいちろう' },
  { id: 5, name: '高橋愛', kana: 'たかはしあい' }
])

// 検索用のテキストを、先に1度だけ作っておく（入力のたびに作り直さない）
const searchable = computed(() =>
  items.value.map((item) => ({
    ...item,
    text: normalize(`${item.name} ${item.kana}`)
  }))
)

const filteredList = computed(() => {
  // スペースで区切った、すべての語を含むものに絞り込む（AND検索）
  const words = normalize(keyword.value).split(/\s+/).filter(Boolean)
  if (words.length === 0) return searchable.value
  return searchable.value.filter((item) => words.every((word) => item.text.includes(word)))
})
</script>

<template>
  <label for="search">名前で検索</label>

  <!-- v-model ではなく :value + @input：日本語の変換中も絞り込む -->
  <input
    id="search"
    type="search"
    :value="keyword"
    placeholder="例：やまだ、田中 花子"
    @input="keyword = $event.target.value"
  >

  <!-- 件数を、読み上げソフトにも伝える -->
  <p role="status">{{ filteredList.length }}件</p>

  <ul v-if="filteredList.length">
    <li v-for="item in filteredList" :key="item.id">
      {{ item.name }}（{{ item.kana }}）
    </li>
  </ul>
  <p v-else>該当する項目がありません。別のキーワードをお試しください。</p>
</template>

<script setup>
import { ref, watch } from 'vue'

const keyword = ref('')           // 入力欄の値
const debounced = ref('')         // 絞り込みに使う値（少し遅れて更新される）

let timer
watch(keyword, (value) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    debounced.value = value
  }, 300)
})

// filteredList の computed では、keyword の代わりに debounced を使う
</script>