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

カラーミーショップのフリープランを提供開始。と開発の話

kumaki
December 09, 2021

 カラーミーショップのフリープランを提供開始。と開発の話

https://pepabo.connpass.com/event/231478/ で発表したものです

kumaki

December 09, 2021
Tweet

More Decks by kumaki

Other Decks in Technology

Transcript

  1. 2 自己紹介 EC事業部 Colorme Customer Experience Team 2014年 中途入社 牧野 弘幸

    Makino Hiroyuki 入社してから7年ずっとEC事業部。 外部サービスとの連携まわりの開発を主に担当。 ここ最近はショップオーナー(カラーミー契約者) の運用体 験と売上の向上を目指し奮闘中。 • 趣味 : 3Dアクションゲーム作り・xR・お絵かき • Twitter : @kumak1
  2. 8 サービスについて 「ネットでショップを開く」がゴールではない 売上 = 来訪数 × 客単価 × 購入率

    を最大化する ショップオーナー・サードパーティ・決済代行業者・関わる全ての人と成長 “ なめらかな成長を支援する”
  3. コードについて 22 改修前のコード Controller Model DB 現在プラン 利用可能な機能か? 選択フォームの切替 View

    Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller
  4. コードについて 23 改修前のコード Controller Model DB プラン情報 利用可能な機能か? 選択フォームの切替 View

    Controller Controller 分岐処理が画面の数だけ増えると・・ • 「どのプランがどの機能を使えるか」を確認しにくい • 「機能追加・変更時に漏れがないか」を確認・担保しにくい • テストコードが画面数分必要になる
  5. コードについて 24 • 機能・役割が集約されている • 追加・変更がしやすい • 確認しやすい仕組みを準備する • メンテナンスが容易

    • 10年、基本的な構造の改修はされなかった • 変更に耐える構造と覚悟が必要 • 変化を楽しめる • 未来も楽しんで作っていける、 なめらかな成長ができるコードを書こう コードを改修する
  6. Controller コードについて 30 改修後のコード Model DB View Controller Controller Service

    Repository 利用可能な機能か? 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易
  7. Controller コードについて 31 改修後のコード Model DB View Controller Controller Service

    Repository 利用可能な機能か? 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易 作業分担が容易に
  8. フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化

    ◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に 33 コードについて
  9. フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化

    ◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に  作業分担が容易に 34 コードについて
  10. 38 • 雑な交流場所を設ける • Google Meet で入退室自由なルームを常設 • チーム外の人と30分のお茶会(雑談会) •

    行動指針を明文化する • CCX Way • ドラッカー風エクササイズ • GitHub Issue Template チームの行動理念をつくる リモートでの開発体制について
  11. リモートでの開発体制について CCX Way • チームの行動指針を明文化 ◦ ユーザーの手間を最小限にしたか? ◦ 利己的なデザインにしていないか? ◦

    ユーザーのしたいことを優先する • チーム内では ◦ 機能の仕様策定の礎に • チーム外では ◦ 機能の仕様策定の礎に ▪ 作業依頼をうける際も ◦ どんなチームなのかを説明 39
  12. リモートでの開発体制について ドラッカー風エクササイズ • 自分は何が得意なのか? • どういうふうに仕事するか? • 自分が大切に思う価値は何か? • チームメンバーは自分にどんな成果を期待してい

    ると思うか?  質問に全員が答えることで、相互理解の促進と期待 のすりあわせという効果があり、特にプロジェクトの開 始時や新メンバーを迎えるときに効果的であると言わ れています https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 40
  13. まとめ 47 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる

    • 目的と期待を明文化する • 進むべきベクトルがぶれない ショップオーナー様 関わる全ての人、 プロダクトと共に、なめらかに成長する