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