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

by yammerjp

Slide 1

Slide 1 text

12 切り取り方を工夫してアプリケーションを漸進的に改善す中山慶祐 (やんまー) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022

Slide 2

Slide 2 text

13 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切取工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめアジェンダ

Slide 3

Slide 3 text

EC事業部 ECグループ CCXチーム 2021年新卒入社 14 自己紹介中山慶祐 Nakayama Keisuke ● 開発していサービス: カラーミーショップ ● あだ名: やんまー ● Twitter : @yammerjp ● 趣味: dotfilesの管理

Slide 4

Slide 4 text

15 切り取り方を工夫してアプリケーションを漸進的に改善す中山慶祐 (やんまー) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022

Slide 5

Slide 5 text

16 漸進的とは

Slide 6

Slide 6 text

17 “目的、理想などを急激でなく、順を追ってだんだんと実現しうとす傾向にあこと。 ⇔急進的。” (※) 漸進的とは漸進的とは (※) コトバンク精選版日本国語大辞典　https://kotobank.jp/word/漸進的-310204#:~:text=ぜんしん‐てき【漸進的,⇔急進的。

Slide 7

Slide 7 text

18 「順を追って」漸進的とは

Slide 8

Slide 8 text

19 「順を追って」「だんだんと」漸進的とは

Slide 9

Slide 9 text

20 なぜ漸進的なのか

Slide 10

Slide 10 text

21 17年続くWebサービスを改善す〜新卒2年目かみカラーミーショップ〜中山慶祐(やんまー) 新宮隆太(ほみん) / GMO PEPABO inc. 2022.09.24 PHP Conference Japan 2022

Slide 11

Slide 11 text

22 今か約1年前... なぜ漸進的なのか

Slide 12

Slide 12 text

23 新卒で入った私の気持ちなぜ漸進的なのか

Slide 13

Slide 13 text

24 でかい😅 なぜ漸進的なのか

Slide 14

Slide 14 text

25 サブシステムが協調して動いてい全容がわかないなぜ漸進的なのか

Slide 15

Slide 15 text

26 全部一気に変えのは大変なぜ漸進的なのか

Slide 16

Slide 16 text

27 実際は影響範囲を明かにして一部を変更すなぜ漸進的なのか

Slide 17

Slide 17 text

28 一度に一部分のみを変更すなぜ漸進的なのか

Slide 18

Slide 18 text

29 複数の部分を変えたいなば一度に一部分のみを変更すことを繰返すなぜ漸進的なのか

Slide 19

Slide 19 text

30 「順を追って」「だんだんと」漸進的とは

Slide 20

Slide 20 text

31 「順を追って」「だんだんと」漸進的漸進的とは

Slide 21

Slide 21 text

32 アプリケーションの一部を切り取る工夫

Slide 22

Slide 22 text

33 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切取工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめアジェンダ

Slide 23

Slide 23 text

34 モダンWebフロントエンド開発環境の漸進的な導入

Slide 24

Slide 24 text

35 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入

Slide 25

Slide 25 text

36 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化

Slide 26

Slide 26 text

37 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述

Slide 27

Slide 27 text

38 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい

Slide 28

Slide 28 text

39 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　😆宣言的UI

Slide 29

Slide 29 text

40 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　😆宣言的UI 　😆フレームワークに則って統一

Slide 30

Slide 30 text

41 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入

Slide 31

Slide 31 text

42 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 32

Slide 32 text

43 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース　🤔様々な開発者

Slide 33

Slide 33 text

44 管理画面サブシステムが課題をかかえていた... 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😢UIの手続き的記述の肥大化　😢画面ごとにバラバラな UI記述　😢コードベースが大きい　🤔様々な開発者　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース Vue.js + Custom Elements

Slide 34

Slide 34 text

Vue.js 45 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入宣言的UI 部分的に採用可能な Progressive Javascript Framework カラーミーショップでは複数のサブシステムで利用

Slide 35

Slide 35 text

Custom Elementsとは 46 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 HTMLにおいて独自の要素を定義でき仕様 JavaScriptで独自の要素に対す振舞いを実装でき

Slide 36

Slide 36 text

Custom Elementsとは 47 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入

Slide 37

Slide 37 text

Custom Elementsとは 48 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 // JavaScript class MyElement extends HTMLElement { /* ... */ } customElements.define('my-element', MyElement)

Slide 38

Slide 38 text

Custom Elementsとは 49 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入

Slide 39

Slide 39 text

Vue.js → 50 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 AlertBox.vue → DatePicker.vue →

Slide 40

Slide 40 text

Vue.js → Custom Elements 51 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 AlertBox.vue → DatePicker.vue →

Slide 41

Slide 41 text

Vue.js → Custom Elements 52 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 Web Component モード … Vue CLI(Vue.jsの開発ツール)に付随す機能 (※) Vue.jsコンポーネントそぞを Custom Elementsとして利用できうにビルド AlertBox.vue → DatePicker.vue → (※) Vue CLIのWeb ComponentモードはVue3に非対応。カラーミーショップではVue3&Viteを使ったビルドへ移行準備中

Slide 42

Slide 42 text

Vue CLIのWeb Componentモード 53 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 Appモード (default) 1箇所にマウント Web Componentモード Custom Elementsごとにマウント

Slide 43

Slide 43 text

Vue CLIのWeb Componentモード 54 一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 Appモード (default) 1箇所にマウント Web Componentモード Custom Elementsごとにマウント

Slide 44

Slide 44 text

55 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 45

Slide 45 text

56 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 Vue.js 　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 46

Slide 46 text

57 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 47

Slide 47 text

58 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 48

Slide 48 text

59 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟　😆漸進的な導入

Slide 49

Slide 49 text

60 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟　😆漸進的な導入

Slide 50

Slide 50 text

61 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … 独自のタグを記述するのみ　😆使いやすいインタフェース

Slide 51

Slide 51 text

62 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入

Slide 52

Slide 52 text

63 Custom Elementsへビルドす利点一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟 … 独自のタグを記述するのみ Custom Elements へビルド Vue.js 　😆宣言的UI 　😆フレームワークに則って統一　😆漸進的な導入　😆使いやすいインタフェース

Slide 53

Slide 53 text

64 まとめ一部を切取工夫: モダンWebフロントエンド開発環境の漸進的な導入モダンWebフロントエンド(※1)開発環境の漸進的な導入 - Custom ElementsとしてビルドさたVue.jsコンポーネント - 既存画面の一部置き換えや新規実装に利用 - 柔軟に組み合わせ Webフロントエンド領域において、画面の一部を柔軟に切出し、漸進的に改善でき (※1) この発表では宣言的UIに記述を用いた開発ができことを指しています (※) 本節の内容は「ショップ運営を支えプロダクトにフロントエンド開発環境を薄く導入してい - Pepabo Tech Portal」にて解説さています

Slide 54

Slide 54 text

65 Feature Toggleの活用と管理

Slide 55

Slide 55 text

66 Feature Toggleとは一部を切取工夫: Feature Toggleの活用と管理特定の機能の有効/無効状態をコード内の条件で切替え手法実装が存在してもトグルが無効な機能が動作しないう制御

Slide 56

Slide 56 text

67 Feature Toggleとは一部を切取工夫: Feature Toggleの活用と管理

Slide 57

Slide 57 text

68 Feature Toggleとは一部を切取工夫: Feature Toggleの活用と管理開発中の機能のうち完成した一部分を無効化した状態でレビューしてリリース既存機能への影響が無いことが常に確認された状態を維持でき →開発してい機能実装の一部を切取

Slide 58

Slide 58 text

69 トグルの変更とデプロイ一部を切取工夫: Feature Toggleの活用と管理先程のコードでは、トグルを変更すにはデプロイが必須

Slide 59

Slide 59 text

70 トグルの変更とデプロイ一部を切取工夫: Feature Toggleの活用と管理

Slide 60

Slide 60 text

71 トグルの変更とデプロイ一部を切取工夫: Feature Toggleの活用と管理先程のコードでは、トグルを変更すにはデプロイが必須どうしても多少の時間がかか (コードの変更、レビュー、CI、デプロイ) デプロイをせずともトグルの変更を可能にしたい

Slide 61

Slide 61 text

72 Feature Toggleの管理を外部化一部を切取工夫: Feature Toggleの活用と管理トグルの有効/無効をコード外で保持トグル状態がDBに保存さていて開発者が変更可能アプリケーションはトグルの状態を取得し、分岐 Database

Slide 62

Slide 62 text

73 Feature Toggleの管理を外部化一部を切取工夫: Feature Toggleの活用と管理 isEnabled(‘feature-name’)) { new_feature(); } else { old_feature(); }

Slide 63

Slide 63 text

74 Unleash(※) 一部を切取工夫: Feature Toggleの活用と管理 Feature Toggleを管理すサービスマネージドサービスとして利用でき OSSとして公開さてお、セルフホストでき (※) https://www.getunleash.io/

Slide 64

Slide 64 text

75 Unleash 一部を切取工夫: Feature Toggleの活用と管理管理を行うWebアプリケーション Feature Toggleの切替えをす管理画面 Feature Toggleの状態を取得でき API 各言語向けのSDK APIを通じてFeature Toggleの状態を取得 PHP向けもあ (※) (※) https://github.com/Unleash/unleash-client-php

Slide 65

Slide 65 text

76 Feature Toggleの管理を外部化すことのメリット一部を切取工夫: Feature Toggleの活用と管理デプロイをせずともトグルの変更が可能管理画面かトグルを変更でき ⇒デプロイとリリースを切離す Deploy Release

Slide 66

Slide 66 text

77 Feature Toggleの管理を外部化すことのメリット一部を切取工夫: Feature Toggleの活用と管理デプロイをせずともトグルの変更が可能管理画面かトグルを変更でき ⇒デプロイとリリースを切り離す Deploy Release

Slide 67

Slide 67 text

78 Feature Toggleの管理を外部化すことのメリット一部を切取工夫: Feature Toggleの活用と管理条件を満たした一部の場合のみ機能を有効にでき開発者のみが本番環境で利用できリリース割合を任意に変更でき　　など => 機能のリリース範囲を狭めことができ => 漸進的なリリースができ

Slide 68

Slide 68 text

79 Feature Toggleの管理を外部化すことのメリット一部を切取工夫: Feature Toggleの活用と管理条件を満たした一部の場合のみ機能を有効にでき開発者のみが本番環境で利用できリリース割合を任意に変更でき　　など => 機能のリリース範囲を狭めることができ => 漸進的なリリースができ

Slide 69

Slide 69 text

80 まとめ一部を切取工夫: Feature Toggleの活用と管理 Feature Toggle 機能の全容が完成していなくても完成した一部のみをリリース可能にな Feature Toggleの管理の外部化デプロイとリリースを切離すリリース範囲の一部を切出す (※) Feature Toggleの活用は「SUZURIのテレビCMとTシャツセールを乗切ためにやったこと - Pepabo Tech Portal」でも例が紹介さています

Slide 70

Slide 70 text

81 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切取工夫 - モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめアジェンダ

Slide 71

Slide 71 text

82 おわりに

Slide 72

Slide 72 text

83 まとめおわに一度に一部分のみを変更すことを繰返す、漸進的(※)な改善アプリケーションの一部を切取工夫 - モダンフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 (※) 漸進的 … 「順を追って」「だんだんと」

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

84 切り取り方を工夫してアプリケーションを漸進的に改善す