$30 off During Our Annual Pro Sale. View Details »

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