Zenn
✨

【Astro】チュートリアルやってみた

に公開
frontend
静的サイト
web開発
Astro
tech

🔰 はじめに

最近注目されているモダンなフロントエンドフレームワーク「Astro」を使って、
公式チュートリアルである「初めてのAstroブログ」実践してみました。

この記事では、Astroのチュートリアルを一通りやってみた所感や、つまずいたポイント・学びなどを初心者向けにまとめます。

🚧 チュートリアル実行時の環境

前提環境

  • Node.js: v22.15.0
  • pnpm: v10.10.0
# プロジェクト作成
pnpm create astro@latest

💬 所感

Astroのチュートリアルは非常にわかりやすく、構成も丁寧です。
セクションごとにチェックリスト形式のクイズもあり、理解を確認しながら進められるのが良かったです。

分量もそこまで多くなく、私は約3時間ほどで完了しました。

😅 つまずいたポイント

文字化け

① Markdown記事が文字化けする
Markdownファイルを BaseLayout.astro 経由で表示する際、日本語が文字化けする現象に遭遇しました。
原因は <meta charset="utf-8" /> の記述が抜けていたためでした。

以下のように <head> 内に追加することで解消できます。

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const { pageTitle } = Astro.props;
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

チュートリアルの一部の内容が分かりづらい

全体的には理解しやすいチュートリアルですが、以下の点で少し苦戦しました。
翻訳がやや不自然な箇所があり「Islands Architecture」などの概念が分かりにくいです。
特に「Islands Architecture」は、チュートリアルだけでは十分に理解できなかったため、
公式ドキュメントを別途読みました。
加えて、他の方のブログ記事なども参考にすることでようやく全体像がつかめました。

余談

チュートリアル中に進捗やページ内容が表示される右側のパネルに気づかず、最初「チュートリアルが表示されない？」と困惑してました（笑）
左側のサイドバーばかり見てたのが原因でした。

🛠 Astroで個人サイト作成中です

Astroを学んだ一番の理由は、個人サイトを作りたいと思ったからです。
現在は以下のような構成で制作を進めています：

  • Astro + Tailwind CSS
  • Zennと連携したブログ運用
  • Cloudflare Pagesでのホスティング

構成の詳細や工夫した点については、別記事としてまとめる予定です。

📝 まとめ

Astroは HTMLファーストな設計で、初心者でも理解しやすく、かつ高い柔軟性があります。
静的サイトを手早く構築したい方や、個人ブログ・ポートフォリオを作りたい方にとって、非常に魅力的なフレームワークだと感じました。

今後も実際に運用しながら、得られた知見を記事として発信していこうと思います。
最後まで読んでいただき、ありがとうございました！

Discussion