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(画面表示)の変更など役割の異なるコードも混在し、各処理のデータの流れが把握しにくくなります。

この先は会員の登録が必要です。今なら有料会員(月額プラン)が12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら