2025 07 . 16 WED
Web開発・フロントエンド

AstroとTypeScriptで作る超軽量なブログサイト構築法

2025.07.06

このサイトはアフィリエイト広告を利用しています。

本記事の内容

はじめに

最近のWebサイト制作で一番気になるのって、やっぱりサイトの重さとSEOですよね。重いサイトだとユーザーが離脱しちゃうし、検索結果にも上がってこない…そんな悩みを解決してくれるのが、AstroとTypeScriptの組み合わせなんです。

実際に使ってみると分かるんですが、Astroって本当に軽くて速いんですよ。しかもTypeScriptと組み合わせることで、開発中のミスもグッと減らせるし、コードの品質も格段に上がります。

柴犬アイコン

初めてAstroサイトの速度を体験したときは、正直驚きました！こんなに軽いサイトが作れるんだって。

Astroが選ばれる理由

サクサク動く秘密

Astroの一番の魅力は、パーシャル・ハイドレーションという仕組みです。簡単に言うと、本当に必要な部分だけJavaScriptを読み込むので、びっくりするくらい軽いんです。

普通のReactやVueのサイトだと、全部のJavaScriptを最初に読み込むので重くなりがちなんですが、Astroなら必要最小限で済むんですね。

SEOに強い理由

正直、Astroを選んだ一番の理由がSEOの強さでした：

機能説明実際の効果
プレレンダリング最初から静的HTMLを用意Googleがサクッと読み取ってくれる
高速読み込み最小限のJavaScriptページ速度スコアが劇的改善
モバイル最適化レスポンシブ対応スマホからの検索順位アップ

好きなフレームワークが使える

これも嬉しいポイントなんですが、AstroってReactでもVueでも、お気に入りのフレームワークをそのまま使えるんです。新しく覚え直す必要がないので、すぐに始められました。

プロジェクトの初期設定

準備するもの

まずは開発環境を整えましょう。といっても、そんなに難しくないですよ：

  • Node.js
  • npmかyarn（どちらでもOK）
  • VS Code（Astro拡張機能も入れておくと便利です）

プロジェクトを作ってみよう

Terminal window
npm create astro@latest

このコマンドを実行すると、いくつか質問されます。初めての方には以下がおすすめ：

💪 初心者におすすめの設定

  • TypeScriptは必ず選択（後で感謝することになります）
  • 最初はminimalテンプレートで始めましょう
  • 慣れてきたら、どんどん機能を追加していけばOK

プロジェクトフォルダに移動

Terminal window
cd my-astro-blog

TypeScriptの設定と最適化

tsconfig.jsonをちょっとカスタマイズ

Astroのデフォルト設定でも十分なんですが、ブログ用にちょっとだけ調整すると使いやすくなります：

{
  // Astroの厳格な TypeScript 設定を継承
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "strict": true,  // 厳格な型チェックを有効化
    "skipLibCheck": true, // ライブラリファイルの型チェックをスキップ（コンパイル高速化）
    "moduleResolution": "node", // Node.js方式のモジュール解決を使用
    "allowImportingTsExtensions": true, // .ts/.tsx拡張子付きのインポートを許可
    "isolatedModules": true, // ファイル単位でのトランスパイル対応
    "noEmit": true // JavaScriptファイルを出力しない（型チェックのみ）
  }
}

型定義で開発がラクになる

TypeScriptの型定義って、最初は面倒に感じるかもしれませんが、書いておくと後でめちゃくちゃ助かります。特にAstroコンポーネントでは：

interface Props {
  title: string;
  description?: string;
  publishDate: Date;
  tags: string[];
}

こうやって型を定義しておくと、間違ったデータを渡したときにすぐ気づけるんです。

レイアウトとコンポーネント設計

基本のレイアウトを作ろう

まずはsrc/layouts/BaseLayout.astroを作って、全ページで使い回せるレイアウトを用意します：

---
export interface Props {
  title: string;
  description?: string;
}


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


<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title} | あなたのブログ名</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <slot />
  </body>
</html>

ブログ記事専用レイアウト

記事用にはsrc/layouts/BlogPost.astroを別で作っておくと便利です：

---
import BaseLayout from './BaseLayout.astro';


const { title, description, publishDate, tags } = Astro.props.frontmatter;
---


<BaseLayout title={title} description={description}>
  <article>
    <header>
      <h1>{title}</h1>
      <time>{publishDate}</time>
      <div class="tags">
        {tags.map((tag: string) => (
          <span class="tag">{tag}</span>
        ))}
      </div>
    </header>
    <main>
      <slot />
    </main>
  </article>
</BaseLayout>

コンテンツ管理とマークダウン

Content Collectionsが便利すぎる

AstroのContent Collectionsって機能、最初は「なんだこれ？」って思ったんですが、使ってみると本当に便利なんです。ブログ記事の管理がめちゃくちゃラクになります。

src/content/config.tsでルールを決めておきます：

import { defineCollection, z } from 'astro:content'; // AstroのContent Collections機能から必要な関数をインポート


const blogCollection = defineCollection({ // ブログ用のコンテンツコレクションを定義
  type: 'content', // コンテンツタイプを指定（マークダウンなどのコンテンツファイル）
  schema: z.object({ // Zodライブラリを使ってスキーマ（型）を定義
    title: z.string(), // タイトルは文字列で必須
    description: z.string().optional(), // 説明は文字列で任意（省略可能）
    publishDate: z.date(), // 公開日は日付型で必須
    tags: z.array(z.string()), // タグは文字列の配列で必須
    draft: z.boolean().default(false), // 下書きフラグは真偽値で、デフォルトはfalse
  }),
});


export const collections = { // 定義したコレクションをエクスポート
  blog: blogCollection, // blogという名前でコレクションを登録
};

記事を書いてみよう

src/content/blog/フォルダにマークダウンファイルを作るだけです：

---
title: "初めてのAstro記事"
description: "AstroとTypeScriptで作る初めてのブログ記事"
publishDate: 2025-07-06
tags: ["Astro", "TypeScript", "ブログ"]
draft: false
---


# 初めてのAstro記事


ここに好きなことを書いていけばOKです！

SEO最適化の実装

astro-seoパッケージを入れよう

SEO対策って自分でやると結構面倒なんですが、astro-seoっていうパッケージを使うとサクッとできちゃいます：

Terminal window
npm install astro-seo

SEO設定を組み込む

レイアウトファイルにSEOコンポーネントを追加するだけ：

---
import { SEO } from 'astro-seo';
import BaseLayout from './BaseLayout.astro';


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


<BaseLayout>
  <SEO
    title={title}
    description={description}
    openGraph={{
      type: 'website',
      url: Astro.url,
      title: title,
      description: description,
      images: [{ url: image }],
    }}
    twitter={{
      card: 'summary_large_image',
      site: '@your_twitter_handle',
      title: title,
      description: description,
      image: image,
    }}
  />
  <slot />
</BaseLayout>

📢 SEO設定で気をつけること

  • タイトルと説明文は各ページでちゃんと設定する
  • TwitterやFacebookでシェアされたときのことも考える
  • 構造化データも設定しておくとリッチスニペットが表示されやすくなります

サイトマップも自動で作っちゃおう

astro.config.mjsにちょっと追加するだけで、サイトマップが自動生成されます：

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://yoursite.com',
  integrations: [sitemap()],
});

パフォーマンス最適化

画像も最適化しよう

Astroの画像最適化機能、これも地味にすごいんです：

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---


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

勝手にWebP形式に変換してくれるし、サイズも最適化してくれます。

デプロイと運用

ビルドしてデプロイ

Terminal window
npm run build

たったこれだけで、本番用のファイルが作成されます。

おすすめのデプロイ先

実際に使ってみた感想も含めて：

サービス特徴価格使ってみた感想
Vercelデプロイが超簡単無料プランあり初心者に一番おすすめ
Netlify継続デプロイが楽無料プランあり機能が豊富で中級者向け
GitHub PagesGit連携が便利無料個人ブログなら十分
Cloudflare Pages超高速・無制限帯域無料プランあり実際に使用中でいい感じ

実際にCloudflare Pagesで運用中

実は、僕自身もAstroとCloudflare Pagesの組み合わせでブログを運用しています。この組み合わせを選んだ理由と、実際に使ってみての感想をシェアしますね。

Cloudflare Pagesを選んだ理由

柴犬アイコン

Cloudflare Pagesの無制限帯域幅に惹かれました！万が一バズったときも安心です。

  • 無制限の帯域幅: どれだけアクセスが来ても追加料金なし
  • 自動デプロイ: GitHubにpushするだけで自動的にデプロイされる
  • グローバルCDN: 世界中どこからでも高速アクセス
  • 無料SSL証明書: 設定不要で自動更新

実際の運用での体験

デプロイの簡単さ

GitHubリポジトリを連携するだけで、あとは全部自動です。記事を書いてpushすれば、数分後には公開されています。

パフォーマンスの素晴らしさ

Lighthouseスコアでも満点近くを目指せます！

コスト面でのメリット

月間のビルド回数制限（500回/月）はありますが、個人ブログなら全然余裕です。実際、毎日記事を更新してもこの制限に引っかかったことはありません。

💪 実運用でのコツ

  • main ブランチにpushする前に、featureブランチでプレビューデプロイを確認
  • 無駄なビルドを避けるため、記事執筆はローカルで仕上げてからpush
  • CDNキャッシュのクリアが自動化されていないので、大きな変更時は手動でクリア

よくある質問

既存のWordPressブログから移行できますか？

はい、できます！WordPressのコンテンツをMarkdown形式に変換するツールがいくつかあります。ただし、プラグインの機能などは手動での移行作業が必要になる場合があります。

TypeScriptが分からなくても大丈夫ですか？

大丈夫です！Astroは普通のJavaScriptでも書けますし、TypeScriptの型定義も必須ではありません。ただし、型定義を書いておくと開発がグッと楽になるので、少しずつ覚えていくことをおすすめします。

画像の最適化はどうすればいいですか？

AstroにはImageコンポーネントが標準で用意されています。これを使うと、自動的にWebP形式への変換やサイズ最適化が行われます。追加の設定は基本的に不要です。

Google AnalyticsやGoogle AdSenseは使えますか？

はい、使えます！HTMLに直接スクリプトタグを追加するか、専用のAstroインテグレーションを使用することで簡単に導入できます。

コメント機能を追加したいのですが？

Astroは静的サイトなので、サーバーサイドの機能は基本的に使えません。しかし、DisqusやGiscusなどの外部サービスを使うことで、コメント機能を追加できます。

既存のReact/Vueコンポーネントは使えますか？

はい！Astroは@astrojs/reactや@astrojs/vueなどのインテグレーションを使うことで、既存のコンポーネントをそのまま使用できます。

まとめ

いかがでしたか？AstroとTypeScriptでブログを作ると、こんなにいいことがあるんです：

  • とにかく軽い: ページ読み込みが本当に速くて、ユーザーも喜んでくれます
  • SEOに強い: 検索結果で上位に表示されやすくなります
  • 開発しやすい: TypeScriptのおかげでバグが減って、開発効率がアップ
  • 拡張しやすい: 後から機能を追加するのも簡単です
  • 運用コストゼロ: Cloudflare Pagesなら完全無料で運用可能

実際にAstroとCloudflare Pagesで運用している経験から言うと、この組み合わせは本当に最強です。特にブログやポートフォリオサイトなら、パフォーマンスもコストも申し分ありません。

最初は「また新しいツール覚えるのか…」って思うかもしれませんが、一度使ってみると、その便利さにきっと驚くと思います。特にブログサイトなら、Astroの良さを存分に実感できるはずです。

ぜひ試してみてくださいね！

公式リソース

著者アイコン
コッチ フロントエンドエンジニア

フロントエンドエンジニア歴10年。コロナ禍を機にフル在宅ワークへ移行。Web開発の知見を活かし、AI活用法や仕事が捗るガジェットについて発信しています。柴犬が好きです。

関連記事

Astroブログのページネーションをサイトマップから除外する方法

2025.06.01

Astro開発環境でアナリティクスのカウントを防ぐ方法

2025.05.29

一覧に戻る

関連記事

Astroブログのページネーションをサイトマップから除外する方法

2025.06.01

Astro開発環境でアナリティクスのカウントを防ぐ方法

2025.05.29

目次