[{"data":1,"prerenderedAt":93},["ShallowReactive",2],{"project:accunix:ja":3,"i-tabler:language":79,"i-tabler:eye":83,"i-tabler:database":85,"i-tabler:messages":87,"i-tabler:components":89,"i-tabler:shield-check":91},{"slug":4,"name":5,"summary":6,"role":7,"updateNote":-1,"meta":8,"coverUrl":-1,"lang":27,"isFallback":28,"featuredRank":29,"badge":30,"lastActivity":22,"tapeNumber":31,"blocks":32},"accunix","AccuNix ソーシャル会員管理プラットフォーム","LINE・Facebook・Instagram のソーシャルマーケティングと会員データを統合した企業向け管理画面。ソーシャル運用、キャンペーン管理、会員管理、効果測定に対応し、複数の企業クライアントに提供。","フロントエンドエンジニア",{"origin":9,"categories":10,"tags":12,"released":22,"company":23,"period":24},"company",[11],"frontend",[13,14,15,16,17,18,19,20,21],"vue","typescript","pinia","element-plus","vue-i18n","axios","pusher","tailwindcss","scss","2025-03-01","accuhit",{"from":25,"to":26},"2025-03","2026-03","ja",false,1,null,3,[33,60,67,73],{"type":34,"items":35},"features",[36,40,44,48,52,56],{"title":37,"description":38,"icon":39},"多言語アーキテクチャ","中国語・英語の多言語アーキテクチャを保守・改善し、動的コンテンツと UI コンポーネントが正しく切り替わるようにした。","tabler:language",{"title":41,"description":42,"icon":43},"キャンペーンフォームのリアルタイムプレビュー","キャンペーンフォームのリアルタイムプレビューを設計・実装し、設定ミスとコミュニケーションコストを削減。","tabler:eye",{"title":45,"description":46,"icon":47},"フロントエンドのキャッシュと状態管理","Pinia でキャッシュと状態管理を構築し、重複した API リクエストを防止。手動での再読み込みにも対応。","tabler:database",{"title":49,"description":50,"icon":51},"チャットのリファクタリング","担当者の権限階層の変更と API 仕様の変更に合わせ、チャットのデータ構造と状態フローをリファクタリング。メッセージとユーザーの関連付けを正しく保ち、拡張性も確保。","tabler:messages",{"title":53,"description":54,"icon":55},"再利用性の高い独自コンポーネント","Element Plus のコンポーネントをラップ・拡張し、再利用できる独自コンポーネントを作成。","tabler:components",{"title":57,"description":58,"icon":59},"型の強化","any を段階的に取り除き、新機能では TypeScript の型制約を全面的に導入して、保守性と長期的な安定性を向上。","tabler:shield-check",{"type":61,"title":62,"problem":63,"solution":65},"challenge","既存機能を壊さずに any を取り除く",[64],"旧コードには any が多く、既存機能の安定性を損なわずに型チェックを通す必要があった。",[66],"範囲が小さく比較的独立したページから修正を始めた。一か所直すごとに lint を実行し、通過して他の機能に影響がないことを確かめてから次へ進めた。",{"type":61,"title":68,"problem":69,"solution":71},"既存コンポーネントの改善と拡張",[70],"既存コンポーネントの改善と拡張が必要だったが、多くのページで使われており、既存機能を壊せなかった。",[72],"コンポーネントのインターフェースを型で制約し、バグ修正以外では既存の挙動を変えなかった。コンポーネント内には副作用を置かず、前後で実行が必要な処理はすべて emit で外側に任せた。",{"type":61,"title":74,"problem":75,"solution":77},"引き継ぎ資料のない大規模機能の拡張",[76],"一部の機能は大規模で変更しにくく、引き継ぎ資料も残されていなかった。",[78],"まず AI で関連ファイルを読み解き、要点や問題点、着手すべき箇所を洗い出した。拡張は既存コードを壊さない書き方で行った。書き直す場合はバックエンドとデータ形式をすり合わせるか、フロントエンドに適した形に変換し、変更範囲を最小限に抑えた。",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":82},0,24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M9 6.371C9 10.789 6.761 13 4 13m0-6.629h7\"\u002F>\u003Cpath d=\"M5 9c0 2.144 2.252 3.908 6 4m1 7l4-9l4 9m-.9-2h-6.2M6.694 3l.793.582\"\u002F>\u003C\u002Fg>",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":84},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0\"\u002F>\u003Cpath d=\"M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6\"\u002F>\u003C\u002Fg>",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":86},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 6a8 3 0 1 0 16 0A8 3 0 1 0 4 6\"\u002F>\u003Cpath d=\"M4 6v6a8 3 0 0 0 16 0V6\"\u002F>\u003Cpath d=\"M4 12v6a8 3 0 0 0 16 0v-6\"\u002F>\u003C\u002Fg>",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":88},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m21 14l-3-3h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm-7 1v2a1 1 0 0 1-1 1H6l-3 3V11a1 1 0 0 1 1-1h2\"\u002F>",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":90},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m3 12l3 3l3-3l-3-3zm12 0l3 3l3-3l-3-3zM9 6l3 3l3-3l-3-3zm0 12l3 3l3-3l-3-3z\"\u002F>",{"left":80,"top":80,"width":81,"height":81,"rotate":80,"vFlip":28,"hFlip":28,"body":92},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.46 20.846A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3a12 12 0 0 0 8.5 3a12 12 0 0 1-.09 7.06M15 19l2 2l4-4\"\u002F>",1793955809469]