FiNCは2016年4月1日に、新サービス「finc app web」をリリースしました。iOS/Android用アプリ「FiNC」のWebブラウザー版で、アプリ版とほぼ同等の機能が利用できます(画面1、画面2)。法人向けサービス「FiNCプラス」の会員向けに提供しています。
このfinc app webでも、第4回で取り上げたReact.jsを活用しています。React.jsだけでなく、このところ人気を集める「Redux」というライブラリも使っています。これらをどう使ったか、どんなところがうまくいって、どこに苦労したかをお話しましょう。
React.js/Reduxを導入した背景
finc app webは、プロジェクトの立ち上げ時から、多機能なアプリケーションになることが見えていました。ある程度、大きな規模のフロントエンド(ユーザー向けクライアント画面)の開発を想定する必要がありました。
- タイムライン
- 投稿(食事、睡眠、運動など)
- タスク
- ライフログ
- チャット
- 通知
- サーベイ
- トレンド
- マイデータ
サーバーサイドは、Webアプリケーション構築用のRubyのフレームワーク「Ruby on Rails」を基に作られています。同じRuby on Railsの規約に沿ってフロントエンドを開発すると、いずれ問題が起こることが想定されました。
まず、メンテナンスの問題です。JavaScriptファイルに、様々な状況に応じたプログラム(イベントハンドラ)が乱立することになります。Ajaxリクエスト、データ変更のロジック、View(画面表示)の変更など役割の異なるコードも混在し、各処理のデータの流れが把握しにくくなります。