Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2020年6月にSansanと接点のある学生エンジニアに向けて行われたオンラインLT会で発表。

06944c671661e362a4182bd8c1f19c79?s=128

pvcresin

June 17, 2020
Tweet

Transcript

  1. Eight Webフロントエンドの DX向上に関する取り組み 鳥山らいか | Eight事業部 エンジニア

  2. Sansanとの出会い 学部2年 修士2年 2019年4月 名刺交換アプリを試作していて、Eightの存在を知る 就活イベントでSansanと面談し、選考を受けることに 新卒入社し、Eightのフロントエンドエンジニアに

  3. サービス紹介 PC版 Eight

  4. PC版 Eight SNS - プロフィール - オンライン名刺交換 - 投稿 -

    メッセージ
  5. PC版 Eight - 企業向けサービス Eight Career Design - 採用サービス 企業向けプレミアム

    - 社内で名刺を共有 SNS - プロフィール - オンライン名刺交換 - 投稿 - メッセージ このチームに所属してます
  6. 開発環境 Eightフロントエンド - 言語 - JavaScript + Sass - 構成

    - React + Redux による SPA その他、社内向けライブラリがいくつか
  7. DX向上に関する取り組み

  8. これから話すこと - DX = 開発者体験、Developer Experienceを向上させるための取り組み - 本来の業務とは別に個人的にサブタスクとして行ってきたもの - 背景や実際の作業、そこから得られた学び

  9. コンポーネント ライブラリ・カタログの作成

  10. コンポーネント ライブラリ・カタログの作成 背景 - WebのUIを刷新していく動き - 大きめの新規開発がそのうちスタートするらしい そこで - 共通コンポーネントのライブラリを作り、コードの重複やデザインの差異をなくし

    たい - 一覧できるカタログを作り、エンジニア・デザイナー間のコミュニケーションを円 滑にしたい
  11. コンポーネント ライブラリ・カタログの作成 1. 手をあげ、技術選定や実装を任される 2. リポジトリを作成、実装 - ライブラリのビルド環境の整備 - テストやLinterによる品質の担保

    - カタログ作成 3. デザイナーとデザインガイドラインを策定
  12. コンポーネント ライブラリ・カタログの作成

  13. コンポーネント ライブラリ・カタログの作成 学び - 新卒とか関係なく、自ら手をあげることが大事 - ライブラリ作成やテスト、CIの整備などは技術的に考えることが多い - 周りのメンバーの意見を聞きながら進めることの大切さ

  14. コードの自動整形の導入

  15. コードの自動整形の導入 背景 - 多くのエンジニアが関わっており、 コードのスタイルにばらつきがあった そこで - 既存のコードを整形することで、可読性を上げたい - 新規のコードも整形することで、レビューでの指摘や不要なコード差分を

    削減したい
  16. コードの自動整形の導入 1. 既存のコード - 一定範囲内のファイルを整形し、コードの挙動に影響がないことを確認 2. 新規のコード - 一定範囲内のファイルのコミットをフックし、自動整形がかかるように 3.

    CIの整備 - 一定範囲内のファイルが整形されているかをチェックするように 4. 一定範囲内を広げながらPRを出し続け、全体へ
  17. コードの自動整形の導入

  18. コードの自動整形の導入 学び - 事前に他者との合意形成をしておく - 責任を持って推し進める - スモールスタートで段階的に進めていくこと

  19. まとめ - DX向上、エンジニアならば仕組みで解決 - 他者と合意形成を行い、責任を持って推し進める - 改善に協力的な環境

  20. 付録 【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. 21