ID:65067さん

2022年2月から5月の約3ヶ月に渡ってプロジェクトに携わりました。

プロジェクトの概要

Ruby製のテンプレートエンジンで Slim で書かれていたレガシーな画面を Vue.js にリニューアルしました。

背景と目的

Carely というサービスは 10 年以上続くサービスでもともと Ruby on Rails で書かれていたものでした。
フロント画面は当時から Ruby製のテンプレートエンジンである Slim が採用されており今でも Slim で表示されている画面がいくつかあります。
Carely のフロントエンドの表示は主にメイン画面とサイドメニュー画面に分かれています。
現在では、そのメイン画面は Vue.js を使って表示しているのですが、昔からあるサイドメニューの画面はSlim で書かかれたままでそのレガシーなコードがあるため他の作業に支障が出てしまう問題がありました。
例えば、メイン画面では Rails は API サーバーとして機能しているのでバックエンドとしての色味が強くデータを返すだけに徹しているのですが、サイドメニューでは Rails からそのまま変数を渡していたりしています。そのせいで特にユーザーのログイン情報などのデータベースのアクセスが2重になってしまっていました。
目的としては、サイドメニューも Vue.js に移行しメイン画面とサイドメニューを一元管理することで不要なデータ取得をなくすことやフロントエンドとバックエンドの責務を明確にするためフロントは Vue.js で SPA 化することでした。

チーム構成、担当した役割

チームの構成は、デザイナー1名・バックエンド2名・フロントエンド2名でプロジェクトを進めました。
私はフロントエンドのメンバーとして参加しました。
もともとこのプロジェクトは会社の中でやることとして決まってはいなかったもので自分が日々の開発の中で課題に感じプロジェクトとして申請をしたり率先してメンバーを集めました。発見した課題に対して自ら行動し成し退ける姿勢は、半年に1回ある会社の表彰式で評価もしていただくことができました。

課題と工夫した点

サイドメニュー画面は、どの画面でも表示されているもので既存の機能を壊すことなく今までと全く同じ挙動をする保証が求められていました。
現状の仕様をきちんと理解し Slim で書かれているコードを読み解き仕様を完全にまとめる必要がありました。
メンバーと手分けをして各ボタンやリンクの挙動、表示条件などの洗い出しを正確に行いドキュメントやテスト項目としてまとめ実装に移りました。
実装する際はそのテスト項目を網羅できるようにするためのコーディングに専念できました。

成果

このプロジェクトによりサイドメニューとメイン画面でレンダリングが起きていましたが大枠は1つのフロント画面として表示することができ開発環境が整備されたり、二重にバックエンドからデータを取得していた箇所も１回のデータ取得に収めることができるようになりました。また SPA として機能することでバックエンドとフロントエンドとの責務をきちんと分けることも可能になりました。