アプリケーションエンジニアのyutakaです。 先日ランサーズのメッセージ機能をリニューアルしました。 ランサーズのメッセージ機能はリアルタイムのチャット形式で他のユーザーさんとコミュニケーションがとれる機能となっています。 リニューアルに伴って、フロントエンドの技術も大幅な変更を行い、ES6 + React.js + Reduxを導入しています。 今回はランサーズで新しく導入した技術と背景についてお話させて頂きます。 背景 以前からチャット機能のクライアントサイドプログラムには以下の問題がありました。 細かくモジュール化されていない どこでどんなイベント(処理)が発火しているのか分からないので処理が追いづらい 一つのファイルに3つの機能が存在しており、密結合な作りになっている HTMLの僅かな変更でもロジックに影響が出てしまう リニューアルの内容を考えると既存コードの改修は難しく、新たに