切り取り方を工夫してアプリケーションを漸進的に改善する / Incremental improvement by devising application change boundaries

17年続くWebサービスを改善する
〜新卒2年目からみるカラーミーショップ〜
(前半:Webアプリケーションエンジニア編)

アプリケーションの切り取り方を工夫することで「順を追って」「だんだんと」改善する行為と、そのためにカラーミーショップの開発チームが行っている工夫を紹介します。

PHP Conference Japan 2022 にて
2022/09/24 10:00〜11:00 に発表されたものです。

Transcript

1. 12 切り取り方を工夫して アプリケーションを 漸進的に改善す 中山慶祐 (やんまー) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022
2. 13 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめ アジェンダ
3. EC事業部 ECグループ CCXチーム 2021年 新卒入社 14 自己紹介 中山 慶祐 Nakayama Keisuke • 開発してい サービス: カラーミーショップ • あだ名: やんまー • Twitter : @yammerjp • 趣味: dotfilesの管理
4. 15 切り取り方を工夫して アプリケーションを 漸進的に改善す 中山慶祐 (やんまー) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022
5. 16 漸進的とは
6. 17 “目的、理想などを急激でなく、順を追ってだんだんと 実現し うとす 傾向にあ こと。 ⇔急進的。” (※) 漸進的とは 漸進的とは (※) コトバンク 精選版 日本国語大辞典　https://kotobank.jp/word/漸進的-310204#:~:text=ぜんしん‐てき【漸進的,⇔急進的。
7. 18 「順を追って」 漸進的とは
8. 19 「順を追って」 「だんだんと」 漸進的とは
9. 20 なぜ漸進的なのか
10. 21 17年続くWebサービスを改善す 〜新卒2年目か み カラーミーショップ〜 中山慶祐(やんまー) 新宮隆太(ほみ ん) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022
11. 22 今か 約1年前... なぜ漸進的なのか
12. 23 新卒で入った私の気持ち なぜ漸進的なのか
13. 24 でかい😅 なぜ漸進的なのか
14. 25 サブシステムが 協調して動いてい 全容がわか ない なぜ漸進的なのか
15. 26 全部一気に変え のは大変 なぜ漸進的なのか
16. 27 実際は 影響範囲を明 かにして 一部を変更す なぜ漸進的なのか
17. 28 一度に一部分のみを変更す なぜ漸進的なのか
18. 29 複数の部分を変えたいな ば 一度に一部分のみを変更す ことを繰 返す なぜ漸進的なのか
19. 30 「順を追って」 「だんだんと」 漸進的とは
20. 31 「順を追って」 「だんだんと」 漸進的 漸進的とは
21. 32 アプリケーションの一部を切り取る工夫
22. 33 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめ アジェンダ
23. 34 モダンWebフロントエンド開発環境の 漸進的な導入
24. 35 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入
25. 36 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化
26. 37 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述
27. 38 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい
28. 39 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　😆宣言的UI
29. 40 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　😆宣言的UI 　😆フレームワークに則って統一
30. 41 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入
31. 42 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
32. 43 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース 　🤔様々な開発者
33. 44 管理画面サブシステムが課題をかかえていた... 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😢UIの手続き的記述の肥大化 　😢画面ごとにバラバラな UI記述 　😢コードベースが大きい 　🤔様々な開発者 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース Vue.js + Custom Elements
34. Vue.js 45 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 宣言的UI 部分的に採用可能な Progressive Javascript Framework カラーミーショップでは 複数のサブシステムで利用
35. Custom Elementsとは 46 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 HTMLにおいて独自の要素を 定義でき 仕様 JavaScriptで独自の要素に対す 振 舞いを実装でき
36. Custom Elementsとは 47 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 <my-element>
37. Custom Elementsとは 48 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 // JavaScript class MyElement extends HTMLElement { /* ... */ } customElements.define('my-element', MyElement)
38. Custom Elementsとは 49 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 <!-- HTML –> <my-element></my-element> // JavaScript class MyElement extends HTMLElement { /* ... */ } customElements.define('my-element', MyElement)
39. Vue.js → 50 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 AlertBox.vue → DatePicker.vue →
40. Vue.js → Custom Elements 51 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 AlertBox.vue → <colorme-alert-box></colorme-alert-box> DatePicker.vue → <colorme-date-picker></colorme-date-picker>
41. Vue.js → Custom Elements 52 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 Web Component モード … Vue CLI(Vue.jsの開発ツール)に 付随す 機能 (※) Vue.jsコンポーネントそ ぞ を Custom Elementsとして 利用でき うにビルド AlertBox.vue → <colorme-alert-box></colorme-alert-box> DatePicker.vue → <colorme-date-picker></colorme-date-picker> (※) Vue CLIのWeb ComponentモードはVue3に非対応。カラーミーショップではVue3&Viteを使ったビルドへ移行準備中
42. Vue CLIのWeb Componentモード 53 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 Appモード (default) 1箇所にマウント Web Componentモード Custom Elementsごとにマウント <!-- HTML –> <div id="app"> </div> <!-- HTML –> <my-element-hoge> </my-element-hoge> <footer> <my-element-fuga> </my-element-fuga> </footer>
43. Vue CLIのWeb Componentモード 54 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 Appモード (default) 1箇所にマウント Web Componentモード Custom Elementsごとにマウント <!-- HTML –> <div id="app"> </div> <!-- HTML –> <my-element-hoge> </my-element-hoge> <footer> <my-element-fuga> </my-element-fuga> </footer>
44. 55 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
45. 56 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 Vue.js 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
46. 57 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
47. 58 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
48. 59 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 　😆漸進的な導入
49. 60 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 　😆漸進的な導入
50. 61 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … 独自のタグを記述するのみ 　😆使いやすいインタフェース
51. 62 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 <!-- HTML –> <my-element></my-element> … 独自のタグを記述するのみ 　😆使いやすいインタフェース
52. 63 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一 　😆漸進的な導入 　😆使いやすいインタフェース
53. 64 まとめ 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 モダンWebフロントエンド(※1)開発環境の漸進的な導入 - Custom Elementsとしてビルドさ たVue.jsコンポーネント - 既存画面の一部置き換えや新規実装に利用 - 柔軟に組み合わせ Webフロントエンド領域において、画面の一部を柔軟に切 出し、漸進的に改善でき (※1) この発表では宣言的UIに 記述を用いた開発ができ ことを指しています (※) 本節の内容は「ショップ運営を支え プロダクトにフロントエンド開発環境を薄く導入してい - Pepabo Tech Portal」にて解説さ ています
54. 65 Feature Toggleの活用と管理
55. 66 Feature Toggleとは 一部を切 取 工夫: Feature Toggleの活用と管理 特定の機能の有効/無効状態を コード内の条件で切 替え 手法 実装が存在してもトグルが無効な 機能が動作しない う制御
56. 67 Feature Toggleとは 一部を切 取 工夫: Feature Toggleの活用と管理 <?php $isEnabledNewFeature = false; // $isEnabledNewFeature = true; // 有効化する場合はコメントアウトを解除 if ($isEnabledNewFeature) { new_feature(); } else { old_feature(); }
57. 68 Feature Toggleとは 一部を切 取 工夫: Feature Toggleの活用と管理 開発中の機能のうち完成した一部分を 無効化した状態でレビューしてリリース 既存機能への影響が無いことが 常に確認された状態を維持でき →開発してい 機能実装の一部を切 取
58. 69 トグルの変更とデプロイ 一部を切 取 工夫: Feature Toggleの活用と管理 先程のコードでは、トグルを変更す には デプロイが必須
59. 70 トグルの変更とデプロイ 一部を切 取 工夫: Feature Toggleの活用と管理 <?php $isEnabledNewFeature = false; // $isEnabledNewFeature = true; // 有効化する場合はコメントアウトを解除 if ($isEnabledNewFeature) { new_feature(); } else { old_feature(); }
60. 71 トグルの変更とデプロイ 一部を切 取 工夫: Feature Toggleの活用と管理 先程のコードでは、トグルを変更す には デプロイが必須 どうしても多少の時間がかか (コードの変更、レビュー、CI、デプロイ) デプロイをせずともトグルの変更を可能にしたい
61. 72 Feature Toggleの管理を外部化 一部を切 取 工夫: Feature Toggleの活用と管理 トグルの有効/無効をコード外で保持 トグル状態がDBに保存さ ていて 開発者が変更可能 アプリケーションはトグルの状態を取得し、分岐 Database <?PHP <?PHP <?PHP
62. 73 Feature Toggleの管理を外部化 一部を切 取 工夫: Feature Toggleの活用と管理 <?php if (new FeatureToggle()->isEnabled(‘feature-name’)) { new_feature(); } else { old_feature(); }
63. 74 Unleash(※) 一部を切 取 工夫: Feature Toggleの活用と管理 Feature Toggleを管理す サービス マネージドサービスとして利用でき OSSとして公開さ てお 、セルフホストでき (※) https://www.getunleash.io/
64. 75 Unleash 一部を切 取 工夫: Feature Toggleの活用と管理 管理を行うWebアプリケーション Feature Toggleの切 替えをす 管理画面 Feature Toggleの状態を取得でき API 各言語向けのSDK APIを通じてFeature Toggleの状態を取得 PHP向けもあ (※) (※) https://github.com/Unleash/unleash-client-php
65. 76 Feature Toggleの管理を外部化す ことのメリット 一部を切 取 工夫: Feature Toggleの活用と管理 デプロイをせずともトグルの変更が可能 管理画面か トグルを変更でき ⇒デプロイとリリースを切 離す Deploy Release
66. 77 Feature Toggleの管理を外部化す ことのメリット 一部を切 取 工夫: Feature Toggleの活用と管理 デプロイをせずともトグルの変更が可能 管理画面か トグルを変更でき ⇒デプロイとリリースを切り離す Deploy Release
67. 78 Feature Toggleの管理を外部化す ことのメリット 一部を切 取 工夫: Feature Toggleの活用と管理 条件を満たした一部の場合のみ機能を有効にでき 開発者のみが本番環境で利用でき リリース割合を任意に変更でき 　　など => 機能のリリース範囲を狭め ことができ => 漸進的なリリースができ
68. 79 Feature Toggleの管理を外部化す ことのメリット 一部を切 取 工夫: Feature Toggleの活用と管理 条件を満たした一部の場合のみ機能を有効にでき 開発者のみが本番環境で利用でき リリース割合を任意に変更でき 　　など => 機能のリリース範囲を狭めることができ => 漸進的なリリースができ
69. 80 まとめ 一部を切 取 工夫: Feature Toggleの活用と管理 Feature Toggle 機能の全容が完成していなくても 完成した一部のみをリリース可能にな Feature Toggleの管理の外部化 デプロイとリリースを切 離す リリース範囲の一部を切 出す (※) Feature Toggleの活用は「SUZURIのテレビCMとTシャツセールを乗 切 ためにやったこと - Pepabo Tech Portal」でも例が紹介さ ています
70. 81 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめ アジェンダ
71. 82 おわりに
72. 83 まとめ おわ に 一度に一部分のみを変更す ことを繰 返す、漸進的(※)な改善 アプリケーションの一部を切 取 工夫 - モダンフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 (※) 漸進的 … 「順を追って」「だんだんと」
73. 85 参考資料 おわ に 漸進的とは 漸進的とは - コトバンク アプリケーションの一部を切 取 工夫 - モダンWebフロントエンド開発環境の漸進的な導入 カスタム要素の使用 - ウェブコンポーネント | MDN HTML Standard Build Targets | Vue CLI ショップ運営を支え プロダクトにフロントエンド開発環境を薄く導入してい - Pepabo Tech Portal アプリケーションの一部を切 取 工夫 - Feature Toggleの活用と管理 Feature Toggles (aka Feature Flags) Unleash: Open-Source Feature Management GitHub - Unleash/unleash-client-php: Unleash client SDK for PHP SUZURIのテレビCMとTシャツセールを乗 切 ためにやったこと - Pepabo Tech Portal
74. 84 切り取り方を工夫して アプリケーションを 漸進的に改善す