microCMSの開発組織 - Deep dive into microCMS

by microCMS

Slide 1

Slide 1 text

株式会社microCMS 大西智也 microCMSの開発組織 Deep dive into microCMS

Slide 2

Slide 2 text

2 • ヤフー株式会社にて約10年エンジニアを経験 • メール、ヤフオク、PayPayフリマ、CTO室... • iOS、Webフロントエンド、バックエンド、機械学習...etc • 2022年5 月にmicroCMSにジョイン • 組織やバックエンドの課題を中心に業務 • エンジニアが楽しく、不安なく働ける環境作り • 趣味 • ゲーム、ドライブ、個人開発、Apple • Vision Pro買いました株式会社microCMS CTO 大西智也 @Tomoya_Onishi

Slide 3

Slide 3 text

2 • 技術スタックとAIツール • 技術的な課題 • チームと役割 • 開発フロー • 品質向上の取り組み • カルチャー、働き方 • 今後の課題 • 採用情報今日お話しすること

Slide 4

Slide 4 text

4 技術スタック

Slide 5

Slide 5 text

5 技術スタック（バックエンド） • プログラミング言語　 Go, Node.js • IaC 　 Terraform • コンピューティングサービス　 Lambda、ECS • データベース、ストレージ　 DynamoDB、S 3 • 検索　 OpenSearch • キャッシュ　 CloudFront • 保護、レートリミット　 AWS WAF, Cloudflare WAF • フロントエンドへの非同期イベントの通知　 Momento Topics • フィーチャーフラグ　 LaunchDarkly • 画像最適化　 Imgix • 決済　 Stripe • CRM 　 HubSpot

Slide 6

Slide 6 text

6 技術スタック（モニタリング、オブザーバビリティ） • メトリクス監視、ログ分析、ダッシュボード　 Grafana, CloudWatch Logs • 外形監視、E 2 E 　 Checkly、Playwright • エラートラッキング　 Sentry • 分散トレーシング　 OpenTelemetry, AWS X-Ray • MaC 　 Terraform

Slide 7

Slide 7 text

7 技術スタック（フロントエンド） • プログラミング言語　 TypeScript • UIライブラリ　 React • ビルドツール　 Vite • テスティング　 Vitest, React Testing Library • E 2 E 　 Playwright • フロントエンドへの非同期イベントの通知　 Momento Topics • フィーチャーフラグ　 LaunchDarkly • Lint, Format 　 ES-Lint, Prettier → Biome • その他　 Storybook 　 Figma 　 Hygen

Slide 8

Slide 8 text

8 AIツール

Slide 9

Slide 9 text

9 生産性を上げるためのAIツール • ChatGPT • ChatGPT Plusを全社員が使用可能 • 通常使用に加えて、Assistant APIでテストケースをレビューするQAエンジニアを作成 • Copilot • 全エンジニアが使用可能

Slide 10

Slide 10 text

1 0 生産性を上げるためのAIツール • CodeRabbit • AIコードレビュー • モノレポなのでディレクトリごとにプロンプトを分けて精度向上 • 障害の再発防止策としても活用 • AIの指摘を全て解決してから人間にレビュー依頼

Slide 11

Slide 11 text

1 1 ツールを使った自動化・仕組み化エンジニアリング領域に限らず、便利なもの・トレンドなものを積極的に導入し、「自動化・仕組み化」する文化が根付いている • ClickUp • Cleanshot X • Dify • Pipedream • Kintai bot • Backoffice bot • tl;dv • etc....

Slide 12

Slide 12 text

1 2 チームと役割

Slide 13

Slide 13 text

PM チームと役割ストリームアラインドチームプラットフォームチーム（バックエンド）プラットフォームチーム（フロントエンド）チームトポロジーの概念を拝借サポート • 顧客に価値を届ける • 新機能、改善 • フロントエンド & API • 非機能要件 • Code Health • 開発者体験 • インフラ, SRE, オブザーバビリティ • CI/CD • 非機能要件 • Code Health • 開発者体験 • CI/CD • E 2 Eテスト • JavaScript SDK

Slide 14

Slide 14 text

1 4 開発フロー

Slide 15

Slide 15 text

1 5 開発フロー企画実装 QA リリース総合テスト

Slide 16

Slide 16 text

1 6 開発フロー • PMが中心となって仕様を決定 • プラットフォームチームについてはそのチームのテックリード • 顧客からのフィードバック、経営、技術課題等々を材料に仕様・デザインを検討企画実装 QA リリース総合テスト

Slide 17

Slide 17 text

1 7 開発フロー • エンジニアにタスクをアサイン • 規模にもよるが基本的に1 人 • タスクの細分化やスケジュール管理は自身で行う • Design Doc • 考慮漏れ防止のタスクテンプレート • 毎日の朝会や進捗チェックはなし • 仕様に不備があったりより良いアイデアがあればPMとともに議論企画実装 QA リリース総合テスト

Slide 18

Slide 18 text

1 8 開発フロー • PMが受け入れテストを実施 • 問題があればエンジニアにフィードバック • Qaseというテスト管理ツールでテストを管理企画実装 QA リリース総合テスト

Slide 19

Slide 19 text

1 9 開発フロー • 毎週木曜日に全てのチームの変更を取り込んだ状態で変更分の受け入れテスト、リグレッションテストを実施 • E 2 Eテストを実施 • QaseとE 2 EテストはCI連携されており結果がQaseに反映される • 手動テストも自動テストも全てPassしたことを確認して完了企画実装 QA リリース総合テスト

Slide 20

Slide 20 text

2 0 開発フロー • 翌月曜日にリリース • フィーチャーフラグ等を使い、有料プラン、Enterprise向け環境へのリリースは遅らせることもある企画実装 QA リリース総合テスト

Slide 21

Slide 21 text

2 1 開発フローユーザにいいものを届けるために、どのフェーズでも手戻りし、スケジュールも延期する文化企画実装 QA リリース総合テスト

Slide 22

Slide 22 text

2 2 品質向上の取り組み

Slide 23

Slide 23 text

2 3 外形監視・ E 2 Eテストの強化 • 外形監視の強化 • Checkly • ステージング環境でも実施 • コンテンツAPI、マネジメントAPI、管理画面のページ • アクセスできるか、期待したレスポンスか • ブラウザーE 2 Eテストの強化 • Playwright • 管理画面のE 2 Eテストを強化 • Test Automation Daysにて実装、整理 • 月に2 日 • 自動テストや関連作業にフルコミット

Slide 24

Slide 24 text

2 4 オブザーバビリティの強化 • Grafana • メトリクスやエラーログの監視とアラート • ダッシュボード • ログ分析

Slide 25

Slide 25 text

2 5 インシデント対応フローの整備 • APIを提供するなどサービスの性質上、高いレベルの品質管理が必要 • Incident Command Systemに沿ったフローを整備 • Incident Commander (IC) • Operations Lead (OL) • Communication Lead (CL) • Datadogでチケット管理 • 起票と同時にSlackのチャンネルが自動作成され、全員が強制入室 • IC, OL, CLの役割を決め、hotfix • 再発防止策を検討、実施したらクローズ • 月に1度、チーム全体でインシデントを振り返る

Slide 26

Slide 26 text

2 6 QAフローの強化 • Qaseにてテストケースを管理 • 実装完了時に受け入れテストを実施 • リリース前の総合テストで再度実施 • GPTsがテストケースをレビュー

Slide 27

Slide 27 text

2 7 プロダクト仕様の体系的な管理 with Qase • Qaseでプロダクト仕様を体系的にまとめていく取り組みをトライ中 • PMとCTOがオーナー • 受け入れテストのテストケースを取捨選択、リファクタリングし「プロダクト仕様」セクションに移動 • 「microCMSとはこのようなサービス仕様である」が更新され続けていく • 案件ごとに仕様書を作り込んでもスナップショットでしかないのですぐに陳腐化する TRIAL

Slide 28

Slide 28 text

2 8 • 　プロダクト仕様の体系的な管理 • 最新の仕様の把握 • 「コードが仕様」の回避 • 企画スピードの低下 • エンジニアの疲弊 • 仕様管理をエンジニアに押し付けない文化 • AI、新入社員の学習 • 　 E 2 Eテストの効率的な実装 • 自動化されている、されていないを可視化 • 月 2 日の自動テスト整備デーにて、実装プロダクト仕様の体系的な管理 with Qase TRIAL 目的 ① 目的 ②

Slide 29

Slide 29 text

2 9 カルチャー・働き方

Slide 30

Slide 30 text

3 0 カルチャー・働き方 • フルリモート、非同期ワーク • 自動化、仕組み化 • ワークライフバランス

Slide 31

Slide 31 text

3 1 フルリモート、非同期ワーク • ハイブリッドなし • オフィスなし • オフ会を年2回開催 • 任意参加 • タスクの一元管理 • ClickUp • 誰が何をいつまでにが可視化 • ドキュメンテーション、ログ • 出社の場合は、立ち話等でコミュニケーションが活発化するかもしれないが、情報がオープンにならない • リモートでは突発的な会話等もログに残しやすくオープン

Slide 32

Slide 32 text

3 2 ClickUp

Slide 33

Slide 33 text

3 3 非同期ワーク • ミーティング前にNotionに議論ポイントをまとめて共有、事前にコメントしておき、議論に集中 • #ask-anythingチャンネルで雑に聞くとすぐに返事が来る • 込み入った話や雑に会話した方が早そう！という場合は気軽にハドルで会話する文化も共存 • 定例は最低限 • 課題や情報シェアを次の定例まで待つ必要はない • etc...

Slide 34

Slide 34 text

3 4 Notionに議論ポイントをまとめて共有、事前にコメント

Slide 35

Slide 35 text

3 5 自動化、仕組み化 • Slackでスタンプを押すと勤怠打刻、勤怠サマリをレポート • チーム間のタスク連携の自動化 • 開発チームのリリースタスクがクローズしたら、サクセスチームのブログ公開タスクが自動生成 • ブログ公開時にツイート文をAIで提案 • Qaseを活用したQAフローの仕組み化 • テストケースをChatGPTで作ったbotでレビュー • ClickUpでタスクを作って、作業してほしい人にアサイン • クローズされると依頼側に通知が来る • Slackでの文章不要 • エンジニアの書類選考 • 年末調整 • セキュリティアップデート 1つ1つの施策が良い悪いではなく、こういった取り組みを積極的にする文化がある

Slide 36

Slide 36 text

3 6 その結果... プラットフォームチームのとあるエンジニアストリームアラインドチームのとあるエンジニア

Slide 37

Slide 37 text

3 7 ワークライフバランス • フルリモート • フレックスタイム • コアタイム 10時〜14時 • アディショナル休暇 • 有給休暇を使い切ると + 10 日間休める • 100%近い消化率

Slide 38

Slide 38 text

3 8 課題

Slide 39

Slide 39 text

3 9 今後の課題 • 新機能の提供スピード • インフラやバックエンドに関わる非機能要件の改善 • DBや検索がボトルネックとなり高負荷時にサービスが不安定になる • Code Healthの改善 • バックエンド(Go)、フロントエンド(TypeScript)のアーキテクチャの改善 • キャッシュ戦略 • ログ戦略や分散トレーシング • より早い不具合解決を目指す • リードタイムの短縮 • 品質を担保したままデプロイ頻度を上げる戦略 • 開発者体験の改善 • etc....

Slide 40

Slide 40 text

4 0 採用情報

Slide 41

Slide 41 text

Terraform Go移植 Observability Code Health DynamoDB, OpenSearch 非機能要件の改善開発者体験の改善 Backup and Recovery Distributed Tracing Continuous Integration/ Continuous Delivery Unit Testing / End-to-End Testing Event-Driven Architecture Logging Strategy Test Size Message Queues Logging / Monitoring 4 1 プラットフォームチーム（バックエンド領域）

Slide 42

Slide 42 text

Frameworks and Libraries アクセシビリティ非機能要件の改善スタイリングとデザイン Vite TypeScript 開発者体験の改善 Caching Strategy Component Design Continuous Integration/ Continuous Delivery Unit Testing / End-to-End Testing Testing Tools Build Tools Performance Optimization React Event-Driven Architecture 4 2 プラットフォームチーム（フロントエンド領域）

Slide 43

Slide 43 text

ユーザに価値を届けるアクセシビリティ API 新機能と改善 Vite TypeScript Go, Node.js Caching Strategy Component Design Feature Flags Unit Testing / End-to-End Testing Testing Tools Build Tools Performance Optimization React Event-Driven Architecture 4 3 プロダクトエンジニア

Slide 44

Slide 44 text

テスト戦略アクセシビリティ End-to-End Testing Qase リードタイムの短縮受け入れテスト Synthetics Test Case Management Continuous Testing Feature Flags Unit Testing / End-to-End Testing Mock / Stub / Spy/ Fake / Dummy Regression Testing Exploratory Testing Load Testing / Stress Testing 4 4 QAエンジニア

Slide 45

Slide 45 text

4 5 こういった方に来てほしい！ • プロダクトに共感できる • 働き方に共感できる • オープンで優しいコミュニケーションができる • 自分でタスクを管理し、自立して業務できる https://jobs.microcms.co.jp/

Slide 46

Slide 46 text

4 6 ご清聴ありがとうございました