INFCONティザーページ開発記（ハッカソン風）

InflearnのカンファレンスであるINFCON 2022が、8月26日にCOEXグランドボールルームで開催されます！ 🎊 ティザーページを見に行く →

こんにちは。フロントエンド開発パートのRIONとRokです。 🙂 今年の8月、Inflab初のカンファレンスを開催することになりました。
そこで、登壇者の募集と開催のお知らせのためのティザーページを開発した経験について共有したいと思います。

技術スタック

プロモーションが主な目的のサイトなので、SEOに有利な技術スタックが必要でした。一般的に、Reactで作られたSPAサイトはレンダリングがCSRで行われるため、SEOに不利です。ReactでSEOに有利なサイトを作る方法はいくつかありますが、私たちはその中からサーバーサイドレンダリングを実現できるnext.jsを選びました。next.jsはすでにRallitのB2Cサイトの開発で使った経験があり、Gatsbyのように静的ページの生成に役立つstatic HTML export機能を提供していたからです。

では、なぜnext.jsをそのまま使わずに静的ページとしてデプロイするのですか？

INFCONのプロモーション用ティザーページには動的なURLを持つページが存在せず、機能要件にもSSRが必要な部分はありませんでした。また、静的ページとしてデプロイすれば、クラウド環境でサーバーを管理する必要がないため、フロントエンドエンジニアだけでも管理しやすくなります。

Cloudflare Pagesでデプロイした理由

Cloudflare Pages、Netlify、Vercelなど、静的Webページを無料でデプロイできるプラットフォームはさまざまです。私たちはその中でも、ほかのプラットフォームに比べてFreeプランで使えるリソースが多いCloudflare Pagesを使ってデプロイしました。本当にそうなのか、料金体系で確認してみましょう。

Netlifyの場合、Freeプランでは無料で使える帯域幅は月100GBまでで（超過後は100GBごとに20ドル）、最も高いプランでも帯域幅の制限があります。

一方、Cloudflare Pagesの場合はFreeプランであるにもかかわらず、帯域幅が無制限で、サイトの公開数やリクエスト数も無制限です。

さらに詳しい比較は、以下のリンクをご確認ください。

Netlify vs Cloudflare pages

Vercel vs Cloudflare pages

デザインシステムmantineの採用

INFCONティザーページの開発期間として割り当てられたのは2日間でした。さらに、フロントエンド開発チームの2人はどちらもTFチームに所属しており、TFチームで発生するチケットをこなしながらINFCONの開発も進めなければならない状況だったため、圧倒的に時間が足りませんでした。

そんな中でCSSに気を配る余裕はなおさらなく、最近フロントエンドチームで検討していたmantineデザインシステムを使ってマークアップの工数を減らそうと考え、mantineを導入しました。

結論から言うと、mantineの導入は時間短縮に大きく役立ちました。

もちろん、デザイナーの方がこのデザインシステムをベースにデザインしてくださったおかげでカスタマイズする量が多くなく、デザインシステムをそのまま使っても問題がなかったことが大きいです。しかし、それを除いてもいくつもの強みがありました。

1. グローバルテーマの設定
   • mantineでは、グローバルに使う色やフォントサイズなどを設定しておき、スタイリング時に呼び出して使うことができます。（リンク） この機能のおかげで、テーマを一度設定しておけば、スタイリングのときにそれを呼び出して使う形で開発できたので、開発時間を短縮できました。
2. コンポーネントのカスタマイズ
   • いくらデザイナーの方がデザインシステムに合わせてデザインしてくださっても、カスタマイズが必要な部分はありました。mantineはコンポーネントの内部までカスタマイズできるように、内部の特定の要素がどの className を持っているかが公式ドキュメントに記載されており、コンポーネントを使う際に特定の要素へスタイルを当てられるように設計されているため、カスタマイズの時間を短縮できました。
   • 下の画像は、mantineが提供するカスタマイズ設定の例です。

開発中の問題

開発時間の短縮を重視して技術スタックを選びましたが、それでも短い期間のため、問題が出るのは避けられませんでした。
開発中、そしてページの運用中にどのような問題が起き、どう解決したのかを共有します。

1. デプロイ時、初回ロードでmantineのスタイルが適用されない問題

開発がある程度進み、テストのためにデプロイしたところ、ページの初回ロード時にmantineのスタイルが適用されず、少し時間が経つと正常に表示されるという問題がありました。
これは、素のmantineが静的ページに対応していなかったために起きた問題でした。

この問題をローカルで発見できなかったのは、初回ロード後に次のレンダリングが起きるまでが速すぎて体感できなかったためで、デプロイ後に1回目と2回目のレンダリングの間隔が長くなったことで発見されました。
mantine側もこの問題を把握しており、静的ページでも使えるようにする方法を提示していました。
この問題は、mantineのプロパティを使って特に支障なく解決できました。

2. 初期レンダリング時、モバイルでデスクトップのスタイルが適用される問題

1つ目の問題を解決し、デスクトップでのQAを終えたあと、モバイルでテストしようとしました。しかし、初期レンダリング時にモバイル画面であるにもかかわらずデスクトップのスタイルが適用され、画面が一時的に崩れる問題が発生しました。

これはmantineが提供するuseMediaQueryというhookの問題で、SSRの場合は初期値を指定しなければならないという条件がありました。私はデフォルト値をデスクトップにしていたため、モバイルで見るとまずデスクトップビューが適用され、レンダリング後にモバイルビューが適用されていました。これは解決できない問題で、デスクトップビューを選べばモバイルで問題が起き、モバイルビューを選べばデスクトップで問題が起きるため、最も基本となるデスクトップビューを選びました。

3. GAの未導入

ティザーページには、ユーザーの流入がどれくらいあり、どこから多く来ているのかといった傾向を確認できるGA（Google Analytics）が導入されている必要があります。しかし、開発初期にGAのことを考慮できておらず、公開3時間前まで導入されていませんでしたが、HyangLoのフィードバックを受けて急いでGAを導入しました。

開発を終えて

上記のような問題はありましたが、INFCONティザーページは問題なく運用されており、今も多くの方に登壇の応募をいただいています。

当初、スケジュールの見積もりを誤って開発期間を2日しか確保していなかったため、
見積もりに問題があることに気づき、TF内でどうすれば開発期間を短縮できるかを話し合い、コミュニケーションコストを最大限減らして時間を節約できる
ツールを使うことになりました。かなり大変ではありましたが、会社ではなかなか経験できないハッカソンのような感覚を味わえて、良い経験になりました。

今後公開されるINFCONのメインページと、8月26日に開催するINFCONにも、ぜひご注目ください。ありがとうございました。