0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Sakaaaaai

Astroで作る爆速ブログサイト｜Web制作の基本から学ぶモダンな静的サイト構築入門

0
Posted at

はじめに：あなたのブログ、表示速度で悩んでいませんか？

「WordPressで作ったブログの表示が遅い…」
「Next.jsやNuxtは高機能だけど、個人ブログには少しオーバースペックかも」
「HTML/CSSの基本を学びたいけど、せっかくなら今風の技術に触れてみたい」

こうした悩みを抱えている方に、いま最も注目してほしいのが Astro（アストロ） です。

Astroは2022年に正式リリースされて以降、ドキュメントサイトやブログ、コーポレートサイトなどコンテンツ中心のWebサイトで爆発的に採用が広がっているモダンなフレームワークです。最大の特徴は 「JavaScriptをほぼゼロで出荷する」 という設計思想。結果として、Lighthouseスコアで満点近くを叩き出すサイトが当たり前に作れます。

この記事では、Astroの基本概念から、実際にブログサイトを構築する手順、そしてWeb制作で押さえておきたい基本知識まで、初心者の方にもわかるように丁寧に解説していきます。読み終わる頃には、あなたも「自分でAstroブログを作ってみよう」と思えるはずです。

そもそもAstroとは？なぜ選ばれているのか

Astroの基本コンセプト

Astroは 「コンテンツ重視のWebサイトのために設計された、オールインワンWebフレームワーク」 です。ReactやVueといった既存のUIライブラリを組み合わせて使うこともできますが、デフォルトではHTMLファーストで動作します。

一番のポイントは 「Islands Architecture（アイランズアーキテクチャ）」 と呼ばれる仕組みです。

Islands Architectureとは

従来のSPA（Single Page Application）では、ページ全体をJavaScriptで動的にレンダリングしていました。しかし、ブログのような「一度読み込んだら大きく変わらないコンテンツ」に、そこまでの動的な仕組みは本当に必要でしょうか？

Astroは以下のように考えます：

  • 静的な部分：普通のHTMLとして配信（JavaScript不要）
  • 動的な部分（=島）：必要な箇所だけJavaScriptを注入

この結果、送出されるJavaScriptの量が劇的に減り、ページ表示速度が飛躍的に向上します。

Astroが向いている用途

  • ブログ・ポートフォリオサイト
  • ドキュメントサイト
  • コーポレートサイト・LP（ランディングページ）
  • Eコマース（商品一覧など静的な部分が多いもの）

逆に、複雑なダッシュボードやリアルタイム性の高いアプリには、Next.jsやRemixの方が向いています。

Astroでブログを作ってみよう：実践ハンズオン

それでは実際に手を動かしていきましょう。Node.js（v18以降推奨）がインストールされていれば、すぐに始められます。

1. プロジェクトの作成

ターミナルで以下のコマンドを実行します。

npm create astro@latest my-blog

対話形式で構成を聞かれるので、以下のように選ぶのがおすすめです。

  • テンプレート：Empty（またはBlogテンプレート）
  • TypeScript：Yes（Strict）
  • 依存関係のインストール：Yes

作成が完了したら、開発サーバーを起動しましょう。

cd my-blog
npm run dev

http://localhost:4321 にアクセスすると、Astroのトップページが表示されます。

2. ディレクトリ構造を理解する

Astroの標準的なディレクトリ構造は以下の通りです。

my-blog/
├── src/
│   ├── components/    # 再利用可能なコンポーネント
│   ├── layouts/       # ページ全体のテンプレート
│   ├── pages/         # ルーティング対象のファイル
│   └── content/       # ブログ記事などのコンテンツ
├── public/            # 静的ファイル（画像など）
└── astro.config.mjs   # Astroの設定ファイル

src/pages/ に置いたファイルが、そのままURLになります。たとえば src/pages/about.astro は /about としてアクセスできます。ファイルベースルーティング と呼ばれる、直感的でわかりやすい仕組みです。

3. Astroコンポーネントを書いてみる

Astroの .astro ファイルは、HTMLをベースにした独自の構文を持っています。以下は簡単な例です。

---
// フロントマター部分（JavaScript/TypeScriptが書ける）
const title = "私のブログへようこそ";
const posts = [
  { id: 1, title: "Astroを始めた話" },
  { id: 2, title: "Web制作の基本を学ぶ" },
];
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <ul>
      {posts.map((post) => (
        <li><a href={`/posts/${post.id}`}>{post.title}</a></li>
      ))}
    </ul>
  </body>
</html>

HTMLに慣れている方なら、フロントマター（--- で囲まれた部分）でJavaScriptが書ける以外は、ほぼ普通のHTMLとして読めるはずです。この学習コストの低さもAstroの魅力です。

4. Content Collectionsで記事を管理する

Astroには Content Collections という強力な機能があり、Markdownファイルを型安全に扱えます。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

これで src/content/blog/ に置いたMarkdownファイルが、型チェック付きで安全に扱えるようになります。記事の追加は、Markdownファイルを配置するだけでOKです。

Web制作で押さえておきたい基本

Astroを使うにあたって、あるいはWeb制作全般で必要になる基礎知識を整理しておきましょう。

HTMLはセマンティックに書く

<div> ばかり使うのではなく、<header>、<main>、<article>、<nav> などの セマンティックタグ を適切に使いましょう。SEOにもアクセシビリティにも直結します。

CSSは設計思想を持って書く

小規模サイトなら普通のCSSでも十分ですが、以下のような選択肢があります。

  • Scoped CSS：Astroの .astro ファイル内の <style> は自動でスコープ化される
  • Tailwind CSS：ユーティリティファーストなCSSフレームワーク
  • CSS Modules：クラス名の衝突を防ぐ

レスポンシブデザインの基本

モバイルファーストで考えるのが現代の主流です。

/* モバイル（デフォルト） */
.container {
  padding: 1rem;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

パフォーマンス最適化

Astroの画像最適化コンポーネントを使えば、簡単に最適化された画像を配信できます。

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

<Image src={myImage} alt="ヒーロー画像" width={800} />

自動でWebP変換や遅延読み込みが行われます。

まとめ：Astroで得られるもの

ここまでの内容をおさらいしましょう。

  • Astroは高速な静的サイト構築に特化した モダンフレームワーク
  • Islands Architecture により、必要最小限のJavaScriptで爆速サイトが実現できる
  • ファイルベースルーティング と Content Collections で、直感的にブログが作れる
  • HTML/CSSの基礎 をしっかり押さえることが、結局は近道になる
  • 画像最適化やScoped CSS など、モダンな機能が標準搭載されている

ブログやポートフォリオなど、コンテンツ中心のサイトを作るなら、Astroは間違いなく2026年現在で最有力の選択肢のひとつです。

さらに体系的に学びたい方へ

この記事ではAstroの基本と、Web制作で押さえておきたいポイントを紹介しましたが、実際に「自分の手で完成度の高いブログを作り上げる」までには、もう少し踏み込んだ知識と実践が必要になります。

  • HTML/CSSをちゃんと基礎から積み上げたい
  • 記事を書きながら、実際に動くブログを完成させたい
  • コマンド操作やデプロイまで、一連の流れを通しで体験したい

もしこうした学び方に興味がある方は、参考になる講座を1つ紹介しておきます。

📘 【初心者向け】AstroでブログサイトをゼロからつくるHTML/CSS入門

タイトルの通り、HTML/CSSの基本から始めてAstroでブログサイトを完成させるところまで、順を追って学べる構成になっています。「まずは動くものを作りながら覚えたい」というスタイルが合う方には、独学の副読本としてちょうど良い温度感かなと思います。書籍や公式ドキュメントと合わせて活用すると、より理解が深まるはずです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?