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
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
kintone開発のプラットフォームエンジニアの紹介
cybozuinsideout
PRO
0
43
AIツール開発ワークショップ(Dify)【サイボウズ新人研修2025】
cybozuinsideout
PRO
20
21k
モバイル【サイボウズ新人研修2025】
cybozuinsideout
PRO
3
3.6k
Git/GitHub を使う上で知っておくと嬉しいかも Tips【サイボウズ新人研修2025】
cybozuinsideout
PRO
13
9.7k
GitHub Copilot活用【サイボウズ新人研修2025】
cybozuinsideout
PRO
14
14k
ソフトウェアライセンス【サイボウズ新人研修2025】
cybozuinsideout
PRO
13
8.1k
エンジニアのためのアウトプット講座 〜知識をシェアするはじめの一歩〜【サイボウズ新人研修2025】
cybozuinsideout
PRO
7
4.5k
Docker入門【サイボウズ新人研修2025】
cybozuinsideout
PRO
13
11k
Other Decks in Technology
See All in Technology
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
170
人を動かすことについて考える
ichimichi
2
320
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
590
LLMエージェント時代に適応した開発フロー
hiragram
1
390
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
190
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
560
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
310
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
2
4.4k
広島発!スタートアップ開発の裏側
tsankyo
0
230
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
300
DeNA での思い出 / Memories at DeNA
orgachem
PRO
2
1.1k
株式会社ARAV 採用案内
maqui
0
320
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Site-Speed That Sticks
csswizardry
10
780
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Speed Design
sergeychernyshev
32
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Scaling GitHub
holman
462
140k
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Done Done
chrislema
185
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
YesSQL, Process and Tooling at Scale
rocio
173
14k
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