ゲームコミュニティ「Lobi」/「Tonamel」— 大規模サービスの基盤刷新と、品質への投資を提案する

課題 — 成長したサービスに、技術が追いつかない

Lobiは、アクティブグループ数16万を超える日本最大級のゲームコミュニティです。しかしWeb版は長年の保守運用が続き、構造的な課題を抱えていました。

• AngularJS + CoffeeScriptというレガシー構成で、アプリ版との機能乖離が拡大している
• 過去の経緯の調査に時間がかかり、改修のリードタイムが長くなっている
• 姉妹サービスのTonamel（大会プラットフォーム）では短期間の連続開発で実装が複雑化し、大規模大会を安心して開けないリスクが顕在化している

私はフロントエンドチームの一員として、この2つのサービスの基盤刷新と新機能開発に携わりました。

プロセス — 全面リニューアルとマルチプラットフォーム開発

Lobiの全面リニューアルでは、AngularJS + CoffeeScriptで書かれたWeb版を、フロントエンド3名のチームでNuxt.js + TypeScriptへ置き換えました。負債化していたバグが解消され、パフォーマンス改善によってGoogleのインデックス登録数が増加するというSEO面の成果にもつながりました。

ライブ配信機能の開発では、WebRTC（Agora.io SDK）を用いてWeb / Android / iOSのマルチプラットフォームで配信・視聴できる機能を、要件定義・設計の段階から実装まで担当しました。Web 3名・Android 3名・iOS 3名・デザイナー2名・ディレクター2名という職能横断チームで、アプリとWebの仕様差を洗い出して調整する役割を担いました。

Tonamelの新機能開発では、複数日程の大会への「一括エントリー機能」や、対戦数を均等化する「スイスドロー形式」の大会開催機能を実装しました。Vue.js + TypeScriptで型定義を厳密に運用し、CSSはBEM記法でコンポーネントの共通化を徹底しました。

品質への投資 — リファクタリング期間をエンジニア側から提案する

連続する新規開発で複雑化したTonamelに対し、エンジニアチームとして3ヶ月のリファクタリング期間を事業側に提案し、合意を得ました。

1. コードの規約統一：クラス名・変数名の統一、CSS変数とmixinの整理、エラーハンドリングの例外処理を整備しました
2. any型の排除：TypeScriptをstrictモードに移行し、GraphQL層はPrismaで型定義を自動生成する構成にしました
3. 単体テストの導入：Jestでコンポーネントテストを整備し、QA前にバグを検出できる体制にしました

事業インパクト

リニューアルとリファクタリングにより、バグ対応にリソースを取られる頻度が減り、サービスを安定運用しながら新機能に集中できる体制が整いました。Tonamelは大手ゲーム会社と提携し、1,000人超が同時接続するオンライン大会を支えるプラットフォームへ成長しています（サービスは現在も継続中です）。

学び

• 技術的負債の返済は、エンジニアの都合ではなく「大規模大会が開けないリスク」という事業の言葉で提案したことで合意を得られました。以後のキャリアでも、構造的な課題を事業の言葉に翻訳する姿勢を大切にしています
• 職能横断チームでアプリとWebの仕様差を調整した経験は、後にデザイナーとしてエンジニアと協業する際の共通言語になりました
• 実現可能性を織り込んだ提案、エンジニアリングコストの見積もり、デザインシステムのコード側への理解といった実装を知るデザイナーとしての現在の仕事の土台は、このフロントエンド専任期に築かれました