Eight Webフロントエンドの開発者体験（DX）向上のための取り組み / Approaches to improve the developer experience of Eight web frontend

by Sansan

Slide 1

Slide 1 text

鳥山らいか Eight Webフロントエンドの開発者体験（DX）向上のための取り組み STAGE 1 Eight Career Devグループ SESSION TAG

Slide 2

Slide 2 text

技術本部 Eight Engineering Unit Eight Career Devグループフロントエンドエンジニア大学・大学院ではHCI（Human-Computer Interaction）を専攻し、インタラクションデザインを学ぶ。2019年、新卒でSansan株式会社に入社。採用サービスのUI開発に従事しつつ、Webフロントエンドの開発者体験（DX）向上に取り組む。 Twitter: @pvcresin 鳥山らいか

Slide 3

Slide 3 text

• 開発者体験（DX） • EightのWebフロントエンド • DX向上のための取り組み • まとめアジェンダ

Slide 4

Slide 4 text

開発者体験（DX）

Slide 5

Slide 5 text

開発にまつわる全ての行為を通した開発者の体験 DXの向上＝快適に開発を行うことができる環境の整備 • 自動化による手間の削減 • 負債解消によって今後の開発や設計を容易に開発者体験（Developer eXperience）とは生産性の向上モチベーションの向上開発者体験（DX）

Slide 6

Slide 6 text

1. 議論できる場を作る 2. 徐々に進められる技術選定を行う 3. 完璧を求めない 4. 後戻りしないようにする 5. 積極的にアウトプットしていく開発者体験（DX） DX向上を徐々に進めていくためのポイント思い立ったらすぐに議論できる環境が重要チームで向き合い、合意形成を行う作業を細かく分割することで、スキマ時間に差し込むことができる始めから完璧を求めると進まないため、ある程度方針が決まったら走りだす後戻りすれば苦労が無駄になるため、自動化やドキュメンテーションで防ぐ技術ブランディングや採用貢献につながり、モチベーションの向上や工数確保に寄与

Slide 7

Slide 7 text

EightのWebフロントエンド

Slide 8

Slide 8 text

名刺でつながる、ビジネスのためのSNS • 名刺を正確にデータ化 • 近況情報が届く • メッセージで気軽に連絡 EightのWebフロントエンド Eightとは

Slide 9

Slide 9 text

EightのWebフロントエンド PC版 Eight PCブラウザからおおよその機能を利用可能

Slide 10

Slide 10 text

• チーム内名刺共有サービス • 採用サービス • 広告サービス EightのWebフロントエンド PC版 Eight - 企業向けサービス

Slide 11

Slide 11 text

フレームワーク React / Redux 言語 JavaScript / TypeScript / Sass（SCSS）その他のツール webpack / Prettier / ESLint / stylelint • ドメインごとにフォルダ分けして各チームが開発 • その他にも社内向けライブラリなど、いくつかのリポジトリが存在 EightのWebフロントエンド技術スタック

Slide 12

Slide 12 text

• 機能開発のフロントエンド実装は各ドメインのチームで行う • 上記とは別に、インフラやバックエンドは改善するチームが存在＝フロントエンドを改善するチームがない ➜ チーム横断で進めている EightのWebフロントエンド Eightの開発体制

Slide 13

Slide 13 text

• 連携用のSlackチャンネルで議論 • 心理的安全性を意識 • カンバンボードでタスクの進捗を管理 • To Doの前にWish（願い）を用意し、書くハードルを下げる EightのWebフロントエンドチーム横断で進める方法

Slide 14

Slide 14 text

EightのWebフロントエンド 2. 3. 4. 5. ポイント Slackのチャンネル、カンバンボード発信のハードルを下げる + 心理的安全性の醸成 1. 議論できる場を作る

Slide 15

Slide 15 text

DX向上のための取り組み

Slide 16

Slide 16 text

• コードの自動整形の導入 • TypeScriptの導入 • コンポーネントライブラリの作成 DX向上のための取り組み本日のトピック

Slide 17

Slide 17 text

コードの自動整形の導入

Slide 18

Slide 18 text

• これまで多くのエンジニアが開発に関わってきており、コードのスタイルにばらつきがあったそこで、 • 既存のコードを統一されたルールで整形することで、可読性をあげたい • 新規のコードも整形することで、レビューでの指摘や不要なコード差分を減らしたいコードの自動整形の導入概要

Slide 19

Slide 19 text

• 自動整形にはPrettierを使用 • CIで整形されているかをチェック • Gitフックでコミット前に自動整形をかける＝ Husky + lint-staged • ファイル保存時に自動整形をかける＝ VS Code拡張コードの自動整形の導入方針

Slide 20

Slide 20 text

1. 一定の範囲を設定し、整形されていることを担保 • 既存のコードを整形し、挙動に影響がないことを確認 • 新規のコードもコミット前フックで整形 • CIで整形されているかをチェック 2. 一定の範囲を広げながらPRを出し続け、全体へコードの自動整形の導入作業

Slide 21

Slide 21 text

コードの自動整形の導入 1. 2. 3. ポイント GitフックやCIでのチェックによる自動化周知やドキュメント更新を行う 4. 後戻りしないようにする 5.

Slide 22

Slide 22 text

TypeScriptの導入

Slide 23

Slide 23 text

• PC版 Eightには数年前のコードが多々あり、読み解くのに時間がかかっていた • コンポーネントなど、テストが十分でない部分が一部存在していたそこで • TypeScriptを導入し、型チェックによってコード品質を高めたい • 型をドキュメントの代わりとしたい TypeScriptの導入概要

Slide 24

Slide 24 text

• 既存のロジックに影響が出ない形で導入する • 拡張子で判別して処理を分ける • 新規のコードは原則、TypeScriptで書く • 既存コードも適宜、TypeScriptに移行していく TypeScriptの導入方針

Slide 25

Slide 25 text

1. ドキュメント・書籍・勉強会の資料などで学ぶ • 実践TypeScript、TypeScript Deep Dive等 2. 試しに使ってみる • 新規リポジトリに採用し、設定や書き味を確認 • 既存のJavaScript製ライブラリの移行で相互運用性を確認 TypeScriptの導入事前準備

Slide 26

Slide 26 text

1. コンパイル処理の追加 • ts-loader（transpileOnly: true）＋ Fork TS Checker Webpack Plugin • tsconfig.json は “strict”: true で型チェックを厳格に設定 2. Gitフック・CIの設定 • コードの自動整形、Lint、テスト、型チェック等 • TypeScriptを書く準備ができたのでリリース TypeScriptの導入 PC版 Eightへの導入手順

Slide 27

Slide 27 text

1. 拡張子を変更して型を付与 • 型定義の追加を行い、わかる範囲でコードに型を付与 • ts-expect-errorコメントや Todo型（any型のエイリアス）を付与現状 • 導入から1年半が経過し、TypeScript率は7割に • ある程度進んだらリファクタリングを行い、型を厳密にしていく TypeScriptの導入既存のJavaScriptコードからの移行手順

Slide 28

Slide 28 text

TypeScriptの導入 1. ポイント相互運用性のあるTypeScriptの選択拡張子やglobパターンによるファイル指定 2. 徐々に進められる技術選定を行う 3. 4. 後戻りしないようにする 5.

Slide 29

Slide 29 text

コンポーネントライブラリの作成

Slide 30

Slide 30 text

• コンポーネントの実装・デザインにバラつきがあった • PC版のUIを刷新し、アプリ版と合わせる動きそこで、 • コンポーネントライブラリを作成し、実装・デザインを揃える • コンポーネントカタログを作成し、デザイナーと認識を合わせるコンポーネントライブラリの作成概要デザインシステム構築

Slide 31

Slide 31 text

デザインの一貫性と開発の生産性を担保するため仕組み • デザインガイドラインデザイン原則や規約を定めた指針 • デザイントークン色・タイポグラフィ・サイズ等の定義 • コンポーネントカタログコンポーネントのパターン一覧 • コンポーネントライブラリコンポーネントの実装コンポーネントライブラリの作成デザインシステムとは

Slide 32

Slide 32 text

デザイナー • Figma上でコンポーネントの洗い出しと整理を行うエンジニア • 整理されたコンポーネントを実装し、コンポーネントカタログに反映コンポーネントライブラリの作成方針

Slide 33

Slide 33 text

コンポーネントライブラリの作成全体の流れエンジニアデザイナー整理されたコンポーネントから実装＋テスト・デプロイ周りの作り込みコンポーネントライブラリのベース実装コンポーネントの洗い出し・整理＋デザイントークンの整理デザインガイドラインへの落とし込み

Slide 34

Slide 34 text

1. ライブラリのベース実装 • ビルドやテスト、Lintの整備 • カタログ作成 2. テスト・デプロイ周りの作り込み • Snapshot・画像回帰テスト • PR毎にカタログのPreview生成コンポーネントライブラリの作成作業

Slide 35

Slide 35 text

コンポーネントライブラリの作成 1. 2. ポイントコンポーネントが全て洗い出されるのを待たないライブラリの完成度を最初から求めない 3. 完璧を求めない 4. 後戻りしないようにする 5.

Slide 36

Slide 36 text

• コミュニケーションが増え、DXに向き合うメンバーが増えた • 作業工数が少しづつ確保できるように • 開発のスピードが上がり、その後の開発が快適に DX向上のための取り組み組織に起こった変化

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

• コードの自動整形の導入 • TypeScriptの導入 • コンポーネントライブラリの作成まとめ DX向上のための取り組み

Slide 39

Slide 39 text

まとめ 1. 議論できる場を作る 2. 徐々に進められる技術選定を行う 3. 完璧を求めない 4. 後戻りしないようにする 5. 積極的にアウトプットしていく DX向上を徐々に進めていくためのポイント思い立ったらすぐに議論できる環境が重要チームで向き合い、合意形成を行う作業を細かく分割することで、スキマ時間に差し込むことができる始めから完璧を求めると進まないため、ある程度方針が決まったら走りだす後戻りすれば苦労が無駄になるため、自動化やドキュメンテーションで防ぐ技術ブランディングや採用貢献につながり、モチベーションの向上や工数確保に寄与

Slide 40

Slide 40 text

Eight Career Devグループ Twitter @pvcresin 8card.net/p/ pvcresin Eight Virtual Card 鳥山らいか