対象読者

Astroを触り始めたばかりの人
公式チュートリアルは終えたけど、実務での使い方を知りたい人
「もっとラクに書きたい！」と感じ始めた人

Tips 1. `Astro.glob()` より Content Collections を使おう

複数のMarkdownファイル（ブログ記事など）を扱うとき、Astro.glob() を使っている入門記事をよく見かけますが、今は Content Collections が推奨です。

型安全でオートコンプリートも効くので、開発体験が段違いに良くなります ✨

`src/content.config.ts` にスキーマを定義

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

ページ側での使い方

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
// posts[0].data.title に型がついている！
---

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/blog/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

メリット: frontmatterのtypoに即気付ける・IDEでの補完が神・バリデーション付き 🎉

Tips 2. 画像最適化は `<Image />` コンポーネントに任せる

Astroには公式の画像最適化機能が組み込まれています。<img> タグを直接書くのではなく、astro:assets の Image コンポーネントを使いましょう。

WebPへの自動変換、遅延読み込み、レスポンシブサイズ生成まで設定ゼロでやってくれます。

---
import { Image } from 'astro:assets';
import myImage from '../assets/hero.png';
---

<Image
  src={myImage}
  alt="ヒーロー画像"
  width={800}
  height={400}
  format="webp"
  loading="lazy"
/>

ポイント

src/assets/ に置いた画像 はビルド時に自動最適化される
public/ に置いた画像 は最適化されない（そのまま配信）
外部URLの画像を使う場合は astro.config.mjs に image.domains の設定が必要

Lighthouseのパフォーマンススコアが数十点上がることもあります 📈

Tips 3. **クライアントJSは `client:*` ディレクティブで最小限に**

Astroの真骨頂は 「デフォルトでJSゼロ」。ReactやVueのコンポーネントを使うときも、必要なものだけJSを送るのがコツです。

---
import Counter from '../components/Counter.jsx';
import Header from '../components/Header.jsx';
---

<!-- 静的HTMLとして出力（JSゼロ） -->
<Header />

<!-- ページ読み込み時にhydrate -->
<Counter client:load />

<!-- ブラウザがidleになったらhydrate（優先度低） -->
<Counter client:idle />

<!-- 画面に入ったらhydrate（推奨！） -->
<Counter client:visible />

<!-- メディアクエリ一致時のみ（モバイル用UIなどに） -->
<Counter client:media="(max-width: 768px)" />

使い分けの目安

ディレクティブ	ユースケース
`client:load`	ヘッダーの検索ボックスなど、即操作されるもの
`client:idle`	サイドバーのUIなど、少し遅れてもOKなもの
`client:visible`	ページ下部のカルーセルなど、見えたら動けばOK
`client:media`	特定画面サイズだけで必要なもの

迷ったら client:visible が体感的にもパフォーマンス的にもベストな選択です 👍

Tips 4. View Transitions でSPA風の滑らかな遷移を追加

たった1行追加するだけで、ページ遷移にヌルッとしたアニメーションを付けられます。ネイティブブラウザAPIの View Transitions API を活用した機能です。

共通レイアウトに追加するだけ

---
// src/layouts/BaseLayout.astro
import { ClientRouter } from 'astro:transitions';
---
<html>
  <head>
    <ClientRouter />
  </head>
  <body>
    <slot />
  </body>
</html>

特定要素にアニメーションを指定

<img
  src={post.image}
  alt={post.title}
  transition:name={`hero-${post.id}`}
/>

同じ transition:name を持つ要素間で、ページを跨いで滑らかにモーフィングします。ブログのサムネイル→詳細ページのヒーロー画像などにピッタリです ✨

Tips 5. 環境変数は `astro:env` で型安全に扱う

.env の値を import.meta.env.XXX で取得している方、多いのでは？

Astroには astro:env という 型安全な環境変数機能 があります。スキーマを定義すれば、必須チェックや型変換もやってくれます。

`astro.config.mjs` に定義

import { defineConfig, envField } from 'astro/config';

export default defineConfig({
  env: {
    schema: {
      API_URL: envField.string({
        context: 'server',
        access: 'public',
        default: 'https://api.example.com',
      }),
      API_SECRET: envField.string({
        context: 'server',
        access: 'secret',
      }),
      PUBLIC_SITE_NAME: envField.string({
        context: 'client',
        access: 'public',
      }),
    },
  },
});

使い方

import { API_URL, API_SECRET } from 'astro:env/server';
import { PUBLIC_SITE_NAME } from 'astro:env/client';

// 型が付いている & 未定義なら起動時にエラーで検知！
const res = await fetch(`${API_URL}/posts`, {
  headers: { Authorization: `Bearer ${API_SECRET}` },
});

「本番デプロイしたら環境変数抜けててエラー…」 というあるあるを未然に防げます 🛡️

まとめ

#	Tips	効果
1	Content Collections	型安全なコンテンツ管理
2	`<Image />` コンポーネント	画像最適化を自動化
3	`client:*` ディレクティブ	JSを最小化して爆速化
4	View Transitions	UXが一気にリッチに
5	`astro:env`	環境変数を型安全に

どれも「知っているかどうか」で開発効率もサイトの品質も大きく変わるポイントです。ぜひ手元のプロジェクトで試してみてください

📢 【期限つき・お早めに！】Astro入門講座が半額で受けられます

もっと体系的にAstroを学びたい方向けに、Udemyで入門講座を公開しています。

HTML/CSSの基礎からAstroでのサイト構築までを、手を動かしながら学べる内容になっています。

半額クーポン付きリンク（期限つきなのでお早めに！）

👉 Astro入門講座を半額で受講する

クーポンには有効期限があります。気になった方はお早めにチェックしてみてください