Coding Styles

Astroでの実装パターンをケース別に解説します。

最も基本的な書き方です。--- フェンス内で変数を定義し、テンプレートで使用します。

                                    ---
// Server-side (Build-time)
const greeting = "Hello, Astro!";
const items = ["Apple", "Banana", "Cherry"];
---

<div class="card">
  <h2>{greeting}</h2>
  <ul>
    {items.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
</div>

<style>
  .card { padding: 1rem; border: 1px solid #ccc; }
</style>

テキストデータを分離することで、変更に強く、AIにも指示しやすい構成にします。

                                    // src/data/home.ts
export const homeData = {
  title: "Welcome",
  description: "This is a separated content."
};

// src/pages/index.astro
---
import { homeData } from '../data/home';
---

<h1>{homeData.title}</h1>
<p>{homeData.description}</p>

動的な機能が必要な場合のみ、Reactコンポーネント(.tsx)を作成し、Astroから呼び出します。

                                    // src/components/Counter.tsx
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

// src/pages/index.astro
---
import { Counter } from '../components/Counter';
---
<!-- client:load でJSをロード -->
<Counter client:load />

AstroはデフォルトでTypeScriptをサポートしています。Propsの型定義も簡単です。

                                    ---
interface Props {
  title: string;
  isActive?: boolean;
}

const { title, isActive = false } = Astro.props;
---

<div class={isActive ? "active" : ""}>
  {title}
</div>

Rich ecosystem

Astroはさらに、Markdown/MDXのサポート、画像最適化、Sitemap生成などの機能も標準または公式プラグインで容易に導入できます。