Eight WebフロントエンドのDX向上に関する取り組み

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

Eight WebフロントエンドのDX向上に関する取り組み

Eight WebフロントエンドのDX向上に関する取り組み

pvcresin

More Decks by pvcresin

Other Decks in Technology

Featured

Transcript