コーポレートサイトをAstroでリニューアルしました

西畑一馬

2023-07-20

本日コーポレートサイト(https://www.to-r.net/)のリニューアルを行いました。

今回コーポレートサイトのリニューアルに伴い内部のアーキテクチャをReactベースのフレームワークからAstroに変更しました。

トゥーアールでは2016年の創業時から同じデザインでしたが内部のアーキテクチャは数年に一度リニューアルしてきました。

2016年〜2017年 WordPressテンプレート
2017年〜2020年 React + WordPress REST API
2020年〜2022年 GatsbyJS + WordPress REST API
2022年〜2023年 Next.js + MicroCMS

これまでは得意とするReactベースのフレームワークを採用していましたが、今回はデザインもデザイン会社に発注してちゃんと作成するにあたり採用するフレームワークをAstroに変更しました。

なぜAstroを採用したのか

なんとなく流行っていたからと言うのが本音なのですが、弊社ではJamstack案件ではNext.jsを採用することが多かったのですが、大量コンテンツでSSGが必要な場合ではビルド時間が問題になるケースが少なくなくありました。

Next.jsが静的サイトジェネレータという側面よりインフラと密接に関わるアプリケーションフレームワークとして進化する方向性を大きく示したことによりSSGに適したフレームワークとしてのみ扱うのが難しくなってきたと感じています。

とはいえNext.jsがアプリケーションフレームワークとして進化しても、Jamstackが切り開いたSSGなどを利用して安価なストレージサービスに静的ファイル群をあげて配信するニーズは高くNext.jsに変わるSSGフレームワークが求めてられていることは感じていました。

そこで白羽の矢が上がったのがAstroです。

Next.jsに変わるフレームワークとして重要なのは開発体験です。

すでにTypeScriptやPrettierなどのFormatter、エディタによる開発支援を受けて開発してきた我々は、もう素のHTML / CSSでコーディングを行う環境には戻れません。

新しいフレームワークにはNext.jsなど変わらない開発体験が必要です。

Astroは多くの開発支援ツールに対応しておりNext.jsと変わらない開発体験を得ることができました。

コーポレートサイトやメディアサイトなどは基本的に取得したJSONをHTMLに色付けして出力するので複雑なロジックは求めらません。

ただ、お問い合わせフォームのバリデーションといった特定の処理だけ素のJavaScriptではなくReactを使いたくなるケースもあります。

Astroのアイランドアーキテクチャでは特定のコンポーネントのみReactを動作させることができるようになります。

リニューアルしたコーポレートサイトでもお問い合わせフォームのみReactで動作するようにして、バリデーションにZod + React Hook Formを採用しています。

AstroはSSGだけではなくSSRにも対応しています。そのため、CMSのプレビュー画面などリアルタイムで表示したい場合にも対応することができました。

Astroの採用は会社サイトのリニューアルがきっかけでしたが、実案件でもすでにいくつかAstroで作ったサイトの納品は終えています。

複雑なアプリケーションの場合はNext.js、静的なサイトの場合はAstroと役割分担ができ良さそうと感じておりますので興味がある方は触ってみてください。

2023-07-20

2002年よりWeb制作を行い、2016年2月に株式会社トゥーアールを設立。 JavaScriptやHTML5を利用したフロントエンドの受託開発やフロントエンドエンジニアの教育事業などを業務として行う。「Web制作の現場で使うjQueryデザイン入門」や「JavaScriptコーディングベストプラクティス」など多数の著書を執筆している。