三菱UFJフィナンシャル・グループ（MUFG）の中核企業として、預金、貸出、為替などの金融サービスを提供する株式会社三菱UFJ銀行。同行の市場部門が扱う取引を金融工学とシステムの両面から支えているクオンツ開発グループでは、トレーダーやセールス担当向けに提供しているデスクトップアプリのWebアプリ化の手法や技術の習得に取り組みました。開発チームにとってWebアプリ化は初の挑戦だったことから、クラスメソッドの技術支援を受けながら必要な知識やノウハウを習得しました。
Webアプリを内製開発できる基盤づくりが必須に
三菱UFJ銀行の市場ビジネスを支えるシステムの企画・開発を担う市場企画部 市場エンジニアリング室。その中のクオンツ開発グループは、グローバルマーケットのトレーダーやセールス担当が利用するシステムの開発や、金融工学の知見を活用したモデル開発を担当しています。クオンツとは、数学・統計・プログラミングを用いて、金融商品の価格評価、リスク管理、投資戦略や取引モデルの開発を行う専門職です。「私たちのチームは、金融工学や数理モデルといった専門性の高いロジックを内製でシステム化し、市場部門のトレーダーなどへ提供しています」（金子さん）
同グループでは、ユーザー向けアプリを10年以上にわたりデスクトップアプリとして提供してきました。デスクトップアプリはハードウェア性能による高速処理が可能な一方で、利用環境に依存しやすく、特にグローバル拠点への展開や保守に課題を抱えていました。こうした背景に加え、同行全体でWebアプリ化を推進していることも踏まえ、継続的な開発を支える基盤として、Webアプリの内製開発を検討しています。
「例えば、Excelに数値計算ライブラリを組み込んだデスクトップアプリでは、バージョン管理や機能追加のたびに運用負荷が発生します。海外拠点で不具合が起きた場合も、現地環境を確認しなければ原因を特定できないケースがあり、解決まで時間を要していました。こうした課題に対応するため、データ標準化やクラウド提供、疎結合なアーキテクチャ、グローバル展開を見据えた基盤整備を進める中で、Webアプリの内製体制の構築を目指しました」（枡田さん）
そこでまず、Excelベースの代表的なツールである「FX Forwardアプリ（通称）」と、C#で開発された「金利プライサーアプリ（通称）」を対象に、Webアプリ化の実現可能性を検証することにしました。しかし、チーム内ではそもそも2つのデスクトップアプリがWebアプリに移行できるのかという不安もありました。特に、既存と同等の安定性やパフォーマンスを維持することが重要な要件でした。
「デスクトップアプリは10年以上の年月をかけて改善を重ね、ユーザー利便性を高めてきました。そのため、Webアプリ化に移行した後も期待どおりの性能と使い勝手を実現できるかを、客観的な視点で見極める必要がありました」（辻さん）
支援実績を評価してクラスメソッドを選定
一方で、当時の開発チームにはWebフロントエンドの開発経験や知見が十分にありませんでした。そこで、外部からレクチャーを受けながらノウハウを習得し、検証を進めることにしました。
「チーム内に経験者がいない状況で、独学のみで進めるには時間がかかります。今後のWebアプリ化の推進を見据えるためにも、専門家の支援が必要であると判断しました」（金子さん）
こうした中、金子さんは市場エンジニアリング室の別グループがクラスメソッドの技術支援を通じてWebフロントエンドの内製開発ノウハウを獲得していたことを知り、クラスメソッドをパートナーに選定しました。
「同じフロアにいる別グループからクラスメソッドの高い評価を聞いていたことが、一番の理由です。ナレッジトランスファーを目的とした取り組みは私たちにとって初めてでしたが、実際に担当者へヒアリングした際も技術力の高さを感じ、ぜひ支援してほしいと依頼しました」（金子さん）
前半の2カ月でWebアプリ移行に向けた要件整理を実施
プロジェクトは2025年12月から2026年3月までの約4カ月間で実施。金子さんが全体マネジメントを担い、「FX Forwardアプリ」を枡田さん、「金利プライサーアプリ」を辻さん、林さんが担当しました。
前半の約2カ月間はフェーズ1として、Webアプリへの移行に向けた要件整理や画面設計を進めました。まず、クラスメソッドからWebアプリ開発の基礎知識を学び、そのうえで必要最低限の機能を備えたMVP（Minimum Viable Product）の要件定義に着手しました。
「Excelベースの業務をWebアプリへ移行するにあたり、単純な画面移植ではなく、業務に最適化したUI/UX設計を重視しました。どの機能を持たせるか、どの情報を常時画面表示するか、ユーザー導線をどう設計するかなど、優先順位を付けながら機能を絞り込みました。情報量の多いトレーダー向け画面では、情報を論理的に整理し、重要な情報へ素早くアクセスできる構成を意識する必要があります。Excelの自由度をそのまま再現するのではなく、ユーザーの業務知見を反映しながら、Webアプリに適した情報設計へ落とし込むことが大きなテーマでした」（枡田さん）
「金利プライサーアプリでは、既存機能を詳細に分解・整理することから始めました。既存アプリの簡易的な仕様書はグループ内に存在していましたが、画面の細かな挙動や項目間の依存関係など、Webアプリ化に必要な情報は十分ではありませんでした。そのため、現行機能を整理し、設計情報として再構成してから分析を進め、Next.jsを前提とした設計・実装方針を策定しました。特に難しかったのは、デスクトップアプリ特有の複雑な業務ロジックをどう再現するかでした。一般的な設計だけでは対応できない部分については、議論と検証を重ねながら最適な方法を導き出しました」（辻さん）「金融アプリには、項目間で状態が連鎖的に変化する仕組みが多く含まれています。こうしたロジックをC#のデスクトップアプリからどう移行し、レイテンシーをどう抑えるかについて、クラスメソッドからのレクチャーを受けながら整理していきました。また、すべてをモダンなアーキテクチャへ置き換えるのではなく、既存資産の良さを活かしながら最適な構成を検討しました」（林さん）
Webアプリの実践的な開発ノウハウを習得
要件整理と設計を終えた後、2026年2月からの約2カ月間をフェーズ2と位置づけ、開発のノウハウ習得に取り組みました。プログラミング言語にはTypeScript、フレームワークにはNext.jsを採用。クラスメソッドには技術的な相談をする「壁打ち相手」として、ナレッジ提供やコードレビュー、課題解決の支援を依頼しました。
「FX Forwardアプリでは、設計フェーズで整理したアーキテクチャを基にAPIを実装し、画面操作に応じて計算や項目更新が行われる仕組みを理解しました。クラスメソッドにはドキュメントを整備してもらい、実際の画面を見ながら実装方法を学んでいきました。初めて扱うNext.jsの設計思想には戸惑いもありましたが、実践的な解説によって理解を深めることができました」（枡田さん）
「金利プライサーアプリでは、クラスメソッドに作成してもらったサンプルを土台に機能を拡張する方法や、APIの連携方法を理解しました。既存アプリと同等のパフォーマンスを維持するため、本番環境を想定した性能測定の仕組みを整備し、常に性能を意識することを学びました」（辻さん）「金融アプリはオブジェクト指向設計を前提とするケースが多く、関数型の考え方を取り入れたTypeScriptを理解するのには難しさもありました。その点についても継続的に議論を重ね、既存設計の強みを活かしながらTypeScriptに適した形へ整理することの大切さを理解しました。複雑な連鎖ロジックについても、状態変化を可視化しながら設計・実装を進めるといいということを教えていただきました」（林さん）
金融業界特有の要件を踏まえた実践的な提案力を評価
約4カ月にわたるプロジェクトは、週1回・1時間の定例ミーティングを軸に進行し、定例外でもチャットを通じて随時相談できる体制を構築しました。支援を依頼したクラスメソッドについては、金融業界特有の要件や背景を理解したうえでの実践的な提案力を評価しています。
「金融業務のドメイン知識を踏まえて現場で使える形へ落とし込むには多くの試行錯誤が必要です。クラスメソッドには業務価値の本質まで理解し、支えてもらえたことで、短期間で実践的な開発ノウハウを習得できました」（枡田さん）
「金融特有の複雑なアプリにも短期間でキャッチアップし、Webアプリ化の方向性について技術的な知見を交えながら伴走してもらいました。得られた知識は社内ナレッジとして蓄積しており、プロジェクト終了後も継続的に活用できる資産になっています」（辻さん）
「設計面では、複数の状態管理手法など、自分たちだけではたどり着けない観点を得ながら、学べたことが大きな成果でした」（林さん）
Webアプリ開発のナレッジを獲得しチームのメンバーも成長を実感
プロジェクトの結果、対象としていた2つのアプリについて、Webアプリ化が技術的に実現可能であることを確認できました。また、性能評価の方法論や設計・開発ノウハウも蓄積され、チーム内で自走できる基盤が整いました。
「最大の成果は、Webアプリを開発するためのナレッジを獲得できたことです。得られた知見や情報資産は、本番の開発にも十分活かせると考えています。また、これまでWebアプリ開発へのハードルを感じていたメンバーも、技術を習得したことで自信を持って取り組めるようになったと感じています」（金子さん）
メンバーそれぞれも成長を実感しており、開発への向き合い方にも変化が生まれています。
「TypeScriptやNext.jsを習得したことで、エンジニアとしての選択肢が大きく広がりました。既存のAPIを活用できる環境であれば、デスクトップアプリの開発に限定せず、Webアプリで提供する選択肢を自然に取れるようになりました」（枡田さん）
「私自身もWebアプリへの解像度が高まり、メリット・デメリットを比較しながら最適な開発手法を選択できるようになったと感じています」（辻さん）
「Webアプリに適したアーキテクチャを考える機会が増え、技術選定や設計の視点が広がりました。また、他チームとの交流を通じて、多様な知見や考え方にも触れることができました」（林さん）
今後は、デスクトップアプリの継続開発と並行して、Webアプリの開発も積極的に進めていく方針です。
「今回は既存アプリの置き換えが中心でしたが、行内のバックエンド基盤がさらに整備されていけば、API連携を前提としたフロントエンド開発案件も増えていきます。その際は、これまでのデスクトップアプリで実現が難しかった機能も取り込みながら、より付加価値の高いWebアプリをユーザーに提供していきたいと考えています。クラスメソッドには、引き続きナレッジの提供に加え、生成AIを活用した開発支援など幅広い領域で伴走いただけることを期待しています」（金子さん）
クラスメソッドは、市場エンジニアリング室の開発チームが安心して自走できるよう、幅広い領域で技術支援を継続していきます。
