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
7
7.1k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
2k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
3.2k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
6
6.5k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
7
5.6k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
4
1.8k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
2.5k
セキュリティ【サイボウズ新人研修2025】
cybozuinsideout
PRO
1
1.7k
TLS 1.3をざっと理解する【サイボウズ新人研修2025】
cybozuinsideout
PRO
2
910
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
16k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
ゼロからはじめる採用広報
yutadayo
3
910
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
KATA
mclloyd
30
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
Making Projects Easy
brettharned
116
6.3k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Optimizing for Happiness
mojombo
379
70k
Agile that works and the tools we love
rasmusluckow
329
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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