Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
3.8k
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
290
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
2.4k
意思決定のモヤが晴れるまで
microcms
7
2.3k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
microcms
7
3.3k
microCMS AI
microcms
0
2.1k
microCMSのエンジニア組織と文化
microcms
0
2k
シン・リッチエディタ徹底解説
microcms
1
2.3k
新リリース:microCMSテンプレート
microcms
1
2.1k
Cloudflare Pages/Workersとは
microcms
2
1.3k
Other Decks in Technology
See All in Technology
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
14
5k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
260
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Building an army of robots
kneath
306
45k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
A better future with KSS
kneath
239
17k
Automating Front-end Workflow
addyosmani
1370
200k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing for humans not robots
tammielis
253
25k
Balancing Empowerment & Direction
lara
1
370
Facilitating Awesome Meetings
lara
54
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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 ご清聴ありがとうございました