ブログを Astro で始める
文章と図だけでは理解しにくい仕組みの流れや状態の変化に動きをつけるため、Astro を利用して ブログを HTML のアプリケーションとして作る。
- 公開日
- 更新日
はじめに
このブログは、自分が気になった技術や学びを残していく、メモ寄りの技術ブログです。
ただし、単なるテキストの備忘録ではなく、実際に操作して動かしながら自身の理解を深められるようなコンテンツを目指しました。
エンジニアリングの世界は非常に抽象度が高いと感じています。精緻に組み上げられた結果として「目に見える処理」が実行されますが、その根底にあるロジックはラップされ、外からは見えにくくなっています。ネットワークの仕組みなども、文章や静的な図解だけでは、パケットの実際の動きを直感的に想像するのは困難です。
そこで、「パラメータを変えると結果がどう変わるのか」などを視覚的かつ直感的に体験できるようにしたいと考え、本ブログを一つのアプリケーションとして実装しました。
構成図
本ブログのシステム構成は以下のようになっています。
開発は自身のローカルPCで行っています。「記事のテキスト」と「動かせるコンポーネント」を組み合わせ、Astro を用いて静的な HTML・CSS・JavaScript としてビルドします。生成されたファイル一式は、Cloudflare Pages にデプロイしてホスティングしています。
読者がブラウザからアクセスすると、Cloudflare Pages からこれらのファイルが配信され、記事を読みながら手元のブラウザ上でアプリを動かせる仕組みとなっています。
使っている Astro の機能
本ブログのWebフレームワークには Astro を採用しています。Astro は、文章を中心としたWebサイトの構築に適したWebフレームワークです（出典: Astro を選ぶ理由、2026-09-10 確認、Astro 7.2.6）。
React や Next.js のように、ページ全体に JavaScript を配って動かす作り方に対して、Astro は「静的な文章は HTML のまま出力し、動かす必要のある部分だけに JavaScript を適用する」というアプローチを取ります。
本ブログの「本文は静的なまま、特定の部品だけが動く」という作りは、まさにこの思想をそのまま活かしたものです。
ここからは、本サイトで実際に使っている主な機能を 4 つ紹介します。
1. 記事データの型定義と検査（Content Collections）
ブログ記事の品質を保つために、Astro の Content Collections と呼ばれる機能を利用しています（出典: Astro Content Collections、2026-09-10 確認）。
記事ファイルの先頭には — で区切って置く「frontmatter」という欄があり、このサイトでは題名や日付などのメタデータを書いています。
---
title: "ブログを Astro で始める"
date: 2026-08-25
updated: 2026-09-17
summary: "文章と図だけでは理解しにくい仕組みの流れや状態の変化に動きをつけるため、Astro を利用して ブログを HTML のアプリケーションとして作る。"
tags:
- astro
- cloudflare
sources:
- "https://docs.astro.build/ja/concepts/why-astro/"
- "https://docs.astro.build/ja/guides/content-collections/"
- "https://docs.astro.build/ja/concepts/islands/"
- "https://docs.astro.build/ja/guides/view-transitions/"
status: published
phase: published
target: blog
---Content Collections は、この frontmatter の記載ルールを厳密に定める機能です。
このサイトでは title や date など計7つの項目を必須としており、設定が欠けている記事ファイルが存在すると、ビルド時に自動で失敗するように構成しています。
2. 動く部品の埋め込み（MDX と Astro コンポーネント）
動的なインタラクションを持つ部品は、HTML・スタイル・スクリプトを 1 つのファイルに集約できる Astro コンポーネント として実装しています。記事の記述には MDX 形式を採用し、本文の任意の場所に <コンポーネント名 /> のように直接埋め込んでいます。
Astro の優れた点は、コンポーネント内に書いたスクリプトを自動でバンドルし、その部品を使用した記事の HTML にだけ、必要な JavaScript を出力してくれるという点です。
例えば、「状態遷移の図(=動的なインタラクション)」がある「Lambda MicroVMs」の記事には専用の JavaScript が読み込まれますが、部品を使用していない「About」ページには 記事専用の JavaScript は読み込まれない(共通レイアウト分は読み込まれる)といったものです。
3. ページの自動生成と周辺機能（RSS・サイトマップ）
ブログとして必要な各ページやファイルも、Astro の標準機能や公式の仕組みを使って生成しています。
記事ごとの個別ページは getStaticPaths というルーティング機能を利用しています。記事データの一覧から自動で URL を決定し、共通のレイアウトに本文を流し込んでページを作成する仕組みです。
また、RSS とサイトマップについても Astro 公式の機能（@astrojs/rss・@astrojs/sitemap）を利用して出力しています。
この際、どちらも frontmatter の status という項目（1つ目の機能で定義したもの）を読み取り、公開・未公開の記事をより分け、本番環境に未公開の記事が表示されないように除外する処理を挟んでいます。RSS は 1つ目の機能（Content Collections）を通して status を読みますが、サイトマップは設定ファイルが記事の frontmatter を直接読んでいます。
4. 滑らかなページ遷移（View Transitions）
記事一覧から個別の記事ページへ移動する際の表示の切り替えには、View Transitions という機能を使っています（出典: Astro View Transitions、2026-09-15 確認）。
これにより、ページ遷移時にSPA（単一ページアプリケーション）のような滑らかなアニメーションを実現できます。ただし、動くのはあくまで「ページが切り替わる際の表示（フェードなど）」だけで、記事の本文そのものは動きません。読者が文章を読む邪魔にならないよう、シンプルな挙動に留めています。
まとめ
本ブログは、文章や静的な図解だけでは伝わりにくい技術のロジックを、直感的に体験してもらうために Astro を用いて「動かせるアプリケーション」として実装しました。
個人的に、こうした「動かせる部品」は記事を書くたびに積み上がっていく資産だと思っています。今後も気になった技術を学ぶ過程で、その仕組みを視覚的に理解できる部品を少しずつ足していくつもりです。
読んでいただいた方が、単なる読み物としてだけでなく、手元のブラウザで操作しながら一緒に理解を深められるようなブログが出来ればいいと考えています。