Takeshi Inoue

### プロジェクト概要 このプロジェクトではVue.jsで書かれた画像管理機能をReactにリプレイスした。 歯科治療の過程で撮影する口腔内の写真を管理しやすくするサービスである。 ### 人数 フロントエンドエンジニア3名(自分を含む)、バックエンドエンジニア2名、デザイナー1名、プロダクトオーナー 1名 フロントエンドを担当した。 ### 課題1 -コンポーネント化 【背景】 旧版は短納期の中で急ピッチで作成された経緯があり、１つのファイルに膨大な量のコードが詰め込まれ、見通しが悪いものだった。メンテナンスしやすく書き直すことが求められた。 【取り組み】 Reactの流儀に基づいて、UIをコンポーネントの階層構造に落とし込むことからはじめた。 例えばCardImageとCardActionButtonsからなるCardのコンポーネントを作成し、それをImageListPageの中でmapするといったように、役割の詰め込まれすぎたコードを、単一の責任を持つコンポーネントに切り分けていった。 【結果】 影響範囲が特定しやすく、機能追加・改修の手を入れやすい構成になった。 ### 課題2 -単体テスト 【背景】 既存の仕様を壊さないでリプレイスすることが難しかった。写真を組むレイアウトを変更する機能や、組んだ写真を単一のJPGに変換し出力する機能などロジックが多かった。 【取り組み】 開発された方に旧版の仕様について確認しながら、Jestでその仕様を満たすテストを書いた。そのテストが通るように実装していった。 【結果】 仕様がテストコードとしてまとまり、メンテナブルになった。バグは0というわけではなかったが、致命的ではないもの1つに留めることができ、堅実なアプリケーションがリリースできた。