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
Eight WebフロントエンドのDX向上に関する取り組み
Search
pvcresin
June 17, 2020
Technology
0
180
Eight WebフロントエンドのDX向上に関する取り組み
2020年5-6月にSansanと接点のある学生エンジニアに向けて行われたオンラインLT会で発表。計3回。
2020-05-18
2020-05-20
2020-06-17
pvcresin
June 17, 2020
Tweet
Share
More Decks by pvcresin
See All by pvcresin
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
text-box-trim について 1 分で
pvcresin
0
120
Web IDEの進化とそれを支える技術
pvcresin
0
97
ステップアップOSSコントリビュート
pvcresin
0
470
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
410
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
390
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
160
Other Decks in Technology
See All in Technology
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
120
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
400
許しとアジャイル
jnuank
1
120
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
about #74462 go/token#FileSet
tomtwinkle
1
290
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Statistics for Hackers
jakevdp
799
220k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Raft: Consensus for Rubyists
vanstee
139
7.1k
BBQ
matthewcrist
89
9.8k
Gamification - CAS2011
davidbonilla
81
5.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Designing for Performance
lara
610
69k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Transcript
Eight Webフロントエンドの DX向上に関する取り組み 鳥山らいか | Eight事業部 エンジニア
Sansanとの出会い 学部2年 修士2年 2019年4月 名刺交換アプリを試作していて、Eightの存在を知る 就活イベントでSansanと面談し、選考を受けることに 新卒入社し、Eightのフロントエンドエンジニアに
サービス紹介 PC版 Eight
PC版 Eight SNS - プロフィール - オンライン名刺交換 - 投稿 -
メッセージ
PC版 Eight - 企業向けサービス Eight Career Design - 採用サービス 企業向けプレミアム
- 社内で名刺を共有 SNS - プロフィール - オンライン名刺交換 - 投稿 - メッセージ このチームに所属してます
開発環境 Eightフロントエンド - 言語 - JavaScript + Sass - 構成
- React + Redux による SPA その他、社内向けライブラリがいくつか
DX向上に関する取り組み
これから話すこと - DX = 開発者体験、Developer Experienceを向上させるための取り組み - 本来の業務とは別に個人的にサブタスクとして行ってきたもの - 背景や実際の作業、そこから得られた学び
コンポーネント ライブラリ・カタログの作成
コンポーネント ライブラリ・カタログの作成 背景 - WebのUIを刷新していく動き - 大きめの新規開発がそのうちスタートするらしい そこで - 共通コンポーネントのライブラリを作り、コードの重複やデザインの差異をなくし
たい - 一覧できるカタログを作り、エンジニア・デザイナー間のコミュニケーションを円 滑にしたい
コンポーネント ライブラリ・カタログの作成 1. 手をあげ、技術選定や実装を任される 2. リポジトリを作成、実装 - ライブラリのビルド環境の整備 - テストやLinterによる品質の担保
- カタログ作成 3. デザイナーとデザインガイドラインを策定
コンポーネント ライブラリ・カタログの作成
コンポーネント ライブラリ・カタログの作成 学び - 新卒とか関係なく、自ら手をあげることが大事 - ライブラリ作成やテスト、CIの整備などは技術的に考えることが多い - 周りのメンバーの意見を聞きながら進めることの大切さ
コードの自動整形の導入
コードの自動整形の導入 背景 - 多くのエンジニアが関わっており、 コードのスタイルにばらつきがあった そこで - 既存のコードを整形することで、可読性を上げたい - 新規のコードも整形することで、レビューでの指摘や不要なコード差分を
削減したい
コードの自動整形の導入 1. 既存のコード - 一定範囲内のファイルを整形し、コードの挙動に影響がないことを確認 2. 新規のコード - 一定範囲内のファイルのコミットをフックし、自動整形がかかるように 3.
CIの整備 - 一定範囲内のファイルが整形されているかをチェックするように 4. 一定範囲内を広げながらPRを出し続け、全体へ
コードの自動整形の導入
コードの自動整形の導入 学び - 事前に他者との合意形成をしておく - 責任を持って推し進める - スモールスタートで段階的に進めていくこと
まとめ - DX向上、エンジニアならば仕組みで解決 - 他者と合意形成を行い、責任を持って推し進める - 改善に協力的な環境
付録 【Sansan19卒新卒インタビューVol.02】 - https://www.wantedly.com/companies/Sansan/post_articles/189105 Eightのフロントエンド〜改善の歴史と今後の展望〜 - https://speakerdeck.com/sansanbuildersbox/eight-frontend CSSについて復習する - https://buildersbox.corp-sansan.com/entry/2020/02/10/110000
21