watchと検索機能

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

const keyword = ref('')

// watch(監視対象のデータソース, コールバック関数)
watch(keyword, (newVal, oldVal) => {
console.log(`検索キーワードが「${oldVal}」から「${newVal}」に変わりました`)
// ここでフィルタリングロジックを実行
})
</script>

<template>
  <input v-model="keyword" placeholder="記事を検索...">
  <p>現在の検索：{{ keyword }}</p>
</template>

import { ref, watch } from 'vue'

const keyword = ref('')
const category = ref('すべて')

// 単一のrefを監視
watch(keyword, (newVal) => {
  document.title = newVal ?`検索：${newVal}` : 'サンプル Blog'
})

// 複数のデータソースを監視
watch([keyword, category], ([newKw, newCat], [oldKw, oldCat]) => {
  console.log('キーワードまたはカテゴリが変わりました。記事を再フィルタリングします')
  // フィルタリングロジックを実行...
})

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

const keyword = ref('')
const articles = ref([
{ id: 1, title: 'Vue3入門' },
{ id: 2, title: 'JS非同期' },
])

const filteredArticles = ref([])

// watchEffectがkeywordとarticlesを自動追跡
// また即座に一度実行され、filteredArticlesを初期化します
watchEffect(() => {
// 関数内で使われるすべてのリアクティブデータが自動追跡されます
  filteredArticles.value = articles.value.filter(
    a => a.title.includes(keyword.value)
  )
console.log(`フィルタリング結果：${filteredArticles.value.length} 件`)
})
</script>

<template>
  <input v-model="keyword" placeholder="検索">
  <div v-for="a in filteredArticles" :key="a.id">
    {{ a.title }}
  </div>
</template>

import { ref, watch } from 'vue'

const keyword = ref('')
const filteredArticles = ref([])

let timer = null   // タイマーID

watch(keyword, (newVal) => {
  // 前回のタイマーをクリア
  clearTimeout(timer)
  // 300ms以内に新しい入力変化がなければ、フィルタリングを実行
  timer = setTimeout(() => {
    filteredArticles.value = articles.value.filter(
      a => a.title.includes(newVal) || a.summary.includes(newVal)
    )
  }, 300)
})

<!-- ファイルパス：src/views/HomeView.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue'
import BlogCard from '../components/BlogCard.vue'
import CategoryFilter from '../components/CategoryFilter.vue'

const articles = ref([]) // すべての記事
const isLoading = ref(true)
const activeCategory = ref('すべて')
const keyword = ref('') // 検索キーワード

// すべてのカテゴリを抽出
const categories = computed(() => {
  const cats = articles.value.map(a => a.category)
return ['すべて', ...new Set(cats)]
})

// computedはkeywordとactiveCategoryの変化を自動追跡します
// どちらかが変わると、フィルタリング結果が自動的に再計算されます
const filteredArticles = computed(() => {
  let result = articles.value

// ステップ1：カテゴリでフィルタリング
if (activeCategory.value !== 'すべて') {
    result = result.filter(a => a.category === activeCategory.value)
  }

// ステップ2：キーワードでフィルタリング（タイトルと要約を検索）
  if (keyword.value.trim()) {
    const kw = keyword.value.trim().toLowerCase()
    result = result.filter(a =>
      a.title.toLowerCase().includes(kw) ||
      a.summary.toLowerCase().includes(kw)
    )
  }

  return result
})

// カテゴリを切り替えても検索をクリアせず、両方が組み合わさって機能します
function handleCategoryChange(cat) {
  activeCategory.value = cat
}

// データを読み込む
onMounted(async () => {
  try {
    const res = await fetch('/posts.json')
    articles.value = await res.json()
  } catch (err) {
console.error('読み込み失敗', err)
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div class="home">
    <!-- 検索ボックス -->
    <div class="search-bar">
      <input
       v-model="keyword"
       type="text"
       placeholder="記事のタイトルまたは要約を検索..."
       class="search-input"
     />
      <span v-if="keyword" class="clear-btn" @click="keyword = ''">✕</span>
    </div>

    <!-- カテゴリフィルタ -->
    <CategoryFilter
     :categories="categories"
     :active-category="activeCategory"
     @update-category="handleCategoryChange"
   />

    <!-- 読み込み中 / 空 / 正常 -->
    <p v-if="isLoading">読み込み中...</p>
    <p v-else-if="filteredArticles.length === 0">一致する記事が見つかりません</p>
    <div v-else class="article-grid">
      <BlogCard
       v-for="article in filteredArticles"
       :key="article.id"
       :id="article.id"
       :title="article.title"
       :summary="article.summary"
       :date="article.date"
       :category="article.category"
     />
    </div>
  </div>
</template>

<style scoped>
.home { max-width: 960px; margin: 0 auto; padding: 20px; }

.search-bar {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #427DB8;
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
</style>