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
9
11k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
3k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
8
7.6k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
14
12k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
10
7.1k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
6
3.8k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
12
9.1k
セキュリティ【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
2.6k
TLS 1.3をざっと理解する【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
1.6k
Other Decks in Technology
See All in Technology
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
440
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
ClaudeCodeにキレない技術
gtnao
1
860
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Designing for humans not robots
tammielis
253
25k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
It's Worth the Effort
3n
185
28k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
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