Astroで開発を始めたばかりの方に向けて、「これ知ってると開発がラクになる！」 という便利Tipsを5つ厳選して紹介します。
どれも実務でよく使う小技ばかりなので、これからAstroを触っていく方はぜひブックマークしておいてください
対象読者
- 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でのサイト構築までを、手を動かしながら学べる内容になっています。
半額クーポン付きリンク（期限つきなのでお早めに！）
クーポンには有効期限があります。気になった方はお早めにチェックしてみてください