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
140
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
83
Web IDEの進化とそれを支える技術
pvcresin
0
53
ステップアップOSSコントリビュート
pvcresin
0
450
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
360
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
360
React はじめの一歩
pvcresin
1
230
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
130
Other Decks in Technology
See All in Technology
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
OPENLOGI Company Profile for engineer
hr01
1
20k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.9k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.1k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.2k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
640
Pwned Labsのすゝめ
ken5scal
2
450
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Six Lessons from altMBA
skipperchong
27
3.6k
GitHub's CSS Performance
jonrohan
1030
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Typedesign – Prime Four
hannesfritz
40
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Faster Mobile Websites
deanohume
306
31k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
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