#RAKUSMeetup ©2023 RAKUS Co., Ltd. 22歳になる長寿サービスの UI刷新 ～密結合システムからViewを分離した苦労話～

#RAKUSMeetup 自己紹介 ● 名前：小西 佑 ● 所属：株式会社ラクス ● 業務：メールディーラー開発 ● 趣味：ゲーム ○ ゲームを絡めてプログラムの学習をすることも ○ (ほぼ欲しいものリストばかり・・・) 2

#RAKUSMeetup 製品紹介 ● メール共有・管理システム ● 2001年にリリースされた弊社最古参のサービス(今年で22年) 3

#RAKUSMeetup 4 メールディーラーのUIがい けてないじゃん だから、イマドキの デザインにしようよ 企画の人

#RAKUSMeetup メールディーラーのUIを刷新することに なった 5

#RAKUSMeetup 6 刷新内容 ● UIのデザイン・画面構成の変更 ○ 費用対効果の観点から「ユーザがよく使う機能」のみを対象とする ○ CSSのみではなく、他(HTML、JavaScript等)の修正も必要である ● UIの刷新によるユーザへのインパクトが大きいため、旧画面をし ばらく残すことになった ○ 旧画面のロジックを残しつつ、新UIのコードを実装する

#RAKUSMeetup 7 まじで？ 開発者

#RAKUSMeetup 現状無理 8

#RAKUSMeetup 9 理由 ● 以下のような問題がある ○ 機能が多く、コードも複雑なため、手動のテストだけで「旧画面と同機能で あること」を担保することが難しい ○ 自動テストがない ■ 作成するにしても、ビューロジックとビジネスロジックが混在しているため、　　 細かい仕様の確認が難しい ➢ コア機能の改修なのでクリティカルな不具合は許されない

#RAKUSMeetup どうすれば・・・ 10

#RAKUSMeetup 自動テストの作成が難しいのは ビューロジックとビジネスロジックが 混在しているため・・・ 11

#RAKUSMeetup そうだ！！ 12

#RAKUSMeetup ビューロジックとビジネスロジック を分離しよう 13

#RAKUSMeetup 分離作業内容 14 ● 作業概要 1. 旧画面のコードから機能一覧を作成する 2. IDEの機能を使用して、共通利用するロジックをメソッドに切 り出す 3. 切り出したメソッドのユニットテストを作成する 4. ビューロジックとビジネスロジックを分割する

#RAKUSMeetup 分離作業内容 15 1. 旧画面のコードから機能一覧を作成する ● 用途 ○ 実装・手動テストで使用する ● 目的 ○ 機能落ちや、想定外の不具合を防ぐため

#RAKUSMeetup 16 $isEdit = $_REQUEST['mode'] === 'edit'; if ($isEdit) { 　　if ($_REQUEST['input'] === 'radio') { 　　　　print "男"; 　　　　print "女"; 　　} else { 　　　　print ""; 　　} } if ($isEdit) { 　　$js = "alert('edit');"; } else { 　　$js = "alert('view');"; } print "{$js}"; if ($isEdit) { 　　$sum = 0; 　　foreach ($_REQUEST['count'] as $count) { 　　　　$sum += $count; 　　} } print "

{$count}

";

#RAKUSMeetup 17 サンプルコードで機能一覧を 作成すると・・・

#RAKUSMeetup 18 実装時に使用する コードを読み、その処理を 記載する

#RAKUSMeetup 分離作業内容 2. IDEの機能を使用して、共通利用するロジックをメソッドに切 り出す 3. 切り出したメソッドのユニットテストを作成する ○ 新UIの実装時に、切り出した箇所の修正が必要になった場合に、動作 を担保できるようになった ➢ 旧画面のロジックを「テスト可能な状態」にすることができた 19

#RAKUSMeetup 分離作業内容 4. ビューロジックとビジネスロジックを分割する ○ フレームワークを導入して、テンプレートエンジンに渡すように変更 ○ Laravel／Vue.jsを導入 ■ フロント：Vue.jsとblade ■ バックエンド：LaravelでADR実装 20

#RAKUSMeetup 分離作業内容 4. ビューロジックとビジネスロジックを分割する ○ 手順 ➀ 旧画面のコードをそのままLaravelへ移植 ➁ HTML作成のコードをコメントアウト ➂ 機能一覧に従って、新UIを実装 ➃ ③で作成した機能のActionクラスの自動テストを作成・実施 ■ 想定通りレスポンスパラメータが送信されているかを確認 ➄ 不要なコードを削除(コメントアウトしたコードなど) ➅ 機能一覧を使って、受入テストを実施(最終確認) 参照：フレームワークが存在しない時代からのレガシープロダクトを、Laravelに”載せる”実装戦略 21

#RAKUSMeetup 22 ビューロジックとビジネスロジック に分解すると・・・

#RAKUSMeetup 23 $isEdit = $_REQUEST['mode'] === 'edit'; if ($isEdit) { 　　if ($_REQUEST['input'] === 'radio') { 　　　　print "男"; 　　　　print "女"; 　　} else { 　　　　print ""; 　　} } if ($isEdit) { 　　$js = "alert('edit');"; } else { 　　$js = "alert('view');"; } print "{$js}"; if ($isEdit) { 　　$sum = 0; 　　foreach ($_REQUEST['count'] as $count) { 　　　　$sum += $count; 　　} } print "

{$count}

"; Javascript PHP HTML

#RAKUSMeetup 24 男 <input type='radio' id='female' name='gender' value='1'>女 @else <input type='text' id='input' name='text' value=''> @endif @endif <script src="/js/page_a.js" >

{{$count}}

const vm = { mounted() { if (params.isEdit) { alert('edit') } else { alert('view') } } } export default vm; ビューロジック page_a.js page_a.blade.php

#RAKUSMeetup 25 class PageAAction { protected $Domain; protected $Responder; public function __construct(Domain $Domain, Responder $Responder) { $this->Domain = $Domain; $this->Responder = $Responder; } public function __invoke(Request $request): Response { return $this->Responder->response($request, $this->Domain->get($request)); } } class PageAResponder { protected $response; protected $view; public function __construct(Response $response, ViewFactory $view) { $this->response = $response; $this->view = $view; } public function response(Request $request, $data): Response { $isEdit = $request->get('mode') === 'edit'; if ($isEdit) { 　　 $sum = 0; 　　 foreach ($request->get('count') as $count) { 　　　 　$sum += $count; 　　 } } $this->response->setContent( $this->view->make('page_a', [ 'isEdit' => ($isEdit) ? 'edit' : 'view', 'input' => $request->get('input'), 'count' => $sum, ]) ); return $this->response; } } ビジネスロジック PageAAction.php PageAResponder.php

#RAKUSMeetup 結果・・・ 26

#RAKUSMeetup 27 BEFORE

#RAKUSMeetup 28 AFTER

#RAKUSMeetup ビジネスロジックとビューロジックを 分離したことでUIを 新しくすることができた 29

#RAKUSMeetup 今回の結果 30 ● ビジネスロジックの自動テストを作成したので、今後の追加実装 や改修がしやすくなった ● クリティカルな不具合が少なかった ● 新UIへの移行の手法が確立できたので、他の機能でも活用でき る

#RAKUSMeetup 苦労した話 ● 機能一覧を作るのがしんどかった ○ 3000行超えのコード x 4機能分 を読んだ ○ 条件分岐が多かったり、不明な処理があり、どういう機能なのかを理解する のが大変だった ○ 作成した機能一覧が実装時に役にたったので、作ってよかった 31

#RAKUSMeetup 苦労した話 ● 旧画面のロジックを移植した際に、変数のスコープが変化した　た め、バグが発生した ○ グローバル変数を、Responderクラス内に移植したため、ローカル変数に 変化した ➢ その変数をglobalで呼び出している箇所の値が変化した ○ リリース前に見つかってよかった 32

#RAKUSMeetup 今後の展望 ● 今回の刷新で対象外だった画面を新UIに改修 ● 今回改修したロジックのリファクタリング ○ ADR実装に沿った実装にする ■ 現状、旧画面から移植したビジネスロジックはすべてResponderにある ➢ デグレ防止のために旧画面のロジックをそのまま移植したため ➢ 複雑なコードはほぼそのままの状態 ■ これを適切な箇所に実装する 33

#RAKUSMeetup 結論 34

#RAKUSMeetup ビュー・ビジネスロジック分離はいい 35

#RAKUSMeetup ご清聴ありがとうございました 36