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
PSIRTでAIテストを実施するまでの道のり
cybozuinsideout
PRO
0
86
無理なく続けるサイボウズの社内勉強会
cybozuinsideout
PRO
1
1.2k
分散システムにおける 無兆候データ破損の影響について
cybozuinsideout
PRO
1
58
タンパク質構造のシミュレーションソフトウェア試行錯誤
cybozuinsideout
PRO
1
47
読みやすいアセンブリ言語
cybozuinsideout
PRO
1
41
Wasmで拡張できる軽量マークアップ⾔語Brack(後編)
cybozuinsideout
PRO
1
32
Wasmで拡張できる軽量マークアップ⾔語Brack(前編)
cybozuinsideout
PRO
1
37
kintone開発組織のAWSエンジニアの紹介
cybozuinsideout
PRO
0
230
kintone開発組織のサービスプラットフォームチームの紹介
cybozuinsideout
PRO
0
120
Other Decks in Technology
See All in Technology
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
210
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
130
In Praise of "Normal" Engineers (LDX3)
charity
2
1.1k
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
190
“プロダクトを好きになれるか“も QAエンジニア転職の大事な判断基準だと思ったの
tomodakengo
1
220
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
190
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
3
440
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
160
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
180
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
660
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
170
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
ymty
1
490
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Gamification - CAS2011
davidbonilla
81
5.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fireside Chat
paigeccino
37
3.5k
Building Applications with DynamoDB
mza
95
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How STYLIGHT went responsive
nonsquared
100
5.6k
4 Signs Your Business is Dying
shpigford
184
22k
Visualization
eitanlees
146
16k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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