Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
microCMSの開発組織 - Deep dive into microCMS
Search
microCMS
July 11, 2024
Technology
2
2.5k
microCMSの開発組織 - Deep dive into microCMS
microCMS MeetUp 2024で発表したスライドです。
https://microcms.connpass.com/event/316541/
microCMS
July 11, 2024
Tweet
Share
More Decks by microCMS
See All by microCMS
エンジニア創業者が語るユーザー中心のプロダクト作り
microcms
1
170
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
1.7k
意思決定のモヤが晴れるまで
microcms
7
2.1k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
microcms
7
3.1k
microCMS AI
microcms
0
1.8k
microCMSのエンジニア組織と文化
microcms
0
1.8k
シン・リッチエディタ徹底解説
microcms
1
2k
新リリース:microCMSテンプレート
microcms
1
1.9k
Cloudflare Pages/Workersとは
microcms
2
1.1k
Other Decks in Technology
See All in Technology
プロダクトの爆速開発を支える、 「作らない・削る・尖らせる」技術
applism118
5
1.5k
情シスの引継ぎが大変という話
miyu_dev
2
540
asumikamというカンファレンスオーガナイザの凄さを語る / The Brilliance of Asumikam
tomzoh
1
190
検証と資産化を形にするプロダクト組織へ/tapple_pmconf2024
corin8823
1
3.3k
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
1
110
ドメインロジックで考えるテスタビリティ
leveragestech
1
220
AWS認定試験の長文問題を早く解くコツ
keke1234ke
0
150
B11-SharePoint サイトのストレージ管理を考えよう
maekawa123
0
120
Oracle Cloud Infrastructure:2024年11月度サービス・アップデート
oracle4engineer
PRO
0
160
高品質と高スピードを両立させるソフトウェアQA/Software QA that Supports Agility and Quality
goyoki
6
950
今はまだ小さい東京ガス内製開発チームが、これからもKubernetesと共に歩み続けるために
yussugi
3
550
TimeTreeが経た3つの転換点 ー プロダクト成長過程でその時、その瞬間、何を考えてたか
ysmtysts
1
1.2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Typedesign – Prime Four
hannesfritz
40
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Music & Morning Musume
bryan
46
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
400
Building Your Own Lightsaber
phodgson
103
6.1k
How to Think Like a Performance Engineer
csswizardry
21
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Fireside Chat
paigeccino
34
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Transcript
株式会社microCMS 大西 智也 microCMSの開発組織 Deep dive into microCMS
2 • ヤフー株式会社にて約10年エンジニアを経験 • メール、ヤフオク、PayPayフリマ、CTO室... • iOS、Webフロントエンド、バックエンド、機械学習...etc • 2022年5 月
にmicroCMSにジョイン • 組織やバックエンドの課題を中 心 に業務 • エンジニアが楽しく、不安なく働ける環境作り • 趣味 • ゲーム、ドライブ、個 人 開発、Apple • Vision Pro買いました 株式会社microCMS CTO 大西 智也 @Tomoya_Onishi
2 • 技術スタックとAIツール • 技術的な課題 • チームと役割 • 開発フロー •
品質向上の取り組み • カルチャー、働き 方 • 今後の課題 • 採 用 情報 今 日 お話しすること
4 技術スタック
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 技術スタック(モニタリング、オブザーバビリティ) • メトリクス監視、ログ分析、ダッシュボード Grafana, CloudWatch Logs • 外形監視、E
2 E Checkly、Playwright • エラートラッキング Sentry • 分散トレーシング OpenTelemetry, AWS X-Ray • MaC Terraform
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 AIツール
9 生 産性を上げるためのAIツール • ChatGPT • ChatGPT Plusを全社員が使 用 可能
• 通常使 用 に加えて、Assistant APIでテストケースをレビューするQAエンジニアを作成 • Copilot • 全エンジニアが使 用 可能
1 0 生 産性を上げるためのAIツール • CodeRabbit • AIコードレビュー • モノレポなのでディレクトリごとにプ
ロンプトを分けて精度向上 • 障害の再発防 止 策としても活 用 • AIの指摘を全て解決してから 人 間に レビュー依頼
1 1 ツールを使った 自 動化 ・ 仕組み化 エンジニアリング領域に限らず、 便利なもの ・
トレンドなものを積極的に導 入 し、 「 自 動化 ・ 仕組み化」する 文 化が根付いている • ClickUp • Cleanshot X • Dify • Pipedream • Kintai bot • Backoffice bot • tl;dv • etc....
1 2 チームと役割
PM チームと役割 ストリームアラインドチーム プラットフォームチーム(バックエンド) プラットフォームチーム(フロントエンド) チームトポロジーの概念を拝借 サポート • 顧客に価値を届ける •
新機能、改善 • フロントエンド & API • 非 機能要件 • Code Health • 開発者体験 • インフラ, SRE, オブザーバビリティ • CI/CD • 非 機能要件 • Code Health • 開発者体験 • CI/CD • E 2 Eテスト • JavaScript SDK
1 4 開発フロー
1 5 開発フロー 企画 実装 QA リリース 総合テスト
1 6 開発フロー • PMが中 心 となって仕様を決定 • プラットフォームチームについてはそのチームのテックリード •
顧客からのフィードバック、経営、技術課題等々を材料に仕様 ・ デザインを検討 企画 実装 QA リリース 総合テスト
1 7 開発フロー • エンジニアにタスクをアサイン • 規模にもよるが基本的に1 人 • タスクの細分化やスケジュール管理は
自身 で 行 う • Design Doc • 考慮漏れ防 止 のタスクテンプレート • 毎 日 の朝会や進捗チェックはなし • 仕様に不備があったりより良いアイデアがあればPMとともに議論 企画 実装 QA リリース 総合テスト
1 8 開発フロー • PMが受け 入 れテストを実施 • 問題があればエンジニアにフィードバック •
Qaseというテスト管理ツールでテストを管理 企画 実装 QA リリース 総合テスト
1 9 開発フロー • 毎週 木 曜 日 に全てのチームの変更を取り込んだ状態で変更分の受け 入
れテスト、リグレッションテストを実施 • E 2 Eテストを実施 • QaseとE 2 EテストはCI連携されており結果がQaseに反映される • 手 動テストも 自 動テストも全てPassしたことを確認して完了 企画 実装 QA リリース 総合テスト
2 0 開発フロー • 翌 月 曜 日 にリリース •
フィーチャーフラグ等を使い、有料プラン、Enterprise向け環境へのリリースは遅らせることもある 企画 実装 QA リリース 総合テスト
2 1 開発フロー ユーザにいいものを届けるために、どのフェーズでも 手 戻りし、 スケジュールも延期する 文 化 企画
実装 QA リリース 総合テスト
2 2 品質向上の取り組み
2 3 外形監視 ・ E 2 Eテストの強化 • 外形監視の強化 •
Checkly • ステージング環境でも実施 • コンテンツAPI、マネジメントAPI、管理画 面 の ページ • アクセスできるか、期待したレスポンスか • ブラウザーE 2 Eテストの強化 • Playwright • 管理画 面 のE 2 Eテストを強化 • Test Automation Daysにて実装、整理 • 月 に2 日 • 自 動テストや関連作業にフルコミット
2 4 オブザーバビリティの強化 • Grafana • メトリクスやエラーログの監視とアラート • ダッシュボード •
ログ分析
2 5 インシデント対応フローの整備 • APIを提供するなどサービスの性質上、 高 いレベルの 品質管理が必要 • Incident
Command Systemに沿ったフローを整備 • Incident Commander (IC) • Operations Lead (OL) • Communication Lead (CL) • Datadogでチケット管理 • 起票と同時にSlackのチャンネルが 自 動作成され、全員が 強制 入 室 • IC, OL, CLの役割を決め、hotfix • 再発防 止 策を検討、実施したらクローズ • 月 に1度、チーム全体でインシデントを振り返る
2 6 QAフローの強化 • Qaseにてテストケースを管理 • 実装完了時に受け 入 れテストを実施 •
リリース前の総合テストで再度実施 • GPTsがテストケースをレビュー
2 7 プロダクト仕様の体系的な管理 with Qase • Qaseでプロダクト仕様を体系的にまとめていく取り組みをトライ中 • PMとCTOがオーナー •
受け 入 れテストのテストケースを取捨選択、 リファクタリングし「プロダクト仕様」セクションに移動 • 「microCMSとはこのようなサービス仕様である」が更新 され続けていく • 案件ごとに仕様書を作り込んでもスナップショット でしかないのですぐに陳腐化する TRIAL
2 8 • プロダクト仕様の体系的な管理 • 最新の仕様の把握 • 「コードが仕様」の回避 •
企画スピードの低下 • エンジニアの疲弊 • 仕様管理をエンジニアに押し付けない 文 化 • AI、新 入 社員の学習 • E 2 Eテストの効率的な実装 • 自 動化されている、されていないを可視化 • 月 2 日 の 自 動テスト整備デーにて、実装 プロダクト仕様の体系的な管理 with Qase TRIAL 目 的 ① 目 的 ②
2 9 カルチャー ・ 働き 方
3 0 カルチャー ・ 働き 方 • フルリモート、 非 同期ワーク
• 自 動化、仕組み化 • ワークライフバランス
3 1 フルリモート、 非 同期ワーク • ハイブリッドなし • オフィスなし •
オフ会を年2回開催 • 任意参加 • タスクの 一 元管理 • ClickUp • 誰が何をいつまでにが可視化 • ドキュメンテーション、ログ • 出社の場合は、 立 ち話等でコミュニケーションが活発化するかもしれないが、 情報がオープンにならない • リモートでは突発的な会話等もログに残しやすくオープン
3 2 ClickUp
3 3 非 同期ワーク • ミーティング前にNotionに議論ポイントをまとめて共有、 事前にコメントしておき、議論に集中 • #ask-anythingチャンネルで雑に聞くとすぐに返事が来る •
込み 入 った話や雑に会話した 方 が早そう!という場合は 気軽にハドルで会話する 文 化も共存 • 定例は最低限 • 課題や情報シェアを次の定例まで待つ必要はない • etc...
3 4 Notionに議論ポイントをまとめて共有、事前にコメント
3 5 自 動化、仕組み化 • Slackでスタンプを押すと勤怠打刻、勤怠サマリをレポート • チーム間のタスク連携の 自 動化
• 開発チームのリリースタスクがクローズしたら、サクセス チームのブログ公開タスクが 自 動 生 成 • ブログ公開時にツイート 文 をAIで提案 • Qaseを活 用 したQAフローの仕組み化 • テストケースをChatGPTで作ったbotでレビュー • ClickUpでタスクを作って、作業してほしい 人 にアサイン • クローズされると依頼側に通知が来る • Slackでの 文 章不要 • エンジニアの書類選考 • 年末調整 • セキュリティアップデート 1つ1つの施策が良い悪いではなく、 こういった取り組みを 積極的にする 文 化がある
3 6 その結果... プラットフォームチームのとあるエンジニア ストリームアラインドチームのとあるエンジニア
3 7 ワークライフバランス • フルリモート • フレックスタイム • コアタイム 10時〜14時
• アディショナル休暇 • 有給休暇を使い切ると + 10 日 間休める • 100%近い消化率
3 8 課題
3 9 今後の課題 • 新機能の提供スピード • インフラやバックエンドに関わる 非 機能要件の改善 •
DBや検索がボトルネックとなり 高 負荷時に サービスが不安定になる • Code Healthの改善 • バックエンド(Go)、フロントエンド(TypeScript)の アーキテクチャの改善 • キャッシュ戦略 • ログ戦略や分散トレーシング • より早い不具合解決を 目 指す • リードタイムの短縮 • 品質を担保したままデプロイ頻度を上げる戦略 • 開発者体験の改善 • etc....
4 0 採 用 情報
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 プラットフォームチーム (バックエンド領域)
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 プラットフォームチーム (フロントエンド領域)
ユーザに価値を届ける アクセシビリティ 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 プロダクトエンジニア
テスト戦略 アクセシビリティ 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エンジニア
4 5 こういった 方 に来てほしい! • プロダクトに共感できる • 働き 方
に共感できる • オープンで優しいコミュニケーションができる • 自 分でタスクを管理し、 自立 して業務できる https://jobs.microcms.co.jp/
4 6 ご清聴ありがとうございました