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

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

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. 13 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 -

    モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめ アジェンダ
  2. EC事業部 ECグループ CCXチーム 2021年 新卒入社 14 自己紹介 中山 慶祐 Nakayama

    Keisuke • 開発してい サービス: カラーミーショップ • あだ名: やんまー • Twitter : @yammerjp • 趣味: dotfilesの管理
  3. 17 “目的、理想などを急激でなく、順を追ってだんだんと 実現し うとす 傾向にあ こと。 ⇔急進的。” (※) 漸進的とは 漸進的とは

    (※) コトバンク 精選版 日本国語大辞典 https://kotobank.jp/word/漸進的-310204#:~:text=ぜんしん‐てき【漸進的,⇔急進的。
  4. 33 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 -

    モダンWebフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 4. まとめ アジェンダ
  5. Custom Elementsとは 48 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 // JavaScript class

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

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

    → <colorme-alert-box></colorme-alert-box> DatePicker.vue → <colorme-date-picker></colorme-date-picker>
  8. 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を使ったビルドへ移行準備中
  9. 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>
  10. 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>
  11. 56 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 Vue.js  😆宣言的UI

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

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

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

    –> <my-element></my-element> … 独自のタグを記述するのみ  😆使いやすいインタフェース
  15. 63 Custom Elementsへビルドす 利点 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 … マウントの箇所や個数が柔軟

    … 独自のタグを記述するのみ Custom Elements へビルド Vue.js  😆宣言的UI  😆フレームワークに則って統一  😆漸進的な導入  😆使いやすいインタフェース
  16. 64 まとめ 一部を切 取 工夫: モダンWebフロントエンド開発環境の漸進的な導入 モダンWebフロントエンド(※1)開発環境の漸進的な導入 - Custom Elementsとしてビルドさ

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

    = false; // $isEnabledNewFeature = true; // 有効化する場合はコメントアウトを解除 if ($isEnabledNewFeature) { new_feature(); } else { old_feature(); }
  18. 68 Feature Toggleとは 一部を切 取 工夫: Feature Toggleの活用と管理 開発中の機能のうち完成した一部分を 無効化した状態でレビューしてリリース

    既存機能への影響が無いことが 常に確認された状態を維持でき →開発してい 機能実装の一部を切 取
  19. 70 トグルの変更とデプロイ 一部を切 取 工夫: Feature Toggleの活用と管理 <?php $isEnabledNewFeature =

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

    どうしても多少の時間がかか (コードの変更、レビュー、CI、デプロイ) デプロイをせずともトグルの変更を可能にしたい
  21. 72 Feature Toggleの管理を外部化 一部を切 取 工夫: Feature Toggleの活用と管理 トグルの有効/無効をコード外で保持 トグル状態がDBに保存さ

    ていて 開発者が変更可能 アプリケーションはトグルの状態を取得し、分岐 Database <?PHP <?PHP <?PHP
  22. 73 Feature Toggleの管理を外部化 一部を切 取 工夫: Feature Toggleの活用と管理 <?php if

    (new FeatureToggle()->isEnabled(‘feature-name’)) { new_feature(); } else { old_feature(); }
  23. 74 Unleash(※) 一部を切 取 工夫: Feature Toggleの活用と管理 Feature Toggleを管理す サービス

    マネージドサービスとして利用でき OSSとして公開さ てお 、セルフホストでき (※) https://www.getunleash.io/
  24. 75 Unleash 一部を切 取 工夫: Feature Toggleの活用と管理 管理を行うWebアプリケーション Feature Toggleの切

    替えをす 管理画面 Feature Toggleの状態を取得でき API 各言語向けのSDK APIを通じてFeature Toggleの状態を取得 PHP向けもあ (※) (※) https://github.com/Unleash/unleash-client-php
  25. 78 Feature Toggleの管理を外部化す ことのメリット 一部を切 取 工夫: Feature Toggleの活用と管理 条件を満たした一部の場合のみ機能を有効にでき

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

    開発者のみが本番環境で利用でき リリース割合を任意に変更でき   など => 機能のリリース範囲を狭めることができ => 漸進的なリリースができ
  27. 80 まとめ 一部を切 取 工夫: Feature Toggleの活用と管理 Feature Toggle 機能の全容が完成していなくても

    完成した一部のみをリリース可能にな Feature Toggleの管理の外部化 デプロイとリリースを切 離す リリース範囲の一部を切 出す (※) Feature Toggleの活用は「SUZURIのテレビCMとTシャツセールを乗 切 ためにやったこと - Pepabo Tech Portal」でも例が紹介さ ています
  28. 81 1. 漸進的とは 2. なぜ漸進的なのか 3. アプリケーションの一部を切 取 工夫 -

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

    - モダンフロントエンド開発環境の漸進的な導入 - Feature Toggleの活用と管理 (※) 漸進的 … 「順を追って」「だんだんと」
  30. 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