はじめに
自社で開発しSaasサービスを展開している企業様からのご依頼になります。サービスをリリースしてから4年ほど経過し、コードが複雑に、また人員の入れ替えが行われる中で徐々に保守性の低下に懸念されていました。また実装した時期の違いで画面ごとに扱っているコンポーネントが違うためデザインの統一が行われていないことに懸念されていました。
弊社ではコンポーネントの整理と保守性のあるコードにしていくための支援をさせていただきました。
支援内容
ご支援させて頂くにあたってまずは仕様書から仕様の理解と、コードリーディングを行いながら全体がどのような構成になっているか確認しました。また現場で日々実装にあたっている開発者の方々にヒアリングをし懸念事項をまとめていきました。
その上で下記3点を実施いたしました。
- 用途や利用目的の似ているコンポーネントの集約
- Storybookの導入による一覧化と情報の共有
- 自動テストの導入
コンポーネントの集約
新しい機能を実装する際にコンポーネントを共通化するかは開発者個々人に任されていたため、開発者の方から見ると特殊なケースと思って共通化しなかったが、実は他の画面でも同じようなコンポーネントを作ってしまってるケースが散見されました。それらをデザイナーと協議しつつ共通化していきました。また、共通化したコンポーネントでもすでに使われなくなってしまったものが残っていたため削除しました。
Storybookの導入
ある程度共通化できたところでStorybookを導入しコンポーネントを一覧化し、またそれぞれのコンポーネントでどのような挙動が可能なのかをわかりやすくまとめました。それまでは既存のコンポーネントがどのようなものがあり、どう扱えるかは一部の開発者しか把握できていなかったものをプロダクトマネージャーやデザイナーもStorybookを見て確認できる体制ができました。
引用元：https://storybook.js.org/
自動テストの導入
それぞれのコンポーネントで最低限保証する挙動については自動テストを導入しました。自動テストが網羅されることで品質の向上やコンポーネントがどのような仕組みになっているかを開発者の方が理解しやすい状態となりました。
ご依頼者様のメリット
リリース後の修正頻度の低減
これまではコンポーネントの挙動をデザイナーから開発者に伝えても正しく伝わらないケースがあり、リリース後に修正するケースが発生していました。Storybook上でコンポーネントの挙動まで確認できるようになったことで認識の齟齬がこれまでより減りリリース後の修正依頼が減りました。
コンポーネント集約による保守性向上
これまでは同じようなコンポーネントを別々の開発者がそれぞれ１から作るケースがありましたが、集約し共通化することで無駄な開発を減らすことができました。また特定の画面で別のコンポーネントを使っていたため修正漏れが発生していたケースも共通化することで、そのようなミスを減らすこともできました。
品質向上
コンポーネントの自動テストを入れたことでシステム全体に影響がありそうなライブラリのアップデートもこれまでより少ない労力で対応できるようになりセキュリティ向上、品質向上につながりました。
日々の機能追加などの開発業務に追われ品質改善などに手が回らないような開発現場に弊社の技術支援がこれからもお役に立てればと考えております。