次世代フロントエンド開発～Angular、React、Vue.jsを比較して、Angularを採用した理由～

リーウェイズの事業

リーウェイズは、5800万件を超す不動産ビッグデータを基に、不動産投資の客観的なデータに基づく投資・融資の判断を支援するシステム「Gate.」を開発しています。この「Gate.」により、金融機関・不動産事業者の「顧客本位の業務運営」と投資家の「客観的なデータに基づく投資判断」を支援しています。

「Gate.」は、地図を見ながら投資用不動産を探せるサブシステムと、不動産に投資した場合の収益性・安全性・将来価値をシミュレーションできるサブシステムから成ります。後者のシミュレーションが可能なサブシステムは「Gate.Investment Planner」という名前のプロダクトとして、主に不動産事業者や金融機関などの法人向けに、1アカウントあたり月額2万円のSaaS型で提供しています。

リーウェイズの事業は、このSaaS事業と、「Gate.」を法人向けにカスタマイズして提供するOEM事業の、2つの事業が主軸です。その他にも、不動産投資のコンサルティング、売買仲介も手掛けています。

▼リーウェイズの事業構成

開発の課題と解決策

OEM事業においては、これまでに、コスモスイニシアと、オリックス銀行にOEM提供してきました。コスモスイニシアのシステムは今年の2月末に、オリックス銀行のシステムは8月末にリリースしました。その後も金融機関・不動産業者からの問い合わせが多く寄せられ、いまも複数のOEM案件が動いています。

今年は、スマートデイズの「かぼちゃの馬車」、TATERU、スルガ銀行など、不動産投資に関する不正融資が大きな問題になりました。金融庁からも異例の注意喚起がなされ、不動産業者・金融機関・投資家などの不動産投資のステークホルダに対して「客観的なデータに基づく投資・融資の判断」が求められています。特に金融機関では、これまで以上に厳格な審査を求められており、審査の現場では業務効率化のニーズが高まっています。そのような市場環境から、今後も金融機関を中心に当社に対する引き合いも増えることが予想されます。

リーウェイズでは、それらの多数のニーズに応えるために、開発リソースの増強と、開発効率の向上が喫緊の課題です。その課題解決のために、以下の3つの施策を進めています。

(1) エンジニア・デザイナ採用の強化
(2) 開発パートナーの募集
(3) 「Gate.」のフロントエンドのリニューアル

このうち(1)と(2)は開発リソースの増強を目的とした施策です。(3)は、開発効率の向上を目的としています。

開発効率を上げるためのリニューアル

フロントエンドのリニューアルが開発効率を上げることにつながるのか疑問に思う人もいるかもしれませんので、理由を簡単に説明します。

現在の「Gate.」のフロントエンドは、コンポーネント化が不十分で、1つの機能のコードを変更すると同じページの別の機能に影響する作りになっています。巨大な一つのファイルで複数ページ間の遷移を切り替えるSPAになっているところもあり、変更の影響が広範囲に及びます。そのため、影響範囲の調査とテストに多くの工数がかかります。変更の影響範囲を限定できるようにリニューアルすることで、その工数を削減できます。

変更の影響範囲の限定のために、新フロントエンドはコンポーネント指向で設計しました。コンポーネント指向に関する一般的な解説は省略します。気になる人は検索してみてください。

新フロントエンドのコンポーネント設計

新フロントエンドのコンポーネント設計について簡単に紹介します。以下のルールを満たすような設計です。

コンポーネントの種類は、ウィジェットコンポーネントとレイアウトコンポーネントの2種類
ウィジェットコンポーネントは、単一の機能について「構成要素のレイアウト」「見た目」「インタラクション」をまとめたもの
ページとレイアウトコンポーネントが1対1に対応する
ウィジェットコンポーネントは、レイアウトコンポーネントの中に配置される
ウィジェットコンポーネントは、内部に別のウィジェットコンポーネントを含むことができる
ウィジェットコンポーネントは基本的にデータ・状態を持たず、レイアウトコンポーネントで管理する

▼新フロントエンドのコンポーネント（包含関係イメージ）

ルールは他にもいろいろとありますが、長くなるので割愛します。このようなコンポーネントの開発効率化のために、コンポーネント指向のフレームワークを採用することに決め、三大フレームワークAngular、React、Vue.jsについて比較しました。

Angular、React、Vue.jsの比較

現在の「Gate.」は、AngularJS1.4をベースに作られています。最新のAngularはバージョン7です。同じAngularという名前でも、バージョン1系とバージョン2以降とでは全く違います。そのため、同じAngularだからと安易に考えずに、他のフレームワークとゼロベースで比較しました。公式のドキュメントを読み比べ、各フレームワークに詳しい人からヒアリングしたり、サンプルコードを読んだり動かしたりしてみました。既存の「Gate.」の機能をリニューアルするという目的においては、どれを選択してもできることに変わりなく、技術的な観点からは差がありませんでした。技術的な比較の詳細は割愛しますが、気になる人は検索してみてください。

結論を述べると、今回は以下の2点が決め手となり、Angularを採用することに決めました。

(1) 開発コミュニティの規模、開発の活発さ
(2) エコシステムの安定性

まず(1)に関して、GitHubのコミット数の推移を比較しました（画像は、各GitHub上のページを本記事用に最近キャプチャしたものを掲載しています）。Vue.jsは、一時期の盛り上がりに比べ、最近は開発が落ち着いてきています。AngularとReactは、公開当初から最近まで活発に開発されています。このデータから、Vue.jsは中長期的にはメンテナンスされなくなるリスクがあると判断し、検討対象から外れました。

▼Angularコミット数推移

▼Reactコミット数推移

▼Vue.jsコミット数推移

次に(2)に関して、Angularは半年に1度のメジャーバージョンのリリースケジュールと、18ヶ月のサポート期間が決まっています。これはReactにはない特徴です。また、Angularは開発で必要になる主要な機能は標準で用意されているのに対し、Reactは複数のサードパーティのライブラリを組み合わせて使うのが一般的です。

サードパーティ製のライブラリを複数組み合わせて使用していると、そのうちメンテナンスされないライブラリが出てきたり、ライブラリを更新する際に他のライブラリの対応バージョンを揃えて検証する必要があったりと、中長期の運用を考えた場合にメンテナンスコストが上がることが懸念されます。当社の開発体制（エンジニアのスキルセットなど）からも、ReactよりもAngularの方が相対的にメンテナンスコストを抑えられると考え、Angularを採用することにしました。