Rowicy Webサイトの技術スタックについて

前提

• ドメインは取得済み
• 筆者にデザインの知見がない
• 複数人で運用する
• 現在サービスを開発中で、このサービスのリリースに合わせて公開環境を切り替える可能性がある

希望

前提に加え、できれば下記の希望も叶えられれば良いなと思っておりました。

• メンバーが発信できる状態にしたい
• なるはやで公開したい

技術スタック

先述の前提、希望をもとに、下記の技術スタックに決まりました。

開発環境	pnpm, Node.js, prettier, GitHub, GitHub Actions
ホスティングサービス	Netlify
フレームワーク	Astro
主要言語	Sass, TypeScript
JavaScriptライブラリ	React
UIライブラリ	shadcn/ui
CSSフレームワーク	Tailwind CSS

選定理由

項目ごとに選定理由を掻い摘んで記載します。

開発環境

pnpm, Node.js, prettier, GitHub, GitHub Actions

これはいつものなので割愛します。

ホスティングサービス

Netlify

先述の通り、開発中のサービス公開に合わせて環境を移行する可能性があるのと、なるべく早く公開したかったため、環境構築を委任できるホスティングサービスを使うことにしました。
その中でも、一番直近で触る機会があり、記憶に新しいNetlifyを採用。

フレームワーク

Astro

選定理由

• パフォーマンスが高い
  • 本サイトでは、外部からのデータ取得などはせず、完全静的の想定だったので、パフォーマンスを求めたいという意図があり、ここに重きを置いているAstroが候補にあがった
• 設定が簡単
  • こちらは個人的な印象でしかないですが、以前触った際に他のフレームワークと比べて外部モジュールの追加などの設定が少なく済み、楽に感じたため
• メンバーへのレクチャーのしやすさ
  • 現メンバーにWebフロントエンドが筆者のみのため、運用するにあたりレクチャーする必要がある
  • ドキュメントが充実している、記述がシンプルなので、レクチャーがしやすそうという理由で採用

主要言語

Sass

Tailwind CSSでスタイリングをしているためほとんど使いませんが、コンテンツコレクション（マークダウン）など、一部htmlタグへ自由にclass追加ができない箇所でのみ使用しています。

TypeScript

いつもの。 型を書きたいので採用。

JavaScriptライブラリ

React

shadcn/uiを利用するため、合わせて導入。
基本的には.astroで作成していますが、shadcn/uiのコンポーネントと、自前実装の動的コンポーネントはReactで作成しています。

UIライブラリ

shadcn/ui

筆者がデザインの知見がない+なるはやで公開したかったため導入。 他のライブラリもいくつか候補がありましたが、

• 必要なコンポーネントのみ選択して導入できる
• カスタマイズがしやすいので、公開後にブラッシュアップがしやすそう
• シンプルに見た目が好み

上記の理由で採用しました。

この洗練された見た目が好みのため、気になるところを多少調整する程度で、大部分そのまま使っています。
(時間があるときにカスタマイズしていきたい。)

CSSフレームワーク

Tailwind CSS

こちらもshadcn/uiを利用するため、合わせて導入。
(仮にshadcn/uiを採用していなかったとしても入れていたと思います。)
また、前述のとおりメンバーがWebフロントエンドが筆者のみなので、メンバーへのレクチャーが必要ですが、それにあたり、

• 素のスタイリングで考慮必須な、セレクタ詳細度の考慮が不要
• スニペットが沢山転がっているので調べながらでなんとかなりそう

今後これらのメリットが効いてきそうなので、基本はTailwind CSSでスタイリングする方針にしています。

今後改善していきたいこと

ページ・コンテンツの不足

公開を急ぐあまり作り込みができず、全体的に不足している感が否めないので、この点は少しづつブラッシュアップしていきたいと思います。

ブログの投稿周りの改善（必要であれば）

今後メンバーにも執筆してもらう中で投稿のしにくさがあれば、ヘッドレスCMSの導入など、何か手を打っていきたいなと思います。

テストの導入

テストについても、現状マージ前にCIでastro checkによる記述チェックのみしています。 静的サイトとはいえ、もう少し検証は挟みたいので、何かしら導入しようと思います。 特にアクセシビリティ周りの確認は自動化したい。。

まとめ

shadcn/uiとホスティングサービスを採用したことにより、修正を加えたいときはclassを書き換えるのみ、 要素を追加したいと思い立ったときには使えそうなコンポーネントを探し、少し調整を加えてすぐに反映できるので、 公開までのスピード感を求めることができるのがとても良いなと感じています。
また、改めてAstroの書きやすさを実感しました。
今後、静的サイトを作成する場合は有力候補になりそうです。

最後までお読みいただきありがとうございました！