レガシープロダクトの画面部品をUIコンポーネント化 〜駆逐してやる！！このプロダクトから... 一匹残らず！！〜

Transcript

1. © RAKUS Co., Ltd. レガシープロダクトの画⾯部品をUIコンポーネント化 〜駆逐してやる！！このプロダクトから... ⼀匹残らず！！〜 PHPerKaigi 2025 株式会社ラクス  ⼭村 光平 2025/03/28 1
2. ⾃⼰紹介 2 • ⼭村光平 • ラクスの新卒3年⽬ • 2024年4⽉にメールディーラーから 楽楽販売へ担当プロダクトが変更 • 業務は実装とかテストとか • 趣味は旅⾏‧テニス‧映画鑑賞
3. © RAKUS Co., Ltd. 3 技術的負債を返してますか？ #PHPerKaigi 2025
4. © RAKUS Co., Ltd. 4 真摯に向き合ってますか？ #PHPerKaigi 2025
5. © RAKUS Co., Ltd. 5 ちゃんと理解してますか？ #PHPerKaigi 2025
6. © RAKUS Co., Ltd. 6 技術的負債とは #PHPerKaigi 2025
7. 技術的負債 • 将来的な⼿直しにかかる暗黙のコスト • ⾦銭的負債と同様に、返済されなければ「利⼦」が蓄積され 変更の実施が困難になる • プロジェクトを前進させるために必要な場合もある 7 Wikipediaより Wikipediaより引用：https://ja.wikipedia.org/wiki/%E6%8A%80%E8%A1%93%E7%9A%84%E8%B2%A0%E5%82%B5
8. 技術的負債 • 最初のコードを出荷することは、借⾦をするようなもの • 負債が返済されない場合、コードのために費やされた1分1秒が、 その負債の利息としてカウントされる • 実装の負債の負荷によって、エンジニアリング組織全体が停⽌してしまう 可能性がある - ウォード・カニンガム、1992年 8 Wikipediaより Wikipediaより引用：https://ja.wikipedia.org/wiki/%E6%8A%80%E8%A1%93%E7%9A%84%E8%B2%A0%E5%82%B5
9. © RAKUS Co., Ltd. 9 負債である以上返済しなくてはならない #PHPerKaigi 2025
10. © RAKUS Co., Ltd. 10 バックエンドのロジックだけでなく フロントエンドも例外ではない！ #PHPerKaigi 2025
11. © RAKUS Co., Ltd. 11 PHPで画⾯部品の UIコンポーネント化 #PHPerKaigi 2025
12. © RAKUS Co., Ltd. 12 なぜUIコンポーネント化？ #PHPerKaigi 2025
13. プロダクトがレガシー 13 • 誕⽣から15年以上経つプロダクト • クラウド型の販売管理システム ◦ 複雑な⾦額計算や請求‧売上計上を⾃動化 楽楽販売について
14. プロダクトがレガシー 14 • ⾔語：もちろんPHP • フレームワーク：Zend Framework • フロントエンド：ネイティブのJavaScriptとjQuery、フレームワークなし 技術スタック • 誕⽣から15年以上経つプロダクト • クラウド型の販売管理システム ◦ 複雑な⾦額計算や請求‧売上計上を⾃動化 楽楽販売について
15. コピペの蔓延、再利⽤性が低い • 15年以上に渡り、静的HTMLの画⾯部品コードがコピペされ続けている • ⾔わずもがな共通化は⾏われていない • 結果として、1画⾯あたりのコード量が巨⼤ • 新画⾯を作成するたび、PhpStormが親の仇の如く「Duplicated Code」を指摘 してくる 15 背景 • コードの可読性を改善し、容易にメンテナンス可能なコード構造を実現する 課題
16. © RAKUS Co., Ltd. 16 PHPで画⾯部品の UIコンポーネント化 #PHPerKaigi 2025
17. 本セッションについて • UIコンポーネント化のメリット • PHPでコンポーネント化をどのように実装したか • コンポーネントを活⽤してもらうための施策 17 話すこと
18. 本セッションについて • UIコンポーネント化のメリット • PHPでコンポーネント化をどのように実装したか • コンポーネントを活⽤してもらうための施策 18 話すこと • 技術的負債を解消したい⼈（多分全PHPer） • レガシープロダクトから脱却したい⼈（多分ほぼ全PHPer） • フロントエンドのフレームワークを利⽤していない⼈ • 画⾯部品のUIコンポーネント化に興味がある⼈ 対象者
19. © RAKUS Co., Ltd. 19 UIコンポーネント化とは？ #PHPerKaigi 2025
20. UIコンポーネント化とは • 画⾯部品を独⽴したモジュールとして切り出す • 各部品の機能やスタイルをひとまとめにして共通化 • 他の画⾯でも簡単に利⽤できるように設計 20 ※画⾯部品：画⾯上に配置される具体的な要素（ボタン、ヘッダー、フッターなど）
21. • 可読性の向上 • メンテナンス性の向上 • 再利⽤性の向上 • テストやバグ修正の効率化 UIコンポーネント化のメリット 21
22. © RAKUS Co., Ltd. 22 ゴール #PHPerKaigi 2025
23. ゴール 23 • コピペ⽂化の脱却 ◦ 今後コピペによるコードを駆逐すること • 共通UIコンポーネントの整備 ◦ シンプルな記述で画⾯部品を表⽰でき、複数画⾯で再利⽤可能な 共通コンポーネントを作成する • UIコンポーネントの活⽤推進 ◦ コードの再利⽤を促進する施策を実施し、活⽤を定着させる
24. © RAKUS Co., Ltd. 24 前提 #PHPerKaigi 2025
25. 前提 25 • フレームワークは使わない
26. 前提 26 • フレームワークは使わない ◦ フレームワークは⽢え
27. 前提 27 • フレームワークは使わない使えない ◦ フレームワークは⽢え
28. 前提 28 • フレームワークは使わない使えない ◦ フレームワークは⽢え ▪ ReactとかVueはUIに変更を加える案件が控えているため無理......
29. 前提 29 • フレームワークは使わない使えない ◦ フレームワークは⽢え ▪ ReactとかVueはUIに変更を加える案件が控えているため無理...... ▪ Laravelとかも検討してるけどすぐには無理......
30. 前提 30 • フレームワークは使わない使えない ◦ フレームワークは⽢え ▪ ReactとかVueはUIに変更を加える案件が控えているため無理...... ▪ Laravelとかも検討してるけどすぐには無理...... • PHPで画⾯部品をコンポーネント化
31. © RAKUS Co., Ltd. 31 ⽅針 #PHPerKaigi 2025
32. ⽅針 32 1. 画⾯を部品ごとに分解し、各部品のクラスを作成 2. 各画⾯のパーツをファイルに切り出してテンプレート化 3. JavaScriptの利⽤がある場合は汎⽤化して、個別ファイルに切り離す
33. © RAKUS Co., Ltd. 33 結果 #PHPerKaigi 2025
34. 管理者設定画⾯のタブメニューをコンポーネント化 34 これ →
35. 35 Before（735⾏） タブメニューを表⽰するためのコード
36. 36 TabPanel::show(new Tabs($tabs), $tabMenuList, $this->form?->getTabCategory()); After（1⾏） 表⽰コードはたったの１⾏に！！ 管理者設定画⾯のhtml全体の⾏数は805⾏ → 496⾏に削減！ タブメニューを表⽰するためのコード
37. © RAKUS Co., Ltd. 37 実装の詳細 #PHPerKaigi 2025
38. 画⾯部品を分解し、各部品のクラスを作成 38
39. 画⾯部品を分解し、各部品のクラスを作成 39 Tabsクラス
40. 画⾯部品を分解し、各部品のクラスを作成 40 Tabsクラス Tabクラス
41. 画⾯部品を分解し、各部品のクラスを作成 41 ListGroup クラス
42. 画⾯部品を分解し、各部品のクラスを作成 42 ListGroup クラス LinkListItemクラス
43. 画⾯部品を分解し、各部品のクラスを作成 43 TabPanel クラス
44. 44 クラス設計 TabPanelオブジェクトにTabsとTabMenuList をプロパティで持たせる ※TabMenuListにしているのはListGroup以外 も注⼊されることもあるため TabPanelクラス /** * @param Tabs $tabs * @param array<string, Component> $tabMenuList * @param string|null $defaultActiveId */ public function __construct( public Tabs $tabs, public array $tabMenuList, public ?string $defaultActiveId = null, ) { parent::__construct(); } TabPanelクラスのコンストラクタ Tabsクラス ListGroupクラス
45. 45 クラス設計 表⽰するメソッド Tabsクラス /** * タブパネルを表示する * * @param Tabs $tabs * @param array<string, Component> $tabMenuList * @param string|null $defaultActiveId */ public static function show( Tabs $tabs, array $tabMenuList, ?string $defaultActiveId = null ): void { echo ( new self($tabs, $tabMenuList, $defaultActiveId) )->render(); } TabPanelオブジェクトにTabsとTabMenuList をプロパティで持たせる ※TabMenuListにしているのはListGroup以外 も注⼊されることもあるため TabPanelクラス
46. クラス構成イメージ Tabs Tab Tab Tab Tab
47. クラス構成イメージ 47 ListGroup LinkListItem LinkListItem LinkListItem
48. クラス構成イメージ 48 Tabs Tab ListGroup LinkListItem Tab Tab Tab LinkListItem LinkListItem TabPanel
49. 各パーツをファイルに切り出して、テンプレート化 49 <section> <?php // タブを表示 ?> <?php echo $this->tabs->render() ?> <div> <div> <div> <?php foreach ($this->tabs->tabList as $tab) : ?> <div id="<?php $this->write($tab->id); ?>"> <?php // タブメニューを表示 ?> <?php echo $this->tabMenuList[$tab->id]->render(); ?> </div> <?php endforeach; ?> </div> </div> </div> </section> TabPanel.inc • HTMLをファイルに切り出し
50. 各パーツをファイルに切り出して、テンプレート化 50 <section> <?php // タブを表示 ?> <?php echo $this->tabs->render() ?> <div> <div> <div> <?php foreach ($this->tabs->tabList as $tab) : ?> <div id="<?php $this->write($tab->id); ?>"> <?php // タブメニューを表示 ?> <?php echo $this->tabMenuList[$tab->id]->render(); ?> </div> <?php endforeach; ?> </div> </div> </div> </section> TabPanel.inc • HTMLをincファイルに切り出し • ⼦コンポーネントを利⽤できる 箇所は適宜置き換え Tabsクラス ListGroupクラス
51. JavaScriptを汎⽤化してファイルに切り出し 51 function tab_action(activeTabId) { $target = $("#" + activeTabId); $targetTab = $("#t_" + activeTabId); $target.parent().children().hide(); $target.css('display','').show(); $targetTab.parent().children().not(this).removeCl ass('current'); $targetTab.addClass('current'); } tab-panel.js • TabPanelクラスで⽣成された タブパネルに適⽤される
52. © RAKUS Co., Ltd. 52 プロダクト全体ではどれぐらいの効果が期待できる？ #PHPerKaigi 2025
53. © RAKUS Co., Ltd. 53 パンくずリストのコンポーネントで検証！ #PHPerKaigi 2025
54. パンくずリストのコンポーネントで検証 • 楽楽販売で利⽤されているパンくずリスト数：351箇所 • 前提：表⽰されるパンくずリストは平均３とする • 元のパンくずリスト表⽰のためのコード⾏数：22⾏ • コンポーネント化したパンくずリストの表⽰のためのコード⾏数：わずか5⾏ 54 Breadcrumbs::show([ new Crumb(title: '管理者設定（サンプル） ', url: {url}), new Crumb(title: 'コンポーネント一覧の設定 ', url: {url}), new Crumb(title: 'コンポーネント一覧の設定の設定 '), ]);
55. 結果 55 5967⾏の削減！！ ※ 削減⾏数 * パンくずリスト数 htmlファイル全体の3%に相当
56. © RAKUS Co., Ltd. 56 あとは使うだけ #PHPerKaigi 2025
57. © RAKUS Co., Ltd. 57 そもそもなぜ⼈はコピペをしてしまうのか #PHPerKaigi 2025
58. • コンポーネントの存在を知らない なぜ⼈はコピペをしてしまうのか 58
59. • コンポーネントの存在を知らない • コンポーネントが探しにくい なぜ⼈はコピペをしてしまうのか 59
60. • コンポーネントの存在を知らない • コンポーネントが探しにくい • コンポーネントの使い⽅が分かりづらい なぜ⼈はコピペをしてしまうのか 60
61. • コンポーネントの存在を知らない • コンポーネントが探しにくい • コンポーネントの使い⽅が分かりづらい • ⽂化 なぜ⼈はコピペをしてしまうのか 61
62. • コンポーネントの存在を知らない • コンポーネントが探しにくい • コンポーネントの使い⽅が分かりづらい • ⽂化 なぜ⼈はコピペをしてしまうのか 62
63. © RAKUS Co., Ltd. 63 コンポーネントを⼀覧で確認できる画⾯を作ろう #PHPerKaigi 2025
64. コンポーネント⼀覧画⾯の設計 • コンポーネントに何があるか把握できる • イメージはBootstrap • サイドバーでより探しやすく 64 • 各コンポーネントのサンプルコード表⽰ 使い⽅が分かりづらい 探しにくい Bootstrapより引用：https://getbootstrap.jp/docs/5.3/components/navs-tabs
65. 完成した⼀覧画⾯ 65
66. 完成した⼀覧画⾯ 66 いい感じ！！
67. • コンポーネントの存在を知らない ✅ コンポーネントが探しにくい ✅ コンポーネントの使い⽅が分かりづらい • ⽂化 なぜ⼈はコピペをしてしまうのか 67
68. • コンポーネントの存在を知らない ✅ コンポーネントが探しにくい ✅ コンポーネントの使い⽅が分かりづらい • ⽂化 なぜ⼈はコピペをしてしまうのか 68 ⇒ ガイドラインに追加
69. ✅ コンポーネントの存在を知らない ✅ コンポーネントが探しにくい ✅ コンポーネントの使い⽅が分かりづらい ✅ ⽂化 なぜ⼈はコピペをしてしまうのか 69 🎉
70. 既存画⾯のHTMLを画⾯部品に置き換え 今後の展望 • 今後コピペコードが増えることはなくなる • 既存の画⾯は据え置きされている • 既存画⾯の画⾯部品をコンポーネント化 70 • 今回全ての画⾯部品をパーツ化できたわけではない • 随時コンポーネント化していく UIコンポーネントの拡充
71. PHPでもコンポーネントは作成できる まとめ • フレームワークはなくてもできる！ • コードの削減、共通化が可能 • 親コンポーネントに⼦コンポーネントを⼊れ⼦構造で設計すると良き 71 • 可読性の向上 • メンテナンス性の向上 • 再利⽤性の向上 • テストやバグ修正の効率化 コンポーネント化はメリットいっぱい