microCMSの開発組織 - Deep dive into microCMS

microCMS MeetUp 2024で発表したスライドです。
https://microcms.connpass.com/event/316541/

Transcript

1. 株式会社microCMS 大西 智也 microCMSの開発組織 Deep dive into microCMS
2. 2 • ヤフー株式会社にて約10年エンジニアを経験 • メール、ヤフオク、PayPayフリマ、CTO室... • iOS、Webフロントエンド、バックエンド、機械学習...etc • 2022年5 月 にmicroCMSにジョイン • 組織やバックエンドの課題を中 心 に業務 • エンジニアが楽しく、不安なく働ける環境作り • 趣味 • ゲーム、ドライブ、個 人 開発、Apple • Vision Pro買いました 株式会社microCMS CTO 大西 智也 @Tomoya_Onishi
3. 2 • 技術スタックとAIツール • 技術的な課題 • チームと役割 • 開発フロー • 品質向上の取り組み • カルチャー、働き 方 • 今後の課題 • 採 用 情報 今 日 お話しすること
4. 4 技術スタック
5. 5 技術スタック（バックエンド） • プログラミング 言 語 　 Go, Node.js • IaC 　 Terraform • コンピューティングサービス 　 Lambda、ECS • データベース、ストレージ 　 DynamoDB、S 3 • 検索 　 OpenSearch • キャッシュ 　 CloudFront • 保護、レートリミット 　 AWS WAF, Cloudflare WAF • フロントエンドへの 非 同期イベントの通知 　 Momento Topics • フィーチャーフラグ 　 LaunchDarkly • 画像最適化 　 Imgix • 決済 　 Stripe • CRM 　 HubSpot
6. 6 技術スタック（モニタリング、オブザーバビリティ） • メトリクス監視、ログ分析、ダッシュボード 　 Grafana, CloudWatch Logs • 外形監視、E 2 E 　 Checkly、Playwright • エラートラッキング 　 Sentry • 分散トレーシング 　 OpenTelemetry, AWS X-Ray • MaC 　 Terraform
7. 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
8. 8 AIツール
9. 9 生 産性を上げるためのAIツール • ChatGPT • ChatGPT Plusを全社員が使 用 可能 • 通常使 用 に加えて、Assistant APIでテストケースをレビューするQAエンジニアを作成 • Copilot • 全エンジニアが使 用 可能
10. 1 0 生 産性を上げるためのAIツール • CodeRabbit • AIコードレビュー • モノレポなのでディレクトリごとにプ ロンプトを分けて精度向上 • 障害の再発防 止 策としても活 用 • AIの指摘を全て解決してから 人 間に レビュー依頼
11. 1 1 ツールを使った 自 動化 ・ 仕組み化 エンジニアリング領域に限らず、 便利なもの ・ トレンドなものを積極的に導 入 し、 「 自 動化 ・ 仕組み化」する 文 化が根付いている • ClickUp • Cleanshot X • Dify • Pipedream • Kintai bot • Backoffice bot • tl;dv • etc....
12. 1 2 チームと役割
13. PM チームと役割 ストリームアラインドチーム プラットフォームチーム（バックエンド） プラットフォームチーム（フロントエンド） チームトポロジーの概念を拝借 サポート • 顧客に価値を届ける • 新機能、改善 • フロントエンド & API • 非 機能要件 • Code Health • 開発者体験 • インフラ, SRE, オブザーバビリティ • CI/CD • 非 機能要件 • Code Health • 開発者体験 • CI/CD • E 2 Eテスト • JavaScript SDK
14. 1 4 開発フロー
15. 1 5 開発フロー 企画 実装 QA リリース 総合テスト
16. 1 6 開発フロー • PMが中 心 となって仕様を決定 • プラットフォームチームについてはそのチームのテックリード • 顧客からのフィードバック、経営、技術課題等々を材料に仕様 ・ デザインを検討 企画 実装 QA リリース 総合テスト
17. 1 7 開発フロー • エンジニアにタスクをアサイン • 規模にもよるが基本的に1 人 • タスクの細分化やスケジュール管理は 自身 で 行 う • Design Doc • 考慮漏れ防 止 のタスクテンプレート • 毎 日 の朝会や進捗チェックはなし • 仕様に不備があったりより良いアイデアがあればPMとともに議論 企画 実装 QA リリース 総合テスト
18. 1 8 開発フロー • PMが受け 入 れテストを実施 • 問題があればエンジニアにフィードバック • Qaseというテスト管理ツールでテストを管理 企画 実装 QA リリース 総合テスト
19. 1 9 開発フロー • 毎週 木 曜 日 に全てのチームの変更を取り込んだ状態で変更分の受け 入 れテスト、リグレッションテストを実施 • E 2 Eテストを実施 • QaseとE 2 EテストはCI連携されており結果がQaseに反映される • 手 動テストも 自 動テストも全てPassしたことを確認して完了 企画 実装 QA リリース 総合テスト
20. 2 0 開発フロー • 翌 月 曜 日 にリリース • フィーチャーフラグ等を使い、有料プラン、Enterprise向け環境へのリリースは遅らせることもある 企画 実装 QA リリース 総合テスト
21. 2 1 開発フロー ユーザにいいものを届けるために、どのフェーズでも 手 戻りし、 スケジュールも延期する 文 化 企画 実装 QA リリース 総合テスト
22. 2 2 品質向上の取り組み
23. 2 3 外形監視 ・ E 2 Eテストの強化 • 外形監視の強化 • Checkly • ステージング環境でも実施 • コンテンツAPI、マネジメントAPI、管理画 面 の ページ • アクセスできるか、期待したレスポンスか • ブラウザーE 2 Eテストの強化 • Playwright • 管理画 面 のE 2 Eテストを強化 • Test Automation Daysにて実装、整理 • 月 に2 日 • 自 動テストや関連作業にフルコミット
24. 2 4 オブザーバビリティの強化 • Grafana • メトリクスやエラーログの監視とアラート • ダッシュボード • ログ分析
25. 2 5 インシデント対応フローの整備 • APIを提供するなどサービスの性質上、 高 いレベルの 品質管理が必要 • Incident Command Systemに沿ったフローを整備 • Incident Commander (IC) • Operations Lead (OL) • Communication Lead (CL) • Datadogでチケット管理 • 起票と同時にSlackのチャンネルが 自 動作成され、全員が 強制 入 室 • IC, OL, CLの役割を決め、hotfix • 再発防 止 策を検討、実施したらクローズ • 月 に1度、チーム全体でインシデントを振り返る
26. 2 6 QAフローの強化 • Qaseにてテストケースを管理 • 実装完了時に受け 入 れテストを実施 • リリース前の総合テストで再度実施 • GPTsがテストケースをレビュー
27. 2 7 プロダクト仕様の体系的な管理 with Qase • Qaseでプロダクト仕様を体系的にまとめていく取り組みをトライ中 • PMとCTOがオーナー • 受け 入 れテストのテストケースを取捨選択、 リファクタリングし「プロダクト仕様」セクションに移動 • 「microCMSとはこのようなサービス仕様である」が更新 され続けていく • 案件ごとに仕様書を作り込んでもスナップショット でしかないのですぐに陳腐化する TRIAL
28. 2 8 • 　 プロダクト仕様の体系的な管理 • 最新の仕様の把握 • 「コードが仕様」の回避 • 企画スピードの低下 • エンジニアの疲弊 • 仕様管理をエンジニアに押し付けない 文 化 • AI、新 入 社員の学習 • 　 E 2 Eテストの効率的な実装 • 自 動化されている、されていないを可視化 • 月 2 日 の 自 動テスト整備デーにて、実装 プロダクト仕様の体系的な管理 with Qase TRIAL 目 的 ① 目 的 ②
29. 2 9 カルチャー ・ 働き 方
30. 3 0 カルチャー ・ 働き 方 • フルリモート、 非 同期ワーク • 自 動化、仕組み化 • ワークライフバランス
31. 3 1 フルリモート、 非 同期ワーク • ハイブリッドなし • オフィスなし • オフ会を年2回開催 • 任意参加 • タスクの 一 元管理 • ClickUp • 誰が何をいつまでにが可視化 • ドキュメンテーション、ログ • 出社の場合は、 立 ち話等でコミュニケーションが活発化するかもしれないが、 情報がオープンにならない • リモートでは突発的な会話等もログに残しやすくオープン
32. 3 2 ClickUp
33. 3 3 非 同期ワーク • ミーティング前にNotionに議論ポイントをまとめて共有、 事前にコメントしておき、議論に集中 • #ask-anythingチャンネルで雑に聞くとすぐに返事が来る • 込み 入 った話や雑に会話した 方 が早そう！という場合は 気軽にハドルで会話する 文 化も共存 • 定例は最低限 • 課題や情報シェアを次の定例まで待つ必要はない • etc...
34. 3 4 Notionに議論ポイントをまとめて共有、事前にコメント
35. 3 5 自 動化、仕組み化 • Slackでスタンプを押すと勤怠打刻、勤怠サマリをレポート • チーム間のタスク連携の 自 動化 • 開発チームのリリースタスクがクローズしたら、サクセス チームのブログ公開タスクが 自 動 生 成 • ブログ公開時にツイート 文 をAIで提案 • Qaseを活 用 したQAフローの仕組み化 • テストケースをChatGPTで作ったbotでレビュー • ClickUpでタスクを作って、作業してほしい 人 にアサイン • クローズされると依頼側に通知が来る • Slackでの 文 章不要 • エンジニアの書類選考 • 年末調整 • セキュリティアップデート 1つ1つの施策が良い悪いではなく、 こういった取り組みを 積極的にする 文 化がある
36. 3 6 その結果... プラットフォームチームのとあるエンジニア ストリームアラインドチームのとあるエンジニア
37. 3 7 ワークライフバランス • フルリモート • フレックスタイム • コアタイム 10時〜14時 • アディショナル休暇 • 有給休暇を使い切ると + 10 日 間休める • 100%近い消化率
38. 3 8 課題
39. 3 9 今後の課題 • 新機能の提供スピード • インフラやバックエンドに関わる 非 機能要件の改善 • DBや検索がボトルネックとなり 高 負荷時に サービスが不安定になる • Code Healthの改善 • バックエンド(Go)、フロントエンド(TypeScript)の アーキテクチャの改善 • キャッシュ戦略 • ログ戦略や分散トレーシング • より早い不具合解決を 目 指す • リードタイムの短縮 • 品質を担保したままデプロイ頻度を上げる戦略 • 開発者体験の改善 • etc....
40. 4 0 採 用 情報
41. 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 プラットフォームチーム （バックエンド領域）
42. 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 プラットフォームチーム （フロントエンド領域）
43. ユーザに価値を届ける アクセシビリティ 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 プロダクトエンジニア
44. テスト戦略 アクセシビリティ 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エンジニア
45. 4 5 こういった 方 に来てほしい！ • プロダクトに共感できる • 働き 方 に共感できる • オープンで優しいコミュニケーションができる • 自 分でタスクを管理し、 自立 して業務できる https://jobs.microcms.co.jp/
46. 4 6 ご清聴ありがとうございました