切り取り方を工夫してアプリケーションを漸進的に改善する / 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 16
   漸進的とは
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 20
   なぜ漸進的なのか
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. 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を使ったビルドへ移行準備中
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. 65
    Feature Toggleの活用と管理
    

    View Slide

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

    View Slide

56. 67
    Feature Toggleとは
    一部を切 取 工夫: Feature Toggleの活用と管理
    $isEnabledNewFeature = false;
    // $isEnabledNewFeature = true; // 有効化する場合はコメントアウトを解除
    if ($isEnabledNewFeature) {
    new_feature();
    } else {
    old_feature();
    }
    

    View Slide

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

    View Slide

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

    View Slide

59. 70
    トグルの変更とデプロイ
    一部を切 取 工夫: Feature Toggleの活用と管理
    $isEnabledNewFeature = false;
    // $isEnabledNewFeature = true; // 有効化する場合はコメントアウトを解除
    if ($isEnabledNewFeature) {
    new_feature();
    } else {
    old_feature();
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. 82
    おわりに
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide