キャンペーンページ統合プラットフォーム

見どころ特徴

• パスによるプロジェクト統合

  複数のキャンペーンページを一つのアプリにまとめ、パスで切り分けた。集客時は、URL に付与されるパラメータなど、各パスに必要なデータだけを扱えばよい。

• 設定の単一情報源（SSOT）

  プロジェクトごとに異なる UI と設定を一か所に集約し、型は設定そのものから導出。記述ミスと保守コストを削減。

• 型で守られた設定マップ

  各所に散らばっていた switch 文を一つのマップに置き換えた。新しい項目の設定を書き漏らすと型チェックでエラーになり、未知の値はデフォルトにフォールバックする。

• UI の統一

  Vuetify で各キャンペーンページの画面を統一し、ばらばらだったスタイルを置き換えた。

• LINE ログインと例外処理

  LIFF で LINE ログインを連携し、読み込みの流れやログイン切れなどの例外を一括で処理。

メイキング課題と解決策

1. 01 ページごとにばらばらで、一つの変更が何か所にも波及

   課題

   キャンペーンページはそれぞれ HTML と JS で書かれ、UI も統一されていなかった。同じ種類の設定が各所に散らばり、ルールが食い違いやすく、一か所を直すと何か所も連動して修正が必要だった。

   解決策

   Vue の単一アプリに統合し、パスでプロジェクトを切り分けた。設定は TypeScript で制約した単一情報源にまとめ、書き漏れや誤りは型チェックで見つかるようにした。