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
80
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
Web IDEの進化とそれを支える技術
pvcresin
0
21
ステップアップOSSコントリビュート
pvcresin
0
410
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
320
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
300
React はじめの一歩
pvcresin
1
210
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
110
Other Decks in Technology
See All in Technology
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.1k
Challenges - Open Farming Hackdays 2024
loleg
0
520
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
オブジェクト指向宗教史
tanakahisateru
13
11k
Ask-LLM論文紹介: How to Train Data-Efficient LLMs
s_ota
0
110
大規模データとの戦い方
knih
1
460
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
任意コード実行の原理
ffri
0
170
Autify Company Deck
autifyhq
1
30k
20240321_生成AI時代のDevOps
kzkmaeda
2
610
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
150
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Infographics Made Easy
chrislema
237
18k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
The Cult of Friendly URLs
andyhume
72
5.6k
Being A Developer After 40
akosma
56
580k
For a Future-Friendly Web
brad_frost
170
8.9k
Making Projects Easy
brettharned
106
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
The Mythical Team-Month
searls
214
42k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Building an army of robots
kneath
300
41k
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