Astroでこのブログを含め、4つほどまとめてリニューアルしてみました。
表示速度の改善などリニューアルとしては中途半端な部分もあり課題も残っているのですが、一旦Astroの感想や難しかったところを備忘録としてまとめていきます。
Astroを選んだ理由
Astroをフレームワークとして選んだ理由は、二つありました。
「静的HTMLを書き出すための専用フレームワーク」としての機能と、「ReactやVueのコードが利用可能」という特徴です。
ここ数年のフロントエンドの世界ではReactやVueのフレームワークが主流となっていましたが、私自身はその選択に疑問を感じている部分もありました。
Webアプリケーションの開発にはこれらのフレームワークが適していますが、それ以外のケースではオーバースペックであり、またJavaScriptが重いという課題もありました。
そういった中でNo JavaScriptがコンセプトのAstroに注目したわけですが、どんな言語のフレームワークでも新しいものは古いフレームワークの不満点を解消するためにつくられるもので、AstroもNext.jsなどの一部の課題を解決するフレームワークになります。
今後はNext.jsを十分活用できるプロジェクトでは引き続き使われ、そうでないサイトはAstroみたいなもの選ばれていくようになると思います。
フロントエンド界隈ではReactやVueがメジャーですが、実際Webの仕事はコーポレートサイトやブログなど動的に構築する必要のないサイトが大半で、そんな仕事をしているWeb制作会社などはGulpなどでオリジナルの開発環境を使っていたりするので、AstroのようなWeb制作にも使いやすいシンプルな開発環境が出てくれるのは良いことだと思っています。
Astroブログの設計
このブログは以下で作成しています。
あくまで個人のブログなので、コスパの良さという点で選んでいます。
- サーバー：エックスサーバー
- リポジトリ&デプロイ自動化：GitHub
- CMS：WordPress
- フロントエンド：Astro
このリニューアルにあたり一つ重要なミッションがありまして、私が持っている4つのブログ全てで共通の仕組みで導入したいというのを考えていました。
「共通のフロントエンドシステム」と「フロントと切り離したWordPress（ヘッドレスCMS）」です。
そのためフロントエンドのCSSはTailwindではなく、SCSSからCSSファイルを生成して配置しています。
HTML構造は全てのサイト共通ではないので、HTMLに依存するTailwindだと今回は難しいかなと。
サーバー：エックスサーバー
サーバーはブログ初めてからずっと使っているエックスサーバーを引き続き使っています。
とにかく安くて安定しているので、個人のブログであればコスパがいいです。
ただ、WordPressの表示速度の遅さなど気になるところがあるので、表示速度の最速を目指してはいませんが、Astroの静的HTML化でそのあたりをカバーできればと考えています。
リポジトリ&デプロイ：GitHub
GitHubに、プライベートリポジトリを作成しています。
「GitHub Actions」にjobを登録してあり、メインブランチでプッシュした時と、WordPressでの投稿公開・保存・削除をしたタイミングで、デプロイしてファイルが公開されます。
CMS：WordPress
CMSはカスタマイズしやすいWordPressを引き続き使用しています。
あと、今回は静的化により記事の表示速度アップを目指していますが、「プレビュー機能」「お問い合わせフォーム」などはWordPressの機能を一部で引き続き使っています。
そもそも別ブログでは、PR商品レビューなど企業様からの案件もあり、公開前に記事の確認のやりとりが必要となります。
WordPressには投稿のパスワード保護があるため、それを引き続き利用したいという事もあり、基本は静的化させてますが一部はPHPで動かしているページや仕組みもあるという感じです。
であれば、プレビュー機能機能もWordPress機能をそのまま使えば良いかなという妥協をしています。
お問い合わせフォームはContact Form 7を使っているのですが、ヘッダー・フッターなどページの共通部分はHTMLにして、コンテンツ中はPHPを呼び出している状態です。
/contact/index.html（Astroで生成）
↓SSI（コンテンツ中だけ）
~/wpテーマ/template/contact.php（フォーム記述、必要JSなどが記載）
Contact Form 7はREST APIでもフォーム送信など対応しているみたいなのですが、予定工数に迫ってきていたのでここも妥協しました。
Astroを使ってみた感想
ほぼReactのコードっぽい感じでかけるので、そもそも難しい事はやらないので実装面で困ることはありませんでした。
ただ、静的書き出しフレームワークなのに出来ないことがちょろちょろあって、そっちの方が気になりましたね。
今回は仕様なんて無いサイトですが、それでも、
- DOCTYPEの記述が全てに自動で入る（DOCTYPEが無いHTMLファイルは作れない）
- ファイル名がindex.html固定（/hoge.astro → /hoge/index.html になる /hoge.html は無理）
- SASSを外部ファイルにできない（SASSファイルはbuildした時に自動でCSSファイルに置き換えてほしい）
みたいな事がありました。
今回ではSASSの件だけ、package.jsonでbuild時に無理やりスクリプト動かして解決しています。
Astroで生成するとDOCTYPEが入るとかも、実際の企業サイトをAstroで作るには問題になってきそうで、サイト共通のheader.htmlやfooter.htmlみたいなものを作ることはできなそうですね。
企業サイトでは、LPやキャンペーンページだけ外部委託でフレームワーク外で制作みたいな事はあるので、その時に共通部分を柔軟に書き出し出来ないと不便そうです。
このあたりはアップデートや、世の中で使われていけばカスタマイズの方法などは出てきそうではあります。
最後に
そんなわけで、今回はAstroを使ってみたのですが、使い方としてはReactでもVueあまり変わらないですが、静的書き出しなので機能は減っているという感じです。
ただ、ヘッドレスCMSとかであればフレームワークの選択肢としてはアリだと思います。
Astroは1.0リリースが2022年8月でまだ一年たってないフレームワークとしては十分つかえるものだと思いました。
今後のアップデートにも期待です！
