用地情報管理サービス

開発背景

参画時点で稼働中のシステムに複数の不具合が蓄積しており、外部データの取り込みもさらなる効率化の余地があった。信頼性と使いやすさを向上させるため、段階的な改修プロジェクトのメンバーとしてアサインされた。

届けたいユーザー

不動産会社の現場担当者。用地の取得判断に必要な情報を地図上で照会する業務を支えるため、現場の業務フローに合わせた柔軟な使い勝手を重視しつつ、IT リテラシーに関わらず直感的に操作できる UI を目指した。

社内保管していた外部の地図データを API 経由取得に移行。取り込み作業を介さず提供元のデータを参照できる構成にした。あわせて any だった既存の型定義を仕様に沿って整備し、変更箇所の影響範囲を把握しやすいコードベースに改善した。

フォームライブラリのバージョンアップに伴い、入力項目30個を持つ画面でバリデーションのタイミングずれや入力値が反映されない不具合を調査。grep でコンポーネントを特定し、状態管理関数を使わず values オブジェクトを直接更新していた実装が原因と突き止めた。正規の API に置き換えつつ関連画面を統合し、再描画を強制する回避実装ごと不具合を根本解消した。

React DevTools の Profiler で再描画の影響範囲を計測し、1項目の変更ごとに全項目分のオブジェクトを再生成して Context の参照を変えていることを特定。変更対象のみを更新する形に修正し、再描画を必要な範囲に限定した。

建物名検索と企業名検索という性質の異なる2機能が1画面に混在し、どちらを操作しているか分かりにくいという不満が上がっていた。機能単位で2画面に分割し、表示責務とロジック責務を分離して再構成。任意項目が必須項目より上に並ぶなど直感に反するレイアウトも、項目の並び順・余白・入力導線を見直してマニュアルなしで操作できる画面に改善した。参照 API 4本の差し替えも型定義の整備により実行時エラーなく完了した。

限られた工数のなか、優先度の判断基準を「その不具合で操作が完了できるか」に統一。押下範囲が狭くクリックできない、テーブル列が見切れて情報が読めないといった操作を止める不具合を高、フォントサイズの不統一などを低として整理し、起票済み3件を解消した。修正後の再起票は発生していない。

新規画面・新規機能向けにテスト仕様書7件（200〜300ケース）を作成し、既存3件（約50ケース）を更新。「正しく検索されること」のような曖昧な記述を、入力条件・期待件数・表示項目・表示順といった判定可能な粒度に分解し、実施者が変わっても同じ判定になる状態にした。計10件・約500ケースを実施。

リリースごとに約500ケース・数時間〜数十時間規模の手動確認が発生していた。ID がビルドごとに採番される、MUI のクラス名が変動する、アクセシビリティ属性が不足しているという事情でロケータ指定が困難だったため、Claude Code + Playwright MCP で POM を先に確定させ、テストコードは POM 経由のみで要素にアクセスする2段階構成を設計。20ケースの自動化に成功し、残り約480ケースへ横展開できる構造を整備した。

画面の追加・変更内容を利用者が参照できるドキュメントとして整備。現場担当者が操作方法を自力で確認できる状態にした。