ProForma のブランドページを Astro で作成しました

この記事はjig.jp Advent Calendar 2023の12月25日(月)の記事です 🎅

---

こんにちは。
jig.jp Advent Calendar 2023 の 12月25日(月) を担当するWeb開発担当のFです。よろしくお願いします。

ProFormaとは

ProForma とは jig.jp が運営する、VTuberのプロデュース、サポート並びにマネジメントを行う事務所です。今回はこの VTuber 事務所のブランドページを作成することになりました。

今回使った主な技術

• Astro

• TypeScript

• CSS

• Swiper

Astroを採用した理由

今回ブランドページを作成するのに Astro を採用しました。採用した理由は2つあります。

ページを高速に表示したい

ブランドページなのでページを高速に表示したいという話がありました。
そこで、フロントでUIを組み立てるCSRではなく、事前にHTMLファイルを用意しておくSSGができるフレームワークがよいと考えました。

様々なフレームワークのコンポーネントが動く

今後別のフレームワークに置き換えたいとなっても、一旦Astro上でAstroコンポーネントを別のコンポーネントに書き換えて動かすことができます。
このことからフロントエンドの流行に沿って継続的に開発できると考えました。
また、特定のフレームワークのコンポーネント依存パッケージがあった場合でも柔軟にコンポーネントを変えて対応できると考えました。

Astroの良かったこと

ビュートランジション

ビュートランジション API は、異なる要素間のアニメーションを手軽に実装できる仕組みです。

リッチな動きを付けることができるだけでなく、ページ移動の際の体感時間の軽減にもつながります。

AstroではViewTransitionsというコンポーネントが提供されており、これを適用したいページにimportして、いくつかディレクティブを設定するだけで実装できます。

<ViewTransitions fallback="swap" />

<Image
  transition:name={talent.path}
  transition:animate="initial"
  ...
/>

まだ Chromium 系のブラウザでのみしかサポートされていない API ですが、今後対応が広がっていくと良いなと思います。

また Astro では非対応ブラウザ用にビュートランジションの動きを再現してくれるフォールバック機能があります。

動的ルーティング (SSG)

動的ルーティングの静的（SSG）モードを使うと、ファイル名にマッチするページを生成することができます。この機能をニュースページとタレントページで使用しています。結果として、レイアウトだけを製作し、各ページを作らなくてもよくなります。
この機能はAstroのgetStaticPathsとpaginateで実現できます。

export async function getStaticPaths() {
  const contents = await getContents<Contents>("contents");

  return contents.map((content) => ({
    params: { slug: contents.path },
    props: content,
  }));
}

getStaticPathsで配列を返すだけでその分のページを作成してくれます。

頑張ったこと

CSS

AstroではCSSの扱いがReactとは違い、コンポーネントにimportしたcssがページ全体に適用されます。開発当初はこの仕様にハマりました。なので、私たちは極力コンポーネントの中にスタイルを書くようにしました。
ニュースページはAPIから帰ってきたhtmlを埋め込んでいます。ここのコンポーネントはcssをimportしてAPIから帰ってきたhtmlにスタイルを当てています。

Swiper

トップページのHero画像のカルーセルなどはSwiperのWebComponentを使用して実装しています。Swiperを使用することで、簡単にカルーセルが実装できます。
カルーセル下のページネーションボタンやニュース一覧のナビゲーションボタンはSwiperの機能を使って実装しています。

さいごに

Astroを採用して良かったと感じています。書きやすさもReactと似たような書き方で、今回初めて触ったのですが、難なく書き始めることができました。

静的なページを高速に表示できるサイトを作りたい方はどうでしょうか？