テスト：Astroで始めるモダンフロントエンド構築

公開日:

タグ:

  • #TypeScript
  • #Astro

はじめに

近年のフロントエンド開発では、パフォーマンスや保守性、そしてユーザー体験がますます重視されるようになってきました。

その流れの中で注目されているフレームワークのひとつが Astro です。

この記事では、Astroの思想や特徴を整理しつつ、実際の構築時に押さえておきたい技術的なポイントを解説します。

Astroとは何か

Astroは「コンテンツ中心」のWebサイト構築を得意とするフレームワークです。

最大の特徴は、デフォルトでJavaScriptをほとんど出力しない という設計思想にあります。

Astroの主な特徴

  • デフォルトは静的HTML生成（SSG）
  • 必要な部分だけJavaScriptを配信する「アイランドアーキテクチャ」
  • React / Vue / Svelte など複数フレームワークの共存が可能
  • 学習コストが比較的低い

これらの特徴により、Astroはドキュメントサイトやブログ、デザインシステムの構築と相性が良いと言えます。

アイランドアーキテクチャの考え方

Astroを理解する上で欠かせないのが アイランドアーキテクチャ です。

ページ全体をJavaScriptで動かすのではなく、

- 静的でよい部分 → HTMLとして配信

- 動的な部分だけ → 必要なJSを読み込む

という考え方を採用しています。

---
import Layout from "../../../layouts/Layout.astro";
import { getNotes, getNotesDetail } from "../../../libs/microcms";

export async function getStaticPaths() {
  const response = await getNotes({ fields: ["id"] });
  return response.contents.map((note) => ({
    params: { id: note.id },
  }));
}

const { id } = Astro.params as { id: string };
const notes = await getNotesDetail(id, {
  fields: ["id", "title", "publishedAt", "content", "icon"],
});
---

<Layout>
  <div>
    <h1>
      {notes.title}
    </h1>
    <time datetime={notes.publishedAt}>
      {
        notes.publishedAt &&
          new Date(notes.publishedAt).toLocaleDateString("ja-JP", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
          })
      }
    </time>
    <div set:html={notes.content} />
  </div>
</Layout>
一覧へ戻る