ブログサイトをモダンで高速なAstroで制作したらとても快適だった
ブログサイトをモダンで高速なAstroで制作しました。Webサイトの開発環境が簡単に構築できて、ビルド後も高速に動作するのでおすすめのフレームワークです。
リメディアのブログサイトを制作する際に、Astroというフレームワークを採用しました。Webサイトの開発環境を簡単に構築できるので、とくにWeb制作を行っているデザイナーやエンジニアにはおすすめです！この記事ではそのAstroについて解説していきます。
Astroとは
Astroは静的なWebコンテンツを生成するための静的サイトジェネレーターです。2021年に登場し、2022年8月に正式リリースされましたが、それ以降も活発的に開発が続けられています。とくに最近では、Webサイトの制作者にとても人気のツールとして話題に上がることが多いです。
静的サイトジェネレーターについて
静的サイトジェネレーター (Static Site Generator = SSG) は、入力したデータファイルから静的ページ（HTML/CSS/JavaScript）を出力するツールで、Webサイトの表示パフォーマンスを高速化できます。
WordPressのようなCMSはサーバー上のデータベースを元にHTMLを生成して返すものですが、静的サイトジェネレーターは、事前に生成されたHTMLを配信することでサイトの表示を高速に出来るメリットがあります。
Astroを選んだ理由
Webサイト制作をメインにしていると、ReactやNext.jsなどのフレームワークを使うのは難しいと感じる制作者も多いと思います。実際にそれらはWebアプリケーション開発でよく使われており、静的なサイトの生成が必要なだけであれば、少々オーバースペックになってしまいます。
そこでAstroです！もちろんメリットもあればデメリットもありますが、それらを比較しても使ってみる価値は十分にあると思います。
Astroのメリット
- パフォーマンス重視でJavaScriptは最低限
- シンプルな記述でサイトを生成でき、デザイナー（非エンジニア）でも扱いやすい
- 公式ドキュメントサイトが日本語にも対応
Astroのデメリット
- コンポーネントを用いた開発手法が、他のJSフレームワークに触れてないとすこし分かりづらい
- 独自の
*.astroというファイルを使用する必要がある - 新しいフレームワークなので進化が早く、仕様が変わりやすい
Astroはページの生成時（ビルド時）になるべくJavaScriptを削除したうえで、HTMLとCSSを生成します。不要なJavaScriptを削除することによって、Webサイトの表示パフォーマンスを最適化できます。
実際に、このブログサイトはJavaScriptが無効な環境でも（一部無効になる機能はありますが）高速に動作します。そもそも、あまりJavaScriptを使用した機能が無いという前提ではあります。
いざ導入してみる
導入するための事前の懸念点などは、上記で検討したとおり大きな問題はなさそうでしたので、実際に進めてみます。まずは触ってみることが一番なので公式のチュートリアルから始めてみました。
このチュートリアルをすべて進めたうえで「これはいける！」と思いましたが、いくつか落とし穴がありました。
このチュートリアルでは最新のAstroのバージョンに対応していないようで、とくに今回使用することの多いMarkdownファイルでのコンテンツ管理の機能「コンテンツコレクション（Content Collections）」に非対応の内容となっていました。
Content CollectionsはAstro 2.0から導入されたコンテンツ管理のための機能ですが、チュートリアル対応後に知ったので、結果的にそれらに関する記述を書き換える必要がありました…。ただ、そこまで大変でもなかったのと、コンテンツ管理もより柔軟になったので結果的に対応してよかったです。
他にも色々と書き換える部分は多くありましたが、とても良くできてるチュートリアルなので、これから始めてみる方にはおすすめです。
制作時に困ったことなど
進めていく中でいくつか困ったことなどがあったのでご紹介します。基本的にググればある程度の解決はできましたので、Astroについての情報を発信している方にはとても感謝しています。
サブディレクトリにページをbuildしたい
このブログサイトではドメイン直下の/blog/ ディレクトリにページを生成したいので、以下のようにbaseを設定することで解決できました。同じようなことを考えている方は多いようで、Web上に情報が多かったので助かりました。
// astro.config.mjs
const subfolder = '/blog/'
export default defineConfig({
base: subfolder,
outDir: `./dist${subfolder}`,
});これで生成後のファイルがhttps://www.remedia.co.jp/blog/以下に配置されるようになります。
投稿データをJSON化したい
このブログサイト以外からも記事の投稿データを取得するようにしたいと考えていました。たとえば弊社のコーポレートサイトはブログサイトとは別で制作されているので、JSONなどでデータを取得してブログ投稿をサイトに表示できると便利そうです。
しかしAstroの標準機能ではそういった仕組みはないので、いったん.astro ファイルで投稿データをJSON化してページとして書き出す手法を採用しました。
// post.json.astro
---
import { getCollection } from "astro:content";
const allPosts = await getCollection("posts");
const json = JSON.stringify(
allPosts.map((post) => {
return {
title: post.data.title,
description: post.data.description,
slug: post.slug,
};
})
);
---
<!-- 上記で取得した「json」データをHTMLとして出力 -->
{json}これで返ってくるJSONの一部が以下のようなものになります。
// post.json
{
"title": "ブログサイトをモダンで高速なAstroで制作したらとても快適だった",
"description": "ブログサイトをモダンで高速なAstroで制作しました。Webサイトの開発環境が簡単に構築できて、ビルド後も高速に動作するのでおすすめのフレームワークです。",
"slug": "2023-04-astro-blog",
}注意点として、書き出されるデータはあくまでHTMLファイルなので、取得できたJSONデータはまた別の.json ファイルとして用意する必要があります。
正直面倒ではありますが、他にいい方法が見つからなかったのでこのようにしいています。もしかしたら他にいい方法があるかもしれないので、知っている人が入れば教えてほしいです…！
タグ名を日本語でなく英語にしたい
たとえば「マーケティング」というタグを用意したときに、/tag/マーケティング/ でなく/tag/marketing/といったように英数字でのURLにしたいと思いました。
もう少し細かく言えば「Webサイトに表示されるタグの文字」と「ブラウザのURLバーに表示される文字」を別のものとして管理したかったのです。なかなかいい方法が見つからない中、目にとまったのが以下の電子書籍です。
こちらで紹介されている方法では、タグの設定を外部ファイル化して、タグの名前とID名（スラッグ）を別で管理するようになっていました。
export const tagsData = [
{ tagName: "HTML", tagSlug: "html" },
{ tagName: "マーケティング", tagSlug: "marketing" },
];この方法であれば、サイト上に表示されるタグ名は「マーケティング」であっても、ブラウザのURLバーに表示される文字は「marketing」となるので、スッキリしました。
公開後のあれこれ
パフォーマンス測定
PageSpeed Insightsで測定すると、デスクトップ版で以下のスコアになりました。
| パフォーマンス | ユーザー補助 | おすすめの方法 | SEO |
|---|---|---|---|
| 93 | 100 | 100 | 100 |
もう少しで満点！でしたが、パフォーマンスがわずかに届かず。以下がスコアを下げる要因でしたが、こちらは簡単に外せないので許容範囲とします。
- サードパーティのJavaScriptファイル（計測用のタグなど）
- Webフォントの読み込み
Webフォントの読み込みについては改善が可能か、引き続き検討していこうと思います。
Astro 4.0のリリース！
12月5日にAstro 4.0がリリースされました。Astro 3.0からアップグレードして、とくに問題なかったのでそのまま更新してみました。まだ新機能をすべて確認できていませんが、ビルドは明らかに早くなってます！
あと、Devツールバーが便利そうですね。アクセシビリティチェックなどの検査ツールが開発画面上に出てくるので、使いこなしていきたいです。
はやすぎて色々追いつくのが大変ですが、今後も新機能の紹介などをしていきます。
さいごに
このサイトの技術的な背景をまとめてみましたが、いくつかご紹介できなかったものもあります。
- ダークモード対応
- TailwindCSSの導入
- Gitと連携したデプロイの自動化
ただ、これらはAstroに関連しないものも多いので、また別の機会にご紹介しようと思います。
Astroでのサイト構築を中心に色々とご紹介してきましたが、このブログサイトは技術的な実験の場としても活用します。そのうえで、共有できることがあれば積極的に記事にしていきたいと思っています！