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
4.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
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
480
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
510
microCMSのリッチエディタ開発:設計・品質・使いやすさの実現手法
microcms
0
150
エンジニア創業者が語るユーザー中心のプロダクト作り
microcms
1
330
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
3.3k
意思決定のモヤが晴れるまで
microcms
7
2.4k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
microcms
7
3.4k
microCMS AI
microcms
0
2.2k
microCMSのエンジニア組織と文化
microcms
0
2.2k
Other Decks in Technology
See All in Technology
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
570
Wasmの気になる最新情報
askua
0
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
530
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
OSSで50の競合と戦うためにやったこと
yamadashy
1
100
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Done Done
chrislema
185
16k
Building Applications with DynamoDB
mza
96
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Mobile First: as difficult as doing things right
swwweet
225
10k
Designing for humans not robots
tammielis
254
26k
How to train your dragon (web standard)
notwaldorf
97
6.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 ご清聴ありがとうございました