棚に戻る
KJ VIDEONo. 003

業務 · AccuHit AI Technology

AccuNix ソーシャル会員管理プラットフォーム

LINE・Facebook・Instagram のソーシャルマーケティングと会員データを統合した企業向け管理画面。ソーシャル運用、キャンペーン管理、会員管理、効果測定に対応し、複数の企業クライアントに提供。

種類
フロントエンド
役割
フロントエンドエンジニア
期間
2025年3月 – 2026年3月
公開
2025年3月1日
  • Vue
  • TypeScript
  • Pinia
  • Element Plus
  • Vue I18n
  • Axios
  • Pusher
  • Tailwind CSS
  • SCSS

見どころ特徴

  • 多言語アーキテクチャ

    中国語・英語の多言語アーキテクチャを保守・改善し、動的コンテンツと UI コンポーネントが正しく切り替わるようにした。

  • キャンペーンフォームのリアルタイムプレビュー

    キャンペーンフォームのリアルタイムプレビューを設計・実装し、設定ミスとコミュニケーションコストを削減。

  • フロントエンドのキャッシュと状態管理

    Pinia でキャッシュと状態管理を構築し、重複した API リクエストを防止。手動での再読み込みにも対応。

  • チャットのリファクタリング

    担当者の権限階層の変更と API 仕様の変更に合わせ、チャットのデータ構造と状態フローをリファクタリング。メッセージとユーザーの関連付けを正しく保ち、拡張性も確保。

  • 再利用性の高い独自コンポーネント

    Element Plus のコンポーネントをラップ・拡張し、再利用できる独自コンポーネントを作成。

  • 型の強化

    any を段階的に取り除き、新機能では TypeScript の型制約を全面的に導入して、保守性と長期的な安定性を向上。

メイキング課題と解決策

  1. 既存機能を壊さずに any を取り除く

    課題

    旧コードには any が多く、既存機能の安定性を損なわずに型チェックを通す必要があった。

    解決策

    範囲が小さく比較的独立したページから修正を始めた。一か所直すごとに lint を実行し、通過して他の機能に影響がないことを確かめてから次へ進めた。

  2. 既存コンポーネントの改善と拡張

    課題

    既存コンポーネントの改善と拡張が必要だったが、多くのページで使われており、既存機能を壊せなかった。

    解決策

    コンポーネントのインターフェースを型で制約し、バグ修正以外では既存の挙動を変えなかった。コンポーネント内には副作用を置かず、前後で実行が必要な処理はすべて emit で外側に任せた。

  3. 引き継ぎ資料のない大規模機能の拡張

    課題

    一部の機能は大規模で変更しにくく、引き継ぎ資料も残されていなかった。

    解決策

    まず AI で関連ファイルを読み解き、要点や問題点、着手すべき箇所を洗い出した。拡張は既存コードを壊さない書き方で行った。書き直す場合はバックエンドとデータ形式をすり合わせるか、フロントエンドに適した形に変換し、変更範囲を最小限に抑えた。

KAY JEN 制作

監督 KAY JEN

© 2026 Kay Jen