土岐優太 | エンジニア
こんにちは、株式会社Alphatiqueでエンジニアをしている土岐優太です。
今回は、ウェブサイトをリニューアルしましたの記事にもある通り、会社のウェブサイトをリニューアルしたので、その技術構成について紹介していきます。
静的サイトジェネレータ・フロントエンドフレームワークとして、Astroを使用しています。 他の候補としてNext.jsも挙げられますが、今回は静的な部分が大半を占めること、ゼロランタイムを達成できること、コンテンツコレクションの存在などから、Astroを採用しました。
Astroでは、すべてのページがデフォルトで静的なため、ビルド時にページをコンパイルし、静的なHTMLとしてホストすることができます。 実際に他のフレームワークと比較すると、Lighthouseのスコアが高くなる傾向にあります。
Astroが採用するアイランドアーキテクチャでは、静的なページにインタラクティブなコンテンツを独立した”アイランド”として埋め込むことができます。 また、アイランドの描画にはReact、Preact、SolidJS、Svelte、Vue.jsなどの主要なWebフレームワークを用いることができます。
コンテンツコレクションは、Markdownファイルなどで記述されるコンテンツをスキーマ定義によって管理し、型安全に扱うことができる機能です。 コレクションという単位でコンテンツを整理したり、エントリー同士を紐づけたりすることができます。
前述したアイランド部分のフレームワークとして、SolidJSを使用しています。 今回のケースでは、インタラクティブなコンテンツが問い合わせフォームのみだったため、Astroとの相性も考慮の上、SolidJSでも十分な機能を実装することができると判断しました。 使用するライブラリも、React 非依存のものや、SolidJSに移植されたライブラリを選定しました。
私は3年前までTailwindアンチでしたが、shadcn/uiの台頭やAIとの相性、JSXを中心としたエコシステムの変化やRSCとの相性の影響を受け、関わったプロダクトでは積極的にTailwind CSSを採用しています。
daisyUIはTailwindベースのUIライブラリで、shadcn/uiと異なり、Tailwind CSSのプラグインとして提供されます。shadcn/uiのカスタマイズ性は魅力ですが、セットアップの手間などから今回はdaisyUIを採用しました。
Tanstackが提供するReact 非依存のフォームライブラリで、型安全性や軽量性、ライブラリサポートの豊富をアピールしています。 今回はSolidJSの採用もあり、モダンなフォームライブラリの中ではほぼ唯一と言える選択肢でした。
今回はAstroやSolidJSの採用など、バンドルサイズなどUXへの影響を重要視しているため、バリデーションライブラリもZodではなくValibotを採用しました。
静的な部分はCloudflare WorkersのStatic Assetsを用いて配信し、動的な部分にはAstroのCloudflareアダプターを使用しています。 世界各地にコンテンツを分散するCDNによって高いUXを実現できるだけでなく、デプロイ時にキャッシュが自動でパージされるため、エンジニアがキャッシュ管理を考慮する必要がありません。
Cloudflareが提供するreCAPTCHAの代替サービスで、無料で利用できることや導入の簡単さから採用しました。 公開エンドポイントに対するボット攻撃を防ぐために、お問い合わせフォームに導入しました。
パッケージ管理にはpnpmを採用しています。 今回はmonorepo構成ではないものの、パフォーマンスやpatch機能などの恩恵を考えると、それ以外のパッケージマネージャを採用するメリットは薄く、いつも通りpnpmを使用しています。
当初はBiomeを採用していましたが、Astroのサポートを十分に受けることができなかったため、Prettierに回帰しました。
今回は静的なコンテンツが主であるため、UXやSEOを意識しバンドルサイズやパフォーマンスを特に重視して技術構成を組みました。 近年、静的・動的に関わらずNext.js/Reactを採用するケースが増えていますが、今回の開発を通して、AstroやSolidJSといったUXに特化した新しい技術にも焦点を当てていく重要性を再認識しました。