水たまりは希望を写している

ウェブサイトを Astro で作り直した

「ウェブサイトを Astro で作り直した」のテキストと、そのウェブサイトのスクリーンショット。

このブログではなく、もうひとつのウェブサイト (https://aioilight.space/) を Astro で作り直した。

なぜ Astro なのか

元々は Nuxt.js というフレームワークで作られていたのだが、長い間手を付けていなかった。それ故 Wangel (このサイト) がメインになりつつあった。

勉強目的で「他のフレームワークで作り直してみたい」という気持ちがあり、第一候補に挙がったのは Next.js だった。しかしチャットで「最近は Astro が来ているらしい」と言われ、調べるほど Astro の魅力に惹かれていき実際に作り直すことになった。

良いと思ったところ

「静的 ファースト」な設計思想

例えば Next.js の画像コンポネートは画像最適化を自動的にやってくれて便利なのだが、SSG では使用できない。対して Astro では SSG でも使用できるようになっていて、アプリではないウェブサイトに最適である。

また、Astro では可能な限り JavaScript を事前にレンダリングしてファイルを書き出す。この方がパフォーマンスにおいて有利であるし、なんかすっきりしている気がする (主観) ので好き。

拡張性の高さ

Astro 内で React や Vue などのフレームワークを使うことが可能なので、Astro の機能で静的なページを作って、ウェブアプリ部分を React で作るみたいなことが可能。

Astro コンポーネントから呼び出したり Astro コンポーネントをフレームワークに渡したりといったようなことが可能。

Astro コンポーネントのやさしさ

拡張子が .astro の Astro コンポーネントは、構文がすごくシンプルなものなので学習難易度が低い。ぶっちゃけ「Next.js 分からん! 今まで HTML しかやってきてないよ~トホホ」みたいな人でも 1 時間あればある程度使えるようになると思う。

日本語公式ドキュメント

公式のドキュメントのほとんどに日本語訳がある。読みやすいし、他の人にも薦めやすい。

ダメだなと思ったところ

デフォルトの画像フォーマットを WebP から変えられない

どうせ WebP に対応していて AVIF に対応していないブラウザというのが珍しいんだから AVIF + フォールバックとしての PNG (JPEG) で良いじゃんと思う僕は、AVIF をデフォルトにしたい

<Image /> コンポーネントをラップしたコンポーネントを作るしかなかった。

Visual Studio Code の補完

なんかたまに変になる気がする。でもまあ、大枠ができたらあとは Markdown をゴリゴリ書いていくだけになるので、あんまり気にしなくて良いかも。

名前

名前を全否定してしまうことになるのだが、「Astro」というのが一般名詞すぎる。もちろんこのワードだけでは検索でトップに出てこない。

Astro が何を表しているのかを明確にするために技術ブログや質問サイトなどで「AstroJS」「Astro.js」などと表現されていると、「そんな名前じゃないんだけどなぁ…… (気持ちは分かるけど)」と思ってしまう。

文脈がハッキリとしていれば通じるのだが、そうでない場合や Astro を知らない人に伝えるときにセコい名前の表現を使わずに伝えるのがちょっと苦労する。サイトを作る上でなにか問題が起きるわけではないが……。

まとめ

サイトを作る上で「OGP 画像の半自動生成」や「Markdown の適切なセクショニングと見出しリスト」といったテクニックも使ったので、時間ができたらここで記事として公開したい。