生成AIの進歩により、ソフトウェアやアプリケーションをかつてないほど容易に作れる時代になりました。その一方で、開発スピードが加速するからこそ、クリーンで拡張性の高いコードの重要性も増しています。
短期間で動くものを作るだけでなく、その先も機能を追加し、改善し続けられるソフトウェアをつくる。そのためには、持続可能なソフトウェア開発の基本原則が欠かせません。
将来を見据えた開発戦略は、不具合のリスクを低減するだけでなく、新たなエンジニアのオンボーディングを迅速化し、保守や機能拡張を容易にします。
では、継続的に進化できるアプリケーションをつくるために、何を見直す必要があったのでしょうか。
本記事では、3Dmapspocket®をゼロから作り直すことになった背景と、v4で取り組んだリファクタリングについて、開発チームの2人が前編・後編に分けて紹介します。
私たちの動機：何がうまくいかなかったのか？
ソフトウェア技術部のD.P.です。ダイナミックマッププラットフォームへ入社した当時、私はWebアプリケーション開発の経験がまだ浅く、実務を通じてさらに学ぶことを楽しみにしていました。
初日に与えられた課題は、3Dmapspocket® v2のコードベースに慣れ、アプリケーションが実現しようとしていた各種システムと設計原則を理解することでした。
その後、点群ビューアで行った変更をユーザーがサーバーへ保存できる新機能を見据え、コードベース全体の書き直しとインターフェースの再設計をチームへ提案しました。
この大規模リファクタリングは、よりクリーンなソフトウェアを作ることを意図したものでした。しかし、その後の開発を進める中で振り返ってみると、当時の自分にはまだ十分に見えていなかった課題もありました。
率直に言えば、以前の実装と比べて、期待していたほどクリーンなコードにはできていなかったのです。
後に明確になった主な課題は次のとおりです。
- 確立されたデザインシステムがなく、視覚デザインに一貫性がない
- コードの重複により、保守しにくく、疎結合性にも欠けるReactコンポーネントが増加
- 継続的インテグレーションがなく、コード上の問題や不具合を事前に検知する仕組みが十分ではない
- 単体テスト・結合テストが不足し、手動テストへの依存度が高い
- LinterやFormatterを使用しておらず、望ましくないReactの実装慣行を自動的に検出できない
将来に向けたビジョン
3Dmapspocket® v3に残ったこれらの課題に対処するため、クリーンで拡張性の高いアプリケーション設計について改めて検討し、コードの全面的な書き直しを提案しました。
それが、3Dmapspocket® v4です。
今回のリファクタリングで導入する主な改善は次のとおりです。
- 再利用可能なコンポーネントライブラリを作成・採用し、デザインの一貫性を徹底。UI開発の重複を減らし、開発効率を高めるとともに、内部UIコンポーネントへの依存を解消
- 再利用可能で組み合わせ可能なUIコンポーネントを作成し、コードの重複を減らして保守性を向上
- コードのマージ前に、ビルド、テスト、Lint、Formattingを自動検証するCIパイプラインを導入
- 単体テスト、結合テスト、Visual Regression Testを導入し、信頼性を高めて手動テストへの依存を削減
- 自動LintとFormattingを採用し、コーディング規約を統一するとともに、一般的なReactの問題を早期に検知
この標準的かつモダンなWeb開発アプローチは今後のプロジェクトにも展開していきます。
高精度3次元地図データをはじめとする地理空間データ分野のイノベーターとして、ダイナミックマッププラットフォームが提供するプロダクトのさらなる品質向上につなげていきます。
新しい技術スタック
優れたソフトウェアの背後には、信頼性と性能の高いアプリケーションを構築するため、慎重に選定された技術群があります。
ここからは、v4で採用する主要なツールチェーンとライブラリを紹介します。
コアツールチェーン
- React 19 + React Compiler：コンポーネントベースのUI開発と自動レンダリング最適化
- Vite 8/ pnpm：高速な開発・ビルド環境とパッケージ管理
アプリケーションアーキテクチャ
- TanStack Router/ Query/ DB：ルーティング、サーバーデータ、クライアント側データの管理
- Redux Toolkit/ Zod：アプリケーションの状態管理と入力値の検証
地図と3D
- Google Maps / deck.gl / CesiumJS / Three.js：地図、大規模な地理空間データ、3Dデータの表示
- Turf / Proj4 / Supercluster / loaders.gl：空間計算、座標変換、Marker clustering、地理空間データの読み込み
UIとデザイン
- Tailwind CSS 4/Storybook：一貫したUIの構築とコンポーネントの開発・管理
認証とローカライズ
- AWS Amplify /Cognito / Paraglide JS：認証と英語・日本語への対応
テストと品質
- Vitest / Testing Library / Playwright：単体・結合・ブラウザテスト
- Oxlint / Oxfmt / Lefthook： Lint、Formatting、変更コードの自動検証
これらの技術を組み合わせることで、型安全なフロントエンドアーキテクチャやサーバー状態管理、自動品質管理、GIS、ブラウザベースの3Dレンダリングなど、v4の開発を支える基盤を構築しています。
v4で目指したこと
3Dmapspocket® v4では、機能や利用シーンが増えても継続的に進化できるアプリケーションを目指し、これまでの開発で見えてきた課題を踏まえて、設計や開発環境そのものを見直しました。
では、実際に何を、どう変えたのか。
後編では、3D Tiles Viewerを例に、Static ClassからReact Providerへの移行やCesium Entityの再設計、さらに3Dオブジェクトの表示やUIの改善まで、具体的なリファクタリングの内容を紹介します。
v4で3Dmapspocket®がどう変わったのか。ぜひ後編もご覧ください。
