20年以上のレガシーシステムで始めるリファクタリングの半歩 / RAKUS Meetup Refactoring

Transcript

1. #RAKUSMeetup ©2022 RAKUS Co., Ltd. 20年以上のレガシーシステム で始める リファクタリングの半歩 株式会社ラクス 四方 大輔
2. #RAKUSMeetup 自己紹介 • シカタ ダイスケ • 株式会社ラクス メールディーラー／開発チームリーダー • 多趣味おじさん 料理／酒(ハイボール、お茶系）／オーディオ／カメラ／ スポーツ観戦（サッカー、野球、競馬）／ランニング／ダーツ／コーヒー
3. #RAKUSMeetup いきなりですが… 技術的負債の返済、やってますか？ リファクタリング、やってますか？？
4. #RAKUSMeetup “レガシー”を言い訳にしてませんか？ うちのシステムは古いし… 手遅れでリファクタリングなんてできるわけない… 技術的負債とはズッ友！BFF！！ 技術的負債 技術的負債 レガシー システム
5. #RAKUSMeetup 今回のお話 リリースから20年以上のレガシーシステム メールディーラーでアーキテクチャを見直した事例を紹介します。 これによって、安全にリファクタリングや機能改修ができるようになり、 少しずつ技術的負債が返せる状態になりました。
6. #RAKUSMeetup 今回のお話 リリースから20年以上のレガシーシステム メールディーラーでアーキテクチャを見直した事例を紹介します。 これによって、安全にリファクタリングや機能改修ができるようになり、 少しずつ技術的負債が返せる状態になりました。 レガシーシステムでも、諦めないで。
7. #RAKUSMeetup メールディーラーとは？ クラウド型メール共有管理システム
8. #RAKUSMeetup メールディーラーとは？ 今年21歳のレガシーシステム • 社内最長老 • シェアナンバーワン • めちゃくちゃ多機能 • PHP4の頃から開発 • フルスクラッチで開発 • バックエンドはノンフレームワーク
9. #RAKUSMeetup メールディーラーとは？ 今年21歳のレガシーシステム やっぱりコアなところになればなるほど “レガシーシステム”あるあるが…
10. #RAKUSMeetup “レガシーシステム”あるある // javascriptが文字列で定義 $js = "<script>"; $js .= "alert(123);"; $js .= "</script>"; // DBアクセス $sql = "select * from hoge_table"; $result = $db->exec($sql); // 何かのロジック $hoge = commonFunction(); // 突然のprintでHTML出力 if ($hoge === "hoge") { print "<div>"; print "hogehoge"; print "</div>"; } else if ($hoge === "fuga") { print "<div>"; print "fugafuga"; print "</div>"; } else { print "<div>"; print "piyooo"; print "</div>"; } ビューロジックとビジネスロジックが混在
11. #RAKUSMeetup “レガシーシステム”あるある class ReceiveMail { // 受信したメールを解析処理 // DBに取り込む // 受信をトリガーに連動する処理が続く … // 神クラスの出来上がり } class SendMail { // 作成されたメールからメールデータ作成 // 送信をトリガーに連動する処理が続く … // 新規作成、返信、転送、送信予約 …などなどいろんなメール種別ごとの処理 // 神クラスの出来上がり } 上から下へ処理がベタ書きの神クラス
12. #RAKUSMeetup “レガシーシステム”あるある // 便利な関数がいっぱいの神クラス！！ // 気づけば1万行超え！！ class commonFunctions { function commonFunction1 () { // あるテーブルからデータ取得する便利な関数 } function commonFunction2 () { // いろんな画面に表示されるとある項目を描画する便利な関数 } function commonFunction3 () { // いろんな画面から呼ばれる条件分岐をまとめた便利な関数 } } 便利な神共通関数たちを従える神クラス
13. #RAKUSMeetup “レガシーシステム”あるある
14. #RAKUSMeetup UI刷新プロジェクト　～始動～ ある日、１つの要望が… UIが古いから 最近流行りのイケイケな感じに して欲しいんですよね～ メール一覧、閲覧、作成の 主機能画面の刷新お願いしますー！ インパクトが大きいので 新／旧デザイン並行運用の期間を ある程度想定してます。
15. #RAKUSMeetup メールディーラーが抱えていた問題 レガシーシステムだけに長年、継ぎ足し継ぎ足しの開発が行われていた そして、以下の問題が… • デグレード、考慮不足による不具合が多い • 手動テストで品質を担保するしかない • テストにリソースを大量投下していた
16. #RAKUSMeetup メールディーラーが抱えていた問題 つまり、 プロダクトコードの保守性低下によってテスト工数が肥大化している状況 継ぎ足し開発の末、大規模なUI刷新はとてもできる状態ではない • 品質を担保できる保証がない（莫大なテスト工数が必要） • アーキテクチャを見直さないとさらに継ぎ足しコードが増える ◦ ビューロジックとビジネスロジックが密結合状態 • さらに保守性を悪化させてしまう
17. #RAKUSMeetup つまり、こういうこと。 何も考えずにやると、各ロジックで新UIの分岐が増殖する // javascriptが文字列で定義 $js = "<script>"; $js .= "alert(123);"; $js .= "</script>"; // DBアクセス $sql = "select * from hoge_table"; $result = $db->exec($sql); // 何かのロジック $hoge = commonFunction(); // 突然のprintでHTML出力 if ($hoge === "hoge") { print "<div>"; print "hogehoge"; print "</div>"; } else if ($hoge === "fuga") { print "<div>"; print "fugafuga"; print "</div>"; } else { print "<div>"; print "piyooo"; print "</div>"; } ～～～ // 突然のprintでHTML出力 if ($hoge === "hoge") { if ($isNewUI) { print "<div>"; print "new ui is cool."; print "</div>"; } else { print "<div>"; print "hogehoge"; print "</div>"; } } else if ($hoge === "fuga") { print "<div>"; print "fugafuga"; print "</div>"; } else { if ($isNewUI) { print "new ui is cool."; } print "<div>"; print "piyooo"; print "</div>"; }
18. #RAKUSMeetup レイアウト修正できない状況… こんな状況で 安全に大規模レイアウト修正をリリースできるの？？
19. #RAKUSMeetup レイアウト修正できない状況… 安全にリリースするには保守性アップが不可欠 どうやったら保守性アップできる？？
20. #RAKUSMeetup キーワードは、 リファクタリングのための リファクタリング
21. #RAKUSMeetup 保守性を下げてる要因 is 何？ • グローバルスコープ・グローバル変数を多用 • ビジネスロジックとビューロジックが密結合状態 • 継ぎ足し継ぎ足しを繰り返したことでコードの可読性が著しく低下
22. #RAKUSMeetup 保守性アップの方針 1. 自動テスト導入を目的としたリファクタリング 2. フロントエンド／バックエンド（FE/BE)の分離を目的としたフレームワーク導入
23. #RAKUSMeetup 1.自動テスト導入を目的としたリファクタリング • グローバルスコープにあるロジックを極力変更を加えずクラスのメソッドに移植する • ユニットテストを作成する 移行対象のロジックを選定 最低限の動作確認 各アクションの クラス、メソッド作成 ユニットテスト作成 機械的にやる 余計な修正は しない
24. #RAKUSMeetup 1.自動テスト導入を目的としたリファクタリング 繰り返すことで、各アクションに対してクラス、メソッドができた状態になる ロジック自体は原型を保っている 移行対象のロジックを選定 最低限の動作確認 各アクションの クラス、メソッド作成 ユニットテスト作成 機械的にやる 余計な修正は しない
25. #RAKUSMeetup 1.自動テスト導入を目的としたリファクタリング 簡単にいうと… リファクタリングのための リファクタリング
26. #RAKUSMeetup 2. FE/BEの分離を目的としたフレームワーク導入 • 自動テストを盾にビューロジックとバックエンドロジックを分離してフレームワークに移行 ◦ アクションごとのクラスを新アーキテクチャへ移植する ◦ 新デザインを実装する ◦ 随時ユニットテストを動かし、デグレードがないことを確認する
27. #RAKUSMeetup これによって… • 自動テストを作りやすくなった • フロント・バックの分離によりロジックの可読性が向上 • 自動テストを盾に、機能改修が安全に行えるようになった
28. #RAKUSMeetup これによって… • 自動テストを作りやすくなった • フロント・バックの分離によりロジックの可読性が向上 • 自動テストを盾に、機能改修が安全に行えるようになった 保守性アップ！！
29. #RAKUSMeetup しかし… • 実際はロジックだけ見るとあまり中身は変わっていない • とにかく安全第一 • リファクタリングのためのリファクタリング ◦ 安全に機能改修できる状態にする ◦ 今後の改修に向けての下地やリファクタリングの余地を作る
30. #RAKUSMeetup いざ、リリース！！ 2022年3月末　メールディーラー UI刷新第一弾 リリース
31. #RAKUSMeetup いざ、リリース！！ 2022年3月末　メールディーラー UI刷新第一弾 リリース クリティカルな不具合はゼロ！！ (小さい不具合はいくつかあったけど…)
32. #RAKUSMeetup UI刷新を通して… • リファクタリングの手順が確立された ◦ リファクタリングのためのリファクタリング ◦ テスト容易性向上 • 安全に機能改修できるようになった
33. #RAKUSMeetup • UI刷新はまだまだ続く… （第二弾は10月リリース予定です） • もっとリファクタリングしたい欲が出てきた ◦ 今まで諦めていたリファクタリングにも挑戦できるようになった まだまだ、終わりじゃない 俺たちの戦いはこれからだ！！
34. #RAKUSMeetup まとめ リファクタリングのリファクタリングはいいぞ • いきなり大きい改修はできない • まずは小さなリファクタリングから少しずつ • とにかく安全第一で
35. #RAKUSMeetup まとめ リファクタリングのリファクタリングはいいぞ • いきなり大きい改修はできない • まずは小さなリファクタリングから少しずつ • とにかく安全第一で “レガシーシステム”でも、諦めないで。
36. #RAKUSMeetup ご清聴ありがとうございました。