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
120
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
text-box-trim について 1 分で
pvcresin
0
44
Web IDEの進化とそれを支える技術
pvcresin
0
29
ステップアップOSSコントリビュート
pvcresin
0
440
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
340
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
350
React はじめの一歩
pvcresin
1
230
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
120
Other Decks in Technology
See All in Technology
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
580
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
670
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
いざ、BSC討伐の旅
nikinusu
2
780
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
210
AGIについてChatGPTに聞いてみた
blueb
0
130
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
360
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
Featured
See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
Building Adaptive Systems
keathley
38
2.3k
Building Your Own Lightsaber
phodgson
103
6.1k
KATA
mclloyd
29
14k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Fireside Chat
paigeccino
34
3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
We Have a Design System, Now What?
morganepeng
50
7.2k
Agile that works and the tools we love
rasmusluckow
327
21k
Six Lessons from altMBA
skipperchong
27
3.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Visualization
eitanlees
145
15k
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