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
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
Search
Cybozu
PRO
December 18, 2024
Technology
6
41k
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
サイボウズ フロントエンドエキスパートチームの紹介スライドです。(2024/12/18更新)
Cybozu
PRO
December 18, 2024
Tweet
Share
More Decks by Cybozu
See All by Cybozu
AIツール開発ワークショップ(Dify)【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
7.3k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
2.1k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
3.3k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
6
6.7k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
7
5.7k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
4
1.9k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
2.6k
セキュリティ【サイボウズ新人研修2025】
cybozuinsideout
PRO
1
1.7k
TLS 1.3をざっと理解する【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
940
Other Decks in Technology
See All in Technology
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
140
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
Connect 100+を支える技術
kanyamaguc
0
200
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
150
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
45k
Optimizing for Happiness
mojombo
379
70k
Visualization
eitanlees
146
16k
RailsConf 2023
tenderlove
30
1.1k
Music & Morning Musume
bryan
46
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Documentation Writing (for coders)
carmenintech
72
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
フロントエンドエキスパートチームの紹介
Mission 「サイボウズのフロントエンドを最高にする」
チームの立ち位置 サイボウズのフロントエンドエンジニアは「フロントエンド職能」に属します フロントエンドエキスパートチームもフロントエンド職能の一部です 横断的な開発支援を行いつつ、フロントエンド職能全体の活性化を牽引します
チームの活動内容 以下の2つを主軸に活動しています 支援活動 プロダクトチームが抱えるフロントエンド課題を専門性を持って解決する サイクルを回す活動 フロントエンドエンジニアと組織の活動を "サイクル" として定義 個人と組織のサイクルが回るようボトルネックの解消・改善・支援を行う 事業全体のビジョン・方針や、支援先状況などに応じて
定期的に活動割合の見直しやスイッチを行っています
支援活動 プロダクトチームが抱える課題について、横断チームとして専門性を持って一緒に解決する プロダクト側から依頼があるケースと、 フロントエンドエキスパートチーム側から能動的にアクションを起こすケースがある 課題の性質・プロダクトの状況・関わり方などによって、 フォーカス支援と探索的支援の2つの支援スタイルを定義しています 支援のスタンスを明確にすることで、支援先の期待値との整合性をとっています
支援活動 / 🎯 フォーカス支援 プロダクト・プロジェクトのメンバーとして参加しフロントエンドの課題解決を図る 進捗/スケジュールにも責任を持って対処する プロダクト・プロジェクトの初期フェーズや、 課題が複雑、対応が長期化するケースなどはフォーカス支援の形をとる 具体的な活動例 プロダクトオーナーとしてプロジェクト自体を推進
テックリードとして技術選定やフロントエンド基盤の設計 プロジェクト立ち上げ時にメンバーとして参加し安定化を図る
支援活動 / 🗺️ 探索的支援 フロントエンドエキスパートチームのメンバーが主体・自主的に行う支援活動 プロダクトチーム自身が気付いていないものや、 サイボウズの開発チーム全体を俯瞰で見たときに対応すべき課題の発見・解決も含む 具体的な活動例 各チームへのフロントエンド周りに関するヒアリング(問診) 技術動向の調査・整理・共有
窓口によるスポット的な相談の受付 独自・社内OSSのメンテナンス
サイクルを回す活動 個人と組織の理想的な循環を "サイクル" として定義 自らも個人サイクルを率先して回しつつ フロントエンドエンジニアと組織全体で サイクル内でのボトルネックの解消や改善を行う 具体的な活動例 個人としての発信・探究活動 他エンジニアの発信・探究の支援
勉強会開催による機会の創出 アウトプットの壁打ち ペアプロやコードレビュー 開発ガイドラインの作成や交流の場の創出 改善活動のプロジェクト化
発信 発信の目的 Cybozuのプレゼンス向上 発信を通じたフロントエンドエンジニアの技術力向上 実施している発信活動の例 カンファレンス・勉強会でのスポンサー カンファレンス・勉強会への参加・登壇 Cybozu Frontend Monthly
(YouTube) サイボウズフロントエンド通信 (PodCast) 技術記事の執筆
カンファレンス・勉強会でのスポンサー VueFes Japan 2024 でのスポンサーブースの様子
カンファレンス・勉強会への参加・登壇
Cybozu Frontend Monthly (YouTube) 毎週社内で実施されているフロントエンド勉強会 "Frontend Weekly" の社外公開版
サイボウズフロントエンド通信 (PodCast) https://creators.spotify.com/pod/show/cybozu- frontend サイボウズ社内のフロントエンドに関する 取り組みを紹介するPodCast これまでのエピソードの一例 React Server Components
時代のコンポーネント 設計を考える Chromaticの活用事例を聞いてみた 次世代 Web カンファレンス 2023 の後日談 サイボウズの新卒エンジニアってどんなことやって るの?
技術記事の執筆 / Zenn フロントエンドエキスパートチームを含む フロントエンドエンジニア全員で Zenn Publication に記事を投稿中 Frontend Weekly
のまとめ記事に加えて 個人の探究内容のアウトプットも行っている 2024年12月時点では175本を投稿
技術記事の執筆 / 寄稿 WEB+DB PRESS にフロントエンドエキスパートチ ームで記事を寄稿 Vol.119 : 「フロントエンド脱レガシー
長く愛さ れるプロダクトをさらに改善していくために」 Vol.134,135,136 : 連載「乗りこなせ!モダンフ ロントエンド」 gihyo.jp にてフロントエンド関連の連載 https://gihyo.jp/list/group/乗りこなせ-モダンフ ロントエンド
探究 プロダクトの可能性を広げるために、Webフロントエンド技術の調査・検証を行う 各々で調整し業務時間の一部を探究活動に充てています 毎週30分程度で「探究発表会」を開催し、その週の探究内容を共有しています
探究から生まれたアウトプット <select> 要素がより扱いやすく - What’s new in Browsers! https://zenn.dev/cybozu_frontend/articles/20240126_whats-new-in-browser-firefox-122 Server-Sent
Events を複数パターンで実装して理解を試みる https://zenn.dev/cybozu_frontend/articles/try-server-sent-events Intl.Segmenterはどうやって単語分割しているのか https://zenn.dev/cybozu_frontend/articles/explore-intl-segmenter Storybook8.1からSubpath importsを使ったモジュールのモックができるように https://zenn.dev/cybozu_frontend/articles/storybook-module-mock
探究からプロダクトへ還元した例 Deno + dnt を用いた社内向け npm パッケージの提供 社内で使う npm パッケージの作成に
Deno を採用した話 Closure Tools 用の DevTools の作成 フロントエンド刷新のために DevTools を作って開発を捗らせる ESLint v9 Flat Config 対応の調査と、共通 ESLint Config の提供 @cybozu/eslint-config
We are hiring ! https://cybozu.co.jp/recruit/entry/career/front-end-expert.html