業務 · 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 の型制約を全面的に導入して、保守性と長期的な安定性を向上。
メイキング課題と解決策
既存機能を壊さずに any を取り除く
課題
旧コードには any が多く、既存機能の安定性を損なわずに型チェックを通す必要があった。
解決策
範囲が小さく比較的独立したページから修正を始めた。一か所直すごとに lint を実行し、通過して他の機能に影響がないことを確かめてから次へ進めた。
既存コンポーネントの改善と拡張
課題
既存コンポーネントの改善と拡張が必要だったが、多くのページで使われており、既存機能を壊せなかった。
解決策
コンポーネントのインターフェースを型で制約し、バグ修正以外では既存の挙動を変えなかった。コンポーネント内には副作用を置かず、前後で実行が必要な処理はすべて emit で外側に任せた。
引き継ぎ資料のない大規模機能の拡張
課題
一部の機能は大規模で変更しにくく、引き継ぎ資料も残されていなかった。
解決策
まず AI で関連ファイルを読み解き、要点や問題点、着手すべき箇所を洗い出した。拡張は既存コードを壊さない書き方で行った。書き直す場合はバックエンドとデータ形式をすり合わせるか、フロントエンドに適した形に変換し、変更範囲を最小限に抑えた。