Astroのチュートリアルが出たのでやってみた
こんにちは。Webフレームワーク Astro のチュートリアルが最近出たので、今回はその紹介をします。ブログやポートフォリオのサイトを作ってみたいけど、どのフレームワークを使おうか決めかねている方の参考になれば幸いです。
Astro について
Astro （アストロ）の公式サイトはこちらです。
Astro を一言で表すとなんでしょうか？「Astroを選ぶ理由」のページでは「Astro はコンテンツにフォーカスした高速なウェブサイトを構築するためのオールインワンなWebフレームワーク」と表現されています。
この中でも「コンテンツにフォーカスした」というところが Astro の最大の特徴だと思います。これは Astro の基本設計原則の1番目「コンテンツ重視」に詳しく書いてあります。
Astroはコンテンツにフォーカスしているため、アプリケーションにフォーカスしたWebフレームワークでは実装する意味がないようなトレードオフを行い、比類ないパフォーマンス機能を提供できるのです。
つまり複雑な操作ができるようなウェブサービスより、ブログなどに向いているということですね。自己紹介用のサイト、ポートフォリオにも向いているので、これから作ろうという方はぜひチャレンジしてみるといいと思います。Astro を学ぶには、これから紹介するチュートリアルがオススメです。
Astro のチュートリアル
Astro は今年（2022年）の8月にバージョン 1.0 が出たばかりの、比較的新しいフレームワークです。ですがチュートリアルはつい最近出たばかりで、11月4日の公式ブログの記事でそのことが報告されていました。次のリンクからチュートリアルを開くことができます。まだ和訳されていませんが、ブラウザの翻訳機能を使うなどすれば、十分理解できると思います。
このチュートリアルは、ブログを作ってみようというもので、6つの Unit（単元）でできています。その流れで Astro の様々な機能を試すことができます。実際にやってみたところ、所要時間は1時間から3時間程度が目安かなという感じがしました。作成するサイト内にも「3日で終わらせるのが目標」と書いてあり、これは1日1時間弱で3日かけるのをイメージしているんじゃないかと思います。もちろん、じっくり深堀りしながら進めれば、もっと時間や日数がかかると思います。
Unit 1 - Setup
npm create astro@latest で空のプロジェクトを作り、index.astro を書いて簡単なページを表示する話です。Node.js や VSCode のインストールから説明していて、とても親切だと思います。GitHub にソースコードをプッシュしたり、Netlify で公開したりという手順が出てきますが、これはスキップしても問題なく進めることができました。
Unit 2 - Pages
Next.js などを使ったことがある方なら馴染みがあると思いますが、Astro では pages というディレクトリの下にページを作っていきます。この Unit では pages 以下に Astro のテンプレートでページを追加したり、Markdown でページを追加したりしていきます。Markdown での記事は次のような形で書けるので、慣れていればサクサク書けますね。CSS でのスタイリングについてもこの Unit で説明しています。
---
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
url: 'https://astro.build/assets/blog/astro-1-release-update/cover.jpeg'
alt: 'The Astro logo with the word One.'
tags: ["astro", "blogging", "learning in public"]
---
# My First Blog Post
Published on: 2022-07-01
（以下略）Unit 3 - Component
共通部分を Navigator.astro、Header.astro、Footer.astro など、どんどんコンポーネントに切り出してリファクタリングしていきます。気になってたコードの重複がどんどん整理されていって、個人的には進めていて楽しかったです。Try it yourself という形で、自分で考えてリファクタするパートがあるのも楽しいです。
Unit 4 - Layouts
先程のコンポーネントでのリファクタとは違った方向のリファクタです。ページ全体のレイアウトの共通部分を src/layouts/BaseLayout.astro にまとめていきます。こういったまとめ方は、他のフレームワークでも見かける部分だと思います。
Unit 5 - Astro API
これまで記事一覧ページに手書きで 1 つずつ書いていた Markdown の記事へのリンクを、Astro.glob('../pages/posts/*.md') でゴソッと取ってきて一覧として出す形に書き換えます。このあたりが Astro API というものです。glob で Markdown を取り出すと、先頭に書かれた Frontmatter までいい感じに読み込んでくれます。これによって、少ないコード量でやりたいことをサクッと実現できます。また、 @astrojs/rss パッケージを使った RSS フィードの出力まで作り込んでいます。
Unit 6 - Astro Islands
最後の最後に Astro の肝心な部分、Astro アイランドの説明です 🏝 ページ内に、JavaScript を使った動的な要素を作ります。ここでは、あいさつをランダムに切り替えるボタンを Preact で作っています。Astro では、なにもしないとこのボタンが動作しないのですが、client:load を指定してアイランドにすると動作しますよ、という話です。
動的なサイトを作ることが多い方にとっては「そこらじゅうに client:type を書かないといけなさそうだなー」という印象かもしれませんが、最初に紹介した基本設計原則の「コンテンツ重視」を思い出してください。Astro が狙っているのは動的な要素があまりないサイトの高速化です。そのために client:load はあくまでオプションなのです。このあたりの詳細はAstroアイランドについての公式記事などを参照してください。
まとめ
Astro のチュートリアルを一通りやってみることで、ブログやポートフォリオといったサイトが簡単に作れそうなことを体感できました。そして高速に動作しそうなことも分かりました。これからこういったサイトを作ってみようという方は、ぜひ一度試してみるといいと思います。
最後に、このチュートリアルで作ったサイトのスクリーンショットです。チュートリアルを最後までやれば I finished this tutorial! の文が出てきます。ぜひ完走してみてください！
jig.jpの採用noteはこちら👇
この記事が気に入ったらサポートをしてみませんか？