Web開発の世界において、静的サイトジェネレーターとしてAstroが注目を集めています。Astroは独自のコンポーネント構文を持ち、React、Vue、Svelteといった他のフレームワークとは異なるアプローチを提供しています。

本記事では、Astroのコンポーネント構文を基礎から応用まで体系的に学習していきます。初心者の方でも安心して読み進められるよう、実際のコード例を交えながら段階的に解説していきますね。

Astroコンポーネントの基本概念

Astroコンポーネントは、HTML、CSS、JavaScriptを一つのファイルにまとめて記述できる仕組みです。他のフレームワークと違い、Astroは「Islands Architecture」を採用しており、必要な部分のみをインタラクティブにするという特徴があります。

Astroコンポーネントの最大の魅力は、シンプルでありながら強力な表現力を持つ点です。従来のHTMLを書く感覚で、動的なコンテンツも扱えるのが素晴らしいところですね。

Astroの設計思想

Astroは「送信するJavaScriptを最小限にする」という哲学に基づいて設計されています。これにより、高速で軽量なWebサイトを構築できます。

特徴	説明
1	ゼロJavaScript by デフォルト
2	必要な部分のみハイドレーション
3	フレームワーク非依存
4	静的サイトに最適化

コンポーネントファイル構造

Astroコンポーネントは.astro拡張子を持つファイルで定義されます。このファイルは独特の構造を持っており、正しく理解することが重要です。

.astroファイルの基本構造

.astroファイルは大きく2つの部分に分かれています。フロントマター（Component Script）とコンポーネントテンプレート（Component Template）です。

javascriptCopy code---
// Component Script（フロントマター）
// ここにJavaScript/TypeScriptコードを記述
const greeting = "Hello, Astro!"
const currentYear = new Date().getFullYear()
---

<!-- Component Template -->
<!-- ここにHTMLとAstro構文を記述 -->
<h1>{greeting}</h1>
<p>Copyright {currentYear}</p>

この構造により、ロジック部分とテンプレート部分を明確に分離できます。可読性が高く、メンテナンスしやすいコードが書けますね。

フロントマター（---）の役割

フロントマターは、コンポーネントのサーバーサイドで実行されるJavaScript/TypeScriptコードを記述する領域です。ここで定義した変数や関数は、コンポーネントテンプレート内で使用できます。

javascriptCopy code---
// データの取得
const users = await fetch('https://api.example.com/users')
  .then(res => res.json())

// ヘルパー関数の定義
function formatDate(date) {
  return new Intl.DateTimeFormat('ja-JP').format(new Date(date))
}

// 定数の定義
const SITE_TITLE = "My Astro Site"
---

フロントマターの実行タイミングはビルド時であることを覚えておきましょう。つまり、ここで書いたコードはクライアントには送信されません。

HTML部分の記述方法

Astroのテンプレート部分では、標準的なHTMLに加えて、Astro独自の構文を使用できます。基本的なHTMLの書き方から見ていきましょう。

基本的なHTML記述

AstroではHTMLをそのまま記述できます。これにより、既存のHTMLコードを簡単に移行できるのが大きなメリットです。

htmlCopy code<div class="container">
  <header>
    <h1>Welcome to Astro</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <p>This is a standard HTML content.</p>
  </main>
</div>

HTML5のすべての要素と属性がサポートされているので、既存の知識をそのまま活用できますね。

Astro独自の記法

Astroには、HTMLを拡張した独自の記法がいくつかあります。これらを覚えることで、より動的で柔軟なコンポーネントが作成できます。

フラグメント記法

複数のルート要素を返したい場合は、Fragment（<> と <​/​>）を使用します。

htmlCopy code---
const items = ['Apple', 'Banana', 'Orange']
---

<>
  <h2>Fruits</h2>
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
</>

set ディレクティブ

HTMLを文字列として動的に挿入したい場合は、set:htmlディレクティブを使用します。

htmlCopy code---
const htmlContent = '<strong>This is bold text</strong>'
---

<div set:html={htmlContent}></div>

JavaScript/TypeScriptの統合

Astroでは、JavaScriptとTypeScriptの両方をサポートしています。特にTypeScriptを使用することで、型安全なコンポーネントを作成できます。

コンポーネントスクリプトの書き方

フロントマター内では、モダンなJavaScript/TypeScriptの機能をすべて使用できます。async/awaitも問題なく使用できますよ。

typescriptCopy code---
// TypeScriptの型定義
interface User {
  id: number
  name: string
  email: string
}

// 外部データの取得
const users: User[] = await fetch('https://api.example.com/users')
  .then(res => res.json())

// 配列操作
const activeUsers = users.filter(user => user.id > 0)
const userCount = activeUsers.length

// ES6のデストラクチャリング
const { name: siteName, version } = Astro.props
---

<div>
  <h1>{siteName} v{version}</h1>
  <p>Active users: {userCount}</p>
</div>

変数とデータの扱い

フロントマター内で定義した変数は、テンプレート内で{}構文を使って参照できます。オブジェクトや配列の操作も直感的に行えます。

javascriptCopy code---
// プリミティブ型
const title = "Astro Component"
const count = 42
const isActive = true

// オブジェクト
const config = {
  theme: 'dark',
  language: 'ja'
}

// 配列
const tags = ['astro', 'javascript', 'web']

// 計算された値
const displayTitle = title.toUpperCase()
const doubledCount = count * 2
---

<article>
  <h1>{displayTitle}</h1>
  <p>Count: {doubledCount}</p>
  <p>Theme: {config.theme}</p>
  <p>Active: {isActive ? 'Yes' : 'No'}</p>
</article>

変数の参照は非常にシンプルで、JavaScriptの式をそのまま{}で囲むだけです。

Astroの式とテンプレート構文

Astroのテンプレート構文は、JSXに似ていますが、より直感的で書きやすい特徴があります。動的なコンテンツの表示方法を詳しく見ていきましょう。

変数の埋め込み（{}）

波括弧{}内にJavaScriptの式を記述することで、動的なコンテンツを表示できます。

javascriptCopy code---
const user = {
  name: '田中太郎',
  age: 30,
  hobbies: ['読書', 'プログラミング', '映画鑑賞']
}

const currentTime = new Date().toLocaleString('ja-JP')
---

<div class="user-profile">
  <h2>{user.name}さんのプロフィール</h2>
  <p>年齢: {user.age}歳</p>
  <p>趣味の数: {user.hobbies.length}個</p>
  <p>最終更新: {currentTime}</p>
  
  <!-- メソッドチェーンも可能 -->
  <p>名前の長さ: {user.name.replace('さん', '').length}文字</p>
</div>

条件分岐の記述

Astroでは、三項演算子や論理演算子を使った条件分岐が可能です。複雑な条件の場合は、フロントマターで処理することをお勧めします。

javascriptCopy code---
const user = {
  name: '山田花子',
  isAdmin: true,
  lastLogin: new Date('2024-01-15')
}

const isRecentLogin = (new Date() - user.lastLogin) < 7 * 24 * 60 * 60 * 1000
---

<div class="user-info">
  <h3>{user.name}</h3>
  
  <!-- 三項演算子による条件分岐 -->
  <span class="badge">
    {user.isAdmin ? '管理者' : '一般ユーザー'}
  </span>
  
  <!-- 論理演算子による条件表示 -->
  {isRecentLogin && <p class="status-good">最近ログインしています</p>}
  {!isRecentLogin && <p class="status-warning">しばらくログインしていません</p>}
  
  <!-- 複数条件の組み合わせ -->
  {user.isAdmin && isRecentLogin && 
    <button class="admin-panel">管理パネル</button>
  }
</div>

ループ処理の実装

配列のデータを繰り返し表示する場合は、JavaScriptのmapメソッドを使用します。Astroでは非常に自然な書き方ができますね。

javascriptCopy code---
const products = [
  { id: 1, name: 'ノートPC', price: 89800, category: 'electronics' },
  { id: 2, name: 'マウス', price: 2980, category: 'electronics' },
  { id: 3, name: 'デスク', price: 15800, category: 'furniture' }
]

// カテゴリごとにグループ化
const groupedProducts = products.reduce((acc, product) => {
  if (!acc[product.category]) acc[product.category] = []
  acc[product.category].push(product)
  return acc
}, {})
---

<div class="product-list">
  <h2>商品一覧</h2>
  
  <!-- 基本的なループ -->
  <ul>
    {products.map(product => (
      <li key={product.id}>
        <strong>{product.name}</strong> - ¥{product.price.toLocaleString()}
      </li>
    ))}
  </ul>
  
  <!-- インデックス付きループ -->
  <ol>
    {products.map((product, index) => (
      <li key={product.id}>
        {index + 1}. {product.name}
      </li>
    ))}
  </ol>
  
  <!-- グループ化されたデータの表示 -->
  {Object.entries(groupedProducts).map(([category, items]) => (
    <section key={category}>
      <h3>{category}</h3>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </section>
  ))}
</div>

プロップス（Props）の活用

プロップスは、コンポーネント間でデータを受け渡しする仕組みです。再利用可能なコンポーネントを作成する上で欠かせない機能ですね。

プロップスの定義方法

Astroでは、Astro.propsオブジェクトを通じてプロップスにアクセスできます。分割代入を使うことで、より読みやすいコードが書けます。

javascriptCopy code---
// プロップスの受け取り（分割代入）
const { title, description, author, publishedAt } = Astro.props

// デフォルト値の設定
const {
  theme = 'light',
  showDate = true,
  maxLength = 100
} = Astro.props

// プロップスを使った計算
const truncatedDescription = description.length > maxLength 
  ? description.substring(0, maxLength) + '...'
  : description

const formattedDate = showDate 
  ? new Date(publishedAt).toLocaleDateString('ja-JP')
  : null
---

<article class={`post post--${theme}`}>
  <header>
    <h1>{title}</h1>
    <p class="description">{truncatedDescription}</p>
    
    <div class="meta">
      <span class="author">by {author}</span>
      {formattedDate && <time datetime={publishedAt}>{formattedDate}</time>}
    </div>
  </header>
</article>

型安全なプロップス

TypeScriptを使用する場合、プロップスの型を定義することで、コンポーネントの使用方法を明確にできます。

typescriptCopy code---
// プロップスの型定義
interface Props {
  title: string
  description: string
  author: string
  publishedAt: string
  theme?: 'light' | 'dark'
  showDate?: boolean
  maxLength?: number
}

// 型付きでプロップスを受け取り
const { 
  title, 
  description, 
  author, 
  publishedAt,
  theme = 'light',
  showDate = true,
  maxLength = 100
}: Props = Astro.props

// バリデーション
if (!title || !description) {
  throw new Error('title and description are required props')
}
---

<article class={`post post--${theme}`}>
  <h1>{title}</h1>
  <p>{description}</p>
  <small>by {author}</small>
</article>

デフォルト値の設定

プロップスにデフォルト値を設定することで、柔軟性のあるコンポーネントを作成できます。

javascriptCopy code---
// 複数のデフォルト値設定パターン
const {
  // プリミティブ型のデフォルト値
  size = 'medium',
  color = 'primary',
  disabled = false,
  
  // オブジェクトのデフォルト値
  config = {
    animation: true,
    duration: 300
  },
  
  // 配列のデフォルト値
  items = [],
  
  // 関数のデフォルト値
  onClick = () => console.log('Button clicked')
} = Astro.props

// サイズに応じたクラス名の生成
const sizeClass = `btn--${size}`
const colorClass = `btn--${color}`
const disabledClass = disabled ? 'btn--disabled' : ''
---

<button 
  class={`btn ${sizeClass} ${colorClass} ${disabledClass}`}
  disabled={disabled}
  onclick={onClick}
>
  <slot>Click me</slot>
</button>

スロット（Slots）システム

スロットは、コンポーネント内に外部からコンテンツを注入する仕組みです。レイアウトコンポーネントやラッパーコンポーネントの作成に非常に便利ですね。

基本的なスロット

<slot>タグを使用することで、コンポーネントの使用者が自由にコンテンツを挿入できます。

htmlCopy code---
// Card.astro
const { title, className = '' } = Astro.props
---

<div class={`card ${className}`}>
  <header class="card-header">
    <h2>{title}</h2>
  </header>
  
  <div class="card-body">
    <!-- ここにスロットのコンテンツが挿入される -->
    <slot />
  </div>
  
  <footer class="card-footer">
    <slot name="actions" />
  </footer>
</div>

このカードコンポーネントは以下のように使用できます：

htmlCopy code---
import Card from './Card.astro'
---

<Card title="お知らせ">
  <p>新機能がリリースされました！</p>
  <ul>
    <li>ダークモード対応</li>
    <li>パフォーマンス改善</li>
  </ul>
  
  <div slot="actions">
    <button>詳細を見る</button>
    <button>閉じる</button>
  </div>
</Card>

名前付きスロット

複数のスロットを使い分けたい場合は、name属性を使用して名前付きスロットを作成できます。

htmlCopy code---
// Layout.astro
const { title, description } = Astro.props
---

<html>
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  
  <!-- head スロット：メタタグやスタイルの追加 -->
  <slot name="head" />
</head>

<body>
  <header>
    <!-- header スロット：ナビゲーションなど -->
    <slot name="header">
      <nav>デフォルトナビゲーション</nav>
    </slot>
  </header>
  
  <main>
    <!-- メインコンテンツ（無名スロット） -->
    <slot />
  </main>
  
  <aside>
    <!-- sidebar スロット：サイドバーコンテンツ -->
    <slot name="sidebar" />
  </aside>
  
  <footer>
    <!-- footer スロット：フッターコンテンツ -->
    <slot name="footer">
      <p>© 2024 My Site</p>
    </slot>
  </footer>
  
  <!-- scripts スロット：JavaScriptの追加 -->
  <slot name="scripts" />
</body>
</html>

スコープ付きスロット

スロット内で親コンポーネントのデータにアクセスしたい場合は、スロットプロパティを使用します。

javascriptCopy code---
// DataList.astro
const { items, loading = false } = Astro.props

// データの加工
const processedItems = items?.map((item, index) => ({
  ...item,
  index,
  isEven: index % 2 === 0
})) || []
---

<div class="data-list">
  {loading ? (
    <div class="loading">
      <slot name="loading">
        <p>読み込み中...</p>
      </slot>
    </div>
  ) : processedItems.length > 0 ? (
    <ul>
      {processedItems.map(item => (
        <li key={item.id} class={item.isEven ? 'even' : 'odd'}>
          <!-- スロット内でアイテムデータを使用 -->
          <slot name="item" {item} {index}={item.index}>
            <!-- デフォルト表示 -->
            <span>{item.name}</span>
          </slot>
        </li>
      ))}
    </ul>
  ) : (
    <div class="empty">
      <slot name="empty">
        <p>データがありません</p>
      </slot>
    </div>
  )}
</div>

CSS統合とスタイリング

AstroのCSSサポートは非常に強力で、様々なスタイリング手法を選択できます。スコープ付きCSSから、グローバルスタイル、CSS-in-JS的な記法まで対応していますね。

スコープ付きCSS

Astroの最も特徴的な機能の一つが、スコープ付きCSSです。<style>タグ内に記述したCSSは、自動的にそのコンポーネントにスコープされます。

htmlCopy code---
const { variant = 'primary', size = 'medium' } = Astro.props
---

<button class={`btn btn--${variant} btn--${size}`}>
  <slot>Button</slot>
</button>

<style>
  /* このCSSは自動的にこのコンポーネントにスコープされる */
  .btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
  }
  
  .btn--primary {
    background-color: #007bff;
    color: white;
  }
  
  .btn--secondary {
    background-color: #6c757d;
    color: white;
  }
  
  .btn--small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
  
  .btn--large {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
  }
  
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .btn:active {
    transform: translateY(0);
  }
</style>

グローバルスタイル

グローバルに適用したいスタイルは、:global()を使用するか、別途グローバルCSSファイルを作成します。

htmlCopy code---
const { theme = 'light' } = Astro.props
---

<div class={`app app--${theme}`}>
  <slot />
</div>

<style>
  /* コンポーネントスコープのスタイル */
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .app--light {
    background-color: #ffffff;
    color: #333333;
  }
  
  .app--dark {
    background-color: #1a1a1a;
    color: #ffffff;
  }
  
  /* グローバルスタイル */
  :global(body) {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  
  :global(*, *::before, *::after) {
    box-sizing: border-box;
  }
  
  /* テーマに応じたグローバル変数 */
  :global(.app--light) {
    --primary-color: #007bff;
    --background-color: #ffffff;
    --text-color: #333333;
  }
  
  :global(.app--dark) {
    --primary-color: #4dabf7;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
  }
</style>

CSS-in-JS的な記法

動的なスタイリングが必要な場合は、JavaScriptで計算したスタイル値をインラインスタイルとして適用できます。

javascriptCopy code---
const { 
  width = 100, 
  height = 50, 
  backgroundColor = '#f0f0f0',
  borderRadius = 8,
  animation = false 
} = Astro.props

// 動的スタイルの計算
const dynamicStyles = {
  width: `${width}px`,
  height: `${height}px`,
  backgroundColor,
  borderRadius: `${borderRadius}px`,
  animation: animation ? 'pulse 2s infinite' : 'none'
}

// CSS Custom Properties（CSS変数）の生成
const cssVariables = {
  '--dynamic-width': `${width}px`,
  '--dynamic-height': `${height}px`,
  '--dynamic-bg': backgroundColor,
  '--dynamic-radius': `${borderRadius}px`
}
---

<!-- インラインスタイルでの動的スタイリング -->
<div 
  class="dynamic-box"
  style={dynamicStyles}
>
  <slot />
</div>

<!-- CSS変数を使用したスタイリング -->
<div 
  class="variable-box"
  style={cssVariables}
>
  <slot name="content" />
</div>

<style>
  .dynamic-box {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  .variable-box {
    width: var(--dynamic-width);
    height: var(--dynamic-height);
    background-color: var(--dynamic-bg);
    border-radius: var(--dynamic-radius);
    border: 2px solid currentColor;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .dynamic-box {
      transform: scale(0.8);
    }
    
    .variable-box {
      width: calc(var(--dynamic-width) * 0.8);
      height: calc(var(--dynamic-height) * 0.8);
    }
  }
</style>

まとめ

Astroのコンポーネント構文について、基礎から応用まで幅広く学習してきました。Astroは独自のアプローチで、パフォーマンスと開発体験の両方を重視した優れたフレームワークです。

本記事で解説した要素を組み合わせることで、効率的で保守性の高いWebサイトを構築できるでしょう。特に以下のポイントを意識して開発を進めていただければと思います。

重要なポイントの振り返り

項目	ポイント
1	フロントマターでのサーバーサイド処理
2	プロップスによる再利用性の向上
3	スロットシステムでの柔軟な構造設計
4	スコープ付きCSSでの安全なスタイリング
5	TypeScriptによる型安全性の確保

Astroのコンポーネント構文をマスターすることで、モダンで高性能なWebサイト開発が可能になります。ぜひ実際のプロジェクトで活用して、その威力を実感してみてくださいね。

これからAstroを使った開発を始める方にとって、本記事が理解の助けになれば幸いです。継続的な学習と実践を通じて、より深い理解を目指していきましょう。

関連リンク

• Astro公式ドキュメント
• Astroコンポーネント構文リファレンス
• Astro プロップスガイド
• Astro スロットドキュメント
• Astro スタイリングガイド
• Astro TypeScript設定
• Astro GitHub リポジトリ