Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yammerjp
September 24, 2022

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

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

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

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

yammerjp

September 24, 2022
Tweet

More Decks by yammerjp

Other Decks in Programming

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