ジモティーAdsフロントエンド構成

はじめに

フロントエンドとバックエンドを担当している川崎です。

今回は前回に引き続き、ジモティーAdsについてお話しします。

広告主様向けの広告出稿や効果レポートの確認が行える管理画面のフロントエンド構成についてご紹介します。

ジモティーAdsとは

ジモティーに直接出稿できる運用型の広告配信プラットフォームです。

「ジモティーAds」で出稿された広告をジモティーのスマートフォン向けアプリ・webブラウザのフィード面に配信することができます。

ジモティーに登録されたユーザー情報や過去の行動履歴から、ユーザーにとって最適な広告を配信できることが特徴です。

ジモティー本体の構成と比較

前提として、どちらもNext.jsのバージョン13以降を採用しています。

ジモティー ジモティーAds
ルーター PageRouter AppRouter
静的生成 (Static Export) なし あり
レンダリング SSR、SSG CSR
スタイリング styled-componentsで自作 MUI

特徴

ルーター

時流的に推奨されているAppRouterが長期的な保守を考えた場合に有効だと考え、採用しています。

しかし、後述するスタイリングや静的生成の関係で、その恩恵を十分に受けているわけではありません。

数少ない有用な機能としては、Nested Layoutがあります。

layoutファイルをアクターやログイン状態ごとに継承させることで、一定の単位で共通レイアウトを定義できます。

ログイン判定なども、直下のlayout内で行うことで、ページごとに記述する必要がありません。

app
├── layout.tsx
├── (admin) - 管理者
│   ├── layout.tsx
│   ├── (authenticated) - ログイン要
│   │   ├── layout.tsx
|   |   ├── not-found.tsx
│   │   ├── error.tsx
|   |   └── hoge
|   |       └── page.tsx
│   └──(unauthenticated) - ログイン非
│      ├── layout.tsx
|      ├── not-found.tsx
|      └── hoge
|          └── page.tsx
└── (adsmaneger) - 広告主
   ├── layout.tsx
   ├── (authenticated) - ログイン要
   │   ├── layout.tsx
   |   ├── not-found.tsx
   |   └── hoge
   |       └── page.tsx
   └──(unauthenticated) - ログイン非
       ├── layout.tsx
       ├── not-found.tsx
       └── hoge
           └── page.tsx

静的生成（Static Export）

アプリケーションを静的コンテンツとしてエクスポートできる機能です。

Node.jsサーバーを構築する必要がなく、コスト面で大きな利点があります。

使用できない機能がいくつかあり、動的ルーティングが使えない点に特に注意が必要でした。

generateStaticParamsでIDを割り振る方法はビルド時に解決されてしまうため、実質的な動的ルーティングの解決にはなりません。

そこで、クエリパラメータにてIDを指定し、必要なリソースを取得することで解決しました。

Nginxなどで動的なパスのリクエストを都度振り分けるよりも、インフラ側の負担を軽減できる利点があります。

×　ad/edit/[:id]
○　ad/edit?id=[:id]

レンダリング

静的生成を利用すると、レンダリング方法がCSRに強制されます。

管理画面であり、SEO要件を気にする必要がないので採用に踏み切れました。

SWRを通してキャッシュなどのパフォーマンス最適化を図っています。

サーバーコンポーネントでのフェッチも調査しましたが、以下の問題があり採用を見送りました。

  • MUIがサーバーコンポーネントに対応していない
  • 静的生成を利用すると（≒SSRを利用すると）ビルド時にしかフェッチされない

スタイリング

本体側は旧Railsのスタイルを引き継ぐ必要があり、UIフレームワークを導入すると逆にスタイルの定義が大変でした。

弊社独自のデザインシステムに沿って自前でスタイリングを行っています。

一方で、今回は新規プロダクトかつ管理画面で高度なデザインが必要ないため、MUIの恩恵を存分に受けています。

その他主要ライブラリ

  • SWR
  • react-hook-form
  • zod
  • openapi-fetch
  • storybook
  • msw

まとめ

Next.jsはサービスごとの特性に応じて幅広い構成を選択できるのが利点です。

バージョン13以降、大幅なアップデートが続いており、追従するのは大変ですね。。

理解できる範囲で取捨選択し、有効活用していきたいです。