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