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
1.7k
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
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
1.2k
意思決定のモヤが晴れるまで
microcms
7
2k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
microcms
7
3k
microCMS AI
microcms
0
1.6k
microCMSのエンジニア組織と文化
microcms
0
1.6k
シン・リッチエディタ徹底解説
microcms
1
1.7k
新リリース:microCMSテンプレート
microcms
1
1.8k
Cloudflare Pages/Workersとは
microcms
2
820
Next.jsでの開発を加速させるVercelとNext.js/App Routerの便利な機能たち
microcms
1
910
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
21
10k
なんでもCopilot for Security
sophiakunii
3
3.7k
現代的システム開発概論 2024
recruitengineers
PRO
90
31k
運用エンジニアのための AWSドキュメントの歩き方・まとめ方 / 20240822-jawsug-tokyo-aws-documents
opelab
6
1.5k
Jitoを使ったMEV Bot入門 / Super Tokyo - Tech Night
andooown
0
650
React 研修 (2024)
recruitengineers
PRO
34
13k
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか
nullpo_head
4
1.3k
続・SharePlayの歴史と進化 iOS18とApple Vision Proにおける新展開
tokorom
2
110
3-shake SRE Tech Talk #10 LLMのO11yに触れる
abnoumaru
1
550
Design and build about DataOps hands-on
shumpei3
2
610
OSINT CTFを支える技術
xryuseix
1
410
Swift 6のTyped throwsとSwiftにおけるエラーハンドリングの全体像を学ぶ
koher
0
420
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
24
1.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
A Philosophy of Restraint
colly
202
16k
Web development in the modern age
philhawksworth
203
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
In The Pink: A Labor of Love
frogandcode
139
22k
Producing Creativity
orderedlist
PRO
340
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
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 ご清聴ありがとうございました