Astroにおける params と props の違いと使い分け#

1. URL依存性に基づく選択#

URL構造がデータの主要なソースとなる場合は params を使いましょう：

// src/pages/articles/[category]/[id].astro
---
const { category, id } = Astro.params;
// URLから直接取得した値をデータ取得に使用
const article = await fetchArticle(category, id);
---

ポイント: URLがユーザーの状態やナビゲーション履歴を表現する場合に有効です。

2. コンポーネント再利用性の最大化#

再利用可能なコンポーネントには必ず props を使用しましょう：

---
// src/components/Alert.astro
interface Props {
  type: 'info' | 'warning' | 'error';
  message: string;
  dismissable?: boolean;
}

const { type, message, dismissable = true } = Astro.props;
---

<div class={`alert alert-${type}`} data-dismissable={dismissable}>
  <p>{message}</p>
  {dismissable && <button class="close">×</button>}
</div>

実用例:

<Alert type="warning" message="保存されていない変更があります" />
<Alert type="error" message="接続に失敗しました" dismissable={false} />

3. データフェッチと404ハンドリング#

params の値が無効な場合の処理も考慮しましょう：

---
// src/pages/products/[id].astro
const { id } = Astro.params;
const product = await getProduct(id);

// 商品が存在しない場合は404ページにリダイレクト
if (!product) {
  return Astro.redirect('/404');
}

// または Status Code のみ変更
if (!product) {
  Astro.response.status = 404;
}
---

{product ? (
  <ProductDetail item={product} />
) : (
  <ProductNotFound id={id} />
)}

4. TypeScriptとの相性を最大化#

型安全なコードベースのために型定義を活用しましょう：

// params用の型定義
export interface ProductParams {
  id: string;
  category?: string;
}

// 共通的なprops用の型定義（再利用可能）
export interface CardProps {
  title: string;
  description: string;
  imageUrl?: string;
  isPromoted?: boolean;
}

動的ブログ記事ページの例#

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
import RelatedPosts from '../../components/RelatedPosts.astro';
import ShareButtons from '../../components/ShareButtons.astro';

// 1. paramsからスラッグを取得
const { slug } = Astro.params;

// 2. コンテンツの取得
const posts = await getCollection('blog');
const post = posts.find(post => post.slug === slug);

// 3. 記事が存在しない場合は404
if (!post) {
  return Astro.redirect('/404');
}

// 4. 関連記事の取得（同じタグを持つ記事）
const relatedPosts = posts
  .filter(p => p.slug !== slug && p.data.tags.some(tag => post.data.tags.includes(tag)))
  .slice(0, 3);

// 5. 記事の内容をレンダリングする準備
const { Content } = await post.render();
---

<BlogLayout title={post.data.title} description={post.data.description}>
  <article class="prose lg:prose-xl mx-auto">
    <h1>{post.data.title}</h1>
    
    <div class="metadata">
      <time datetime={post.data.date.toISOString()}>
        {post.data.date.toLocaleDateString('ja-JP')}
      </time>
      <div class="tags">
        {post.data.tags.map(tag => (
          <a href={`/tags/${tag}`} class="tag">#{tag}</a>
        ))}
      </div>
    </div>
    
    <Content />
    
    <!-- コンポーネントにはpropsで必要なデータを渡す -->
    <ShareButtons 
      title={post.data.title} 
      url={`https://myblog.com/blog/${slug}`} 
    />
    
    <RelatedPosts posts={relatedPosts} />
  </article>
</BlogLayout>

再利用可能なUI部品の例#

---
// src/components/PostCard.astro
interface Props {
  title: string;
  date: Date;
  excerpt: string;
  slug: string;
  featured?: boolean;
}

const { title, date, excerpt, slug, featured = false } = Astro.props;
const formattedDate = date.toLocaleDateString('ja-JP');
---

<article class={`card ${featured ? 'card-featured' : ''}`}>
  <a href={`/blog/${slug}`}>
    <h2>{title}</h2>
    <p class="excerpt">{excerpt}</p>
    <time datetime={date.toISOString()}>{formattedDate}</time>
  </a>
</article>

<style>
  .card {
    border: 1px solid #eee;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .card-featured {
    border-left: 4px solid #7c3aed;
    background-color: #f5f3ff;
  }
</style>

間違い1: クライアントコンポーネントからparamsにアクセスしようとする#

---
// ❌ これは動作しません
---
<script>
  // クライアントサイドではAstro.paramsは利用できない
  console.log(Astro.params.slug);  // エラー!
</script>

解決策: 必要な値はdata属性などで渡しておく

---
const { slug } = Astro.params;
---
<div data-article-id={slug}>
  <script>
    // data属性経由でアクセス
    const container = document.querySelector('[data-article-id]');
    const slug = container.dataset.articleId;
    console.log('Article slug:', slug);
  </script>
</div>

間違い2: propsの型付けを省略する#

---
// ❌ 型がないため、誤った使い方を防げない
const { titl } = Astro.props; // タイポしても警告されない
---

解決策: 常にPropsインターフェースを定義する

---
// ✅ 型安全なpropsの扱い
interface Props {
  title: string;
  description?: string;
}

const { title, description = '' } = Astro.props;
---