Case

実績

クライアントの課題

スケジュールの観点から、高度なチャットUIを限られた期間で構築しつつ、技術選定と設計を迅速に固めて将来の拡張にも備える必要がありました。複数の開発フェーズが並行する体制下でフロントエンドとバックエンドを同時に進行させる必要があり、開発全体をリードして課題を解決に導けるテックリードが求められる状況でした。

ソリューション

ユーザー体験を重視したチャット機能を提供するため、まずGraphQLを用いたバックエンドAPIの設計・実装を提案し、その上でフロントエンドのリアルタイム処理を構築しました。状態管理にはApollo Clientを採用し、タブ切り替え時など必要なタイミングでのみデータを取得するよう最適化しています。これにより不要な通信を抑えつつ、最新のチャット情報をシームレスに表示できるクライアント側の仕組みを実現しました。

テックリード

テックリードとして、まず効率的に開発できる実装基盤と新たな実装方針の策定に着手。既存のフロントエンド方針を見直し、スタイリング手法やライブラリ選定の改善提案を行い、クライアントと協議のうえ最適な技術スタックとコーディング規約を整備しました。また、リアルタイムUIの実装を主導しつつ、バックエンドチームとも密に連携して仕様調整や性能改善に対応。API設計の変更などにも柔軟に対処し、フロントエンド・バックエンド双方から開発をリードしました。

成果

未読メッセージ数の合算表示機能を実装し、ユーザーが複数のチャットルームを横断して未読数を直感的に把握できるUIを構築しました。リアルタイム性とキャッシュ戦略のバランスを考慮することで、情報の取りこぼしを防ぎながら軽快な操作体験を提供しています。
チャット画面では新着メッセージを即時に反映し、ユーザー同士がリアルタイムでスムーズにやり取りできる環境を整備。AppSyncのSubscription機能とクライアント側の状態管理を連携させることで、遅延のない同期体験を実現しました。

その結果、短期間でリアルタイムチャットのコア機能を安定して実装し、高度なUIとパフォーマンスの両立に成功しました。さらに、整備したテストコードやドキュメントはプロジェクト全体のリファレンスとして機能し、後続の開発フェーズの生産性向上にも貢献しています。

引き継ぎを前提としたリファレンス整備により、持続的な開発を支援しました。
引き継ぎを前提としたリファレンス整備により、持続的な開発を支援しました。
URL
非公開
クレジット
テックリード:株式会社FLAT(飛田)
開発:株式会社FLAT(山村、伊藤)
使用技術
TypeScript / React / Tailwind CSS / shadcn/ui / PHP / Laravel / GraphQL / AWS
使用ツール
Redmine / Slack / Figma
Contact
ご相談・お問い合わせ
現状やお困りごとをお聞かせください。
要件が曖昧でも、費用ご不要で最初の一手を一緒に考えます。