ID:80902さん

プロジェクト概要 水処理施設向け流体解析クラウドサービスの新規開発に企画段階から参画しました。設計者がシミュレーション結果を確認するWebアプリケーションのフロントエンド開発を担当し、シミュレーション画面の実装やThree.jsを用いた3Dモデル表示機能の開発、UI改善、開発環境の改善を行いました。 役割・体制 自身のポジションと役割 フロントエンドエンジニアとして参画し、Reactを用いた画面開発を担当しました。 シミュレーション画面や入力フォーム、Three.jsによる3Dモデル表示機能の実装を担当したほか、UI改善や開発環境改善の提案・実装も行いました。仕様が固まりきっていないタスクも多く、先輩エンジニアと相談しながら仕様を整理し、実装まで担当しました。 チーム規模と構成 * チーム人数：10名 * 担当領域：フロントエンド * 担当工程：詳細設計、実装、テスト、デプロイ 背景・課題 入力項目が多いシミュレーション画面では、全て入力後に保存ボタン押下後、画面下部へエラー一覧表示される仕様となっており、どの入力項目を修正すべきか分かりづらい状態でした。また、Three.js導入を進める中で、CRA（Create React App）が非推奨となっていることが判明し、将来的な保守性にも課題がありました。 実際の取り組み UI改善 入力エラーが発生した項目だけでなく、計算に影響する関連入力欄も赤色でハイライトするUIを提案、実装しました。既存のバリデーションロジックを大きく変更せず、変更コストを抑えながら視認性を向上させる方法を検討しました。 Three.jsによる3Dモデル表示 Three.jsを用いた3Dモデル表示機能を担当しました。情報が少なく学習コストが高いライブラリでしたが、公式ドキュメントを中心に検証を繰り返し、必要な表示機能を実装しました。 ビルドツール改善 Three.js導入時の調査を通じてCRAが非推奨となっていることを確認しました。Next.jsやWebpackなども比較しましたが、既存構成への影響や移行コストを考慮し、Viteへの移行を提案しました。移行手順を整理した手順書を作成し、再現性を意識して移行作業を実施しました。 成果・価値 * ユーザーがエラー箇所を把握しやすいUIへ改善し、操作性向上に貢献。 * Three.jsを用いた3Dモデル表示機能を実装し、シミュレーション結果の可視化を実現。 * 将来的な保守性を考慮し、Viteへの移行を提案、実施するとともに、手順書を整備してチーム内で再現可能な状態にしました。