React+Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計

遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦(@eielh)さんと、エンジニア採用広報の高瀬和之(@guvalif)さんによる解説です。

React+Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計

クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。

しかし、設計を見直すことで技術的負債が生じます。技術的負債は新機能開発やバグ修正を難しくするため、可能な限り素早く返済することが理想ですが、すぐにすべてを返済するかは状況にもよります。返済には時間がかかり、その時間をプロダクトの価値を高めるために使うこともできるからです。

本稿では、長く継続している大規模なサービスが技術的負債と共存する実例として、Chatworkのフロントエンドを取り上げます。そして、UI構築における設計の見直しや、それに伴う変化とどのように向き合っているのかを紹介します。なお、筆者個人の見解をいくらか含んでいることにご留意ください。

長く開発と運用を続けるサービスが直面する変化

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録ボタンを押すと、利用規約プライバシーポリシーに同意したことになります。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く