Eightのフロントエンド〜改善の歴史と今後の展望〜 / Eight Frontend

■イベント
Sansan Builders Box 2019
https://jp.corp-sansan.com/sbb2019/

■登壇概要
タイトル：Eightのフロントエンド〜改善の歴史と今後の展望〜

登壇者：
Eight事業部 フロントエンジニア 青山修平

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Transcript

1. Eightのフロントエンド
   〜改善の歴史と今後の展望〜
   

   View Slide

2. Sansan Builders Box
   アジェンダ
   - Eightの紹介
   - Eightフロントエンドの歴史
   - 課題と改善
   - まとめ
   

   View Slide

3. Eightの紹介
   

   View Slide

4. Sansan Builders Box
   Eightの紹介
   名刺でつながる、ビジネスのためのSNS
   • 正確にデータ化
   • 近況情報が届く
   • すぐに名刺情報にアクセス
   • 気軽に連絡
   

   View Slide

5. Sansan Builders Box
   Eightの紹介
   名刺でつながる、ビジネスのためのSNS
   • 正確にデータ化
   • 近況情報が届く
   • すぐに名刺情報にアクセス
   • 気軽に連絡
   

   View Slide

6. Sansan Builders Box
   Eightの紹介
   名刺でつながる、ビジネスのためのSNS
   • 正確にデータ化
   • 近況情報が届く
   • すぐに名刺情報にアクセス
   • 気軽に連絡
   

   View Slide

7. Sansan Builders Box
   Eightの紹介
   名刺でつながる、ビジネスのためのSNS
   • 正確にデータ化
   • 近況情報が届く
   • すぐに名刺情報にアクセス
   • 気軽に連絡
   

   View Slide

8. Sansan Builders Box
   Eightの紹介
   名刺でつながる、ビジネスのためのSNS
   • 正確にデータ化
   • 近況情報が届く
   • すぐに名刺情報にアクセス
   • 気軽に連絡
   

   View Slide

9. Sansan Builders Box
   PCからも利⽤可能
   Eightの紹介
   

   View Slide

10. Sansan Builders Box
    - Eight企業向けプレミアム
    - Eight Career Design
    Eightの紹介 - 企業向けサービス
    

    View Slide

11. Sansan Builders Box
    名刺をスキャンするだけで、社内の名刺が共有できる
    Eight 企業向けプレミアム
    

    View Slide

12. Sansan Builders Box
    Eight Career Design
    タレントプールで転職シグナルをキャッチ
    

    View Slide

13. ⻘⼭ 修平（Shuhei Aoyama）
    • Eight Career Designを担当
    • さわり⼼地のよいUIを作っていきたい
    フロントエンドエンジニア
    ＠Mt_blue81
    

    View Slide

14. Eightフロントエンドの歴史
    

    View Slide

15. Sansan Builders Box
    Eightフロントエンドの歴史
    2012/2 2013/4 2015/12
    jQuery UI
    Backbone.js
    React + Redux
    

    View Slide

16. Sansan Builders Box
    - 初期リリース
    - 名刺ホルダー
    jQuery UI 時代
    

    View Slide

17. Sansan Builders Box
    Eightフロントエンドの歴史
    2012/2 2013/4 2015/12
    jQuery UI
    Backbone.js
    React + Redux
    

    View Slide

18. Sansan Builders Box
    - 機能拡充
    - メッセージ
    - 通知
    - プレミアム
    - フレームワーク導⼊
    Backbone.js + jQuery UI + CoffeeScript 時代
    

    View Slide

19. Sansan Builders Box
    Eightフロントエンドの歴史
    2012/2 2013/4 2015/12
    jQuery UI
    Backbone.js
    React + Redux
    

    View Slide

20. Sansan Builders Box
    - MVCの構成が複雑化
    - デザイン刷新
    - やってみる！
    React + Redux + ES6 時代
    

    View Slide

21. 課題と改善
    

    View Slide

22. Sansan Builders Box
    【UI】
    - モノリシックなCSS
    - バラバラなスタイル、コンポーネント
    【データ】
    - 煩雑な定形コード作成
    課題
    

    View Slide

23. モノリシックなCSS
    

    View Slide

24. Sansan Builders Box
    - 課題 - モノリシックなCSS
    参照
    

    View Slide

25. Sansan Builders Box
    - ID セレクター
    - 要素型セレクター
    - 複雑な結合⼦
    - !important
    - 課題 - モノリシックなCSS
    …
    …
    …
    

    View Slide

26. Sansan Builders Box
    - 課題 - モノリシックなCSS
    ここの背景⾊⽔⾊に変えたいな
    ※ 限りなく現実に近いフィクションです
    

    View Slide

27. Sansan Builders Box
    - 課題 - モノリシックなCSS
    なぜそこも・・・
    それじゃぁ、これで・・・
    ※ 限りなく現実に近いフィクションです
    

    View Slide

28. Sansan Builders Box
    - 課題 - モノリシックなCSS
    ※ 限りなく現実に近いフィクションです
    

    View Slide

29. 改善
    

    View Slide

30. Sansan Builders Box
    Eightフロントエンド 改善 の歴史
    2016~
    CSSのコンポーネント化
    2015/12
    React + Redux
    

    View Slide

31. Sansan Builders Box
    - CSSファイルをコンポーネントファイルに合わせる
    - １つのコンポーネントには１つのCSS
    - スタイル定義のセレクタに規約を設ける
    - コンポーネントの最外部に固有のclassをつける
    - ドキュメントの整備
    - 既存のCSSファイルをコンポーネント単位に
    - およそ 11,000⾏
    - 地道な作業
    - 改善 - CSSのコンポーネント化
    BEM scss-lint
    

    View Slide

32. Sansan Builders Box
    - 改善 - CSSのコンポーネント化
    Bコンポーネント
    Aコンポーネント
    疎結合
    

    View Slide

33. バラバラなスタイル、コンポーネント
    

    View Slide

34. Sansan Builders Box
    - 課題 - バラバラなスタイル、コンポーネント
    同じ？
    

    View Slide

35. Sansan Builders Box
    - 課題 - バラバラなスタイル、コンポーネント
    マウスホバー時
    

    View Slide

36. Sansan Builders Box
    - 課題 - バラバラなスタイル、コンポーネント
    似ているけど違う
    

    View Slide

37. 改善
    

    View Slide

38. Sansan Builders Box
    Eightフロントエンド 改善 の歴史
    2016~
    CSSのコンポーネント化
    2015/12
    React + Redux
    スタイルガイド
    

    View Slide

39. Sansan Builders Box
    - 参照しやすいように
    静的なドキュメントとして展開
    - PropType (型定義)が表現できる
    - 実際に触って動かせる
    - react-styleguidist
    - 改善 - スタイルガイド
    

    View Slide

40. Sansan Builders Box
    - 改善 - スタイルガイド
    こんなボタンにしたいんだけど
    スタイルガイドのこのボタンで
    あわせてみませんか？
    デザイナ エンジニア
    なるほど
    

    View Slide

41. Sansan Builders Box
    - 改善 - スタイルガイド
    ここはスタイルガイドの
    このコンポーネントでいけそうですね
    エンジニア
    デザイナ
    なるほど
    

    View Slide

42. さらに改善
    ~新スタイルガイド~
    

    View Slide

43. Sansan Builders Box
    - あらためて既存UIからの
    切り出し
    - デザイナとの確認
    - チームでの議論
    - 改善 - スタイルガイド New
    

    View Slide

44. Sansan Builders Box
    - Storybook
    - React Hooks
    - TypeScript
    - Jest
    - 改善 - スタイルガイド New
    プロダクト全体へ
    

    View Slide

45. Sansan Builders Box
    Eightフロントエンド 改善 の歴史
    2016~
    CSSのコンポーネント化
    2015/12
    React + Redux
    スタイルガイド
    新スタイルガイド
    

    View Slide

46. Sansan Builders Box
    - 改善 - スタイルガイド
    

    View Slide

47. Sansan Builders Box
    【UI】
    - モノリシックなCSS
    - バラバラなスタイル、コンポーネント
    【データ】
    - 煩雑な定形コード作成
    課題
    

    View Slide

48. 煩雑な定形コード作成
    

    View Slide

49. Sansan Builders Box
    - 課題 - 煩雑な定形コード作成
    • YAML or JSON
    • RESTful API
    • a.k.a. Swagger
    

    View Slide

50. Sansan Builders Box
    - 課題 - 煩雑な定形コード作成
    Swagger UI
    https://swagger.io/tools/swagger-ui
    

    View Slide

51. Sansan Builders Box
    - 課題 - 煩雑な定形コード作成
    サーバエンジニア アプリエンジニア フロントエンジニア
    

    View Slide

52. Sansan Builders Box
    - 課題 - 煩雑な定形コード作成
    194 API (2019/10時点)
    ⼤量のコードが必要
    

    View Slide

53. Sansan Builders Box
    - 課題 - 煩雑な定形コード作成
    view
    middleware
    action
    reducer
    store
    Redux
    React
    定形処理のコード群
    • 通信部分
    • reducer
    コピペコード
    

    View Slide

54. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    定義があるなら⾃動的にデータを
    取得、格納できるのでは
    

    View Slide

55. 改善
    

    View Slide

56. Sansan Builders Box
    Eightフロントエンド 改善 の歴史
    2016~
    CSSのコンポーネント化
    2015/12
    React + Redux
    スタイルガイド
    新スタイルガイド
    コード⾃動化
    2017~ 2018/5~
    

    View Slide

57. Sansan Builders Box
    - swagger-client
    - API定義から⾃動で通信を⾏う
    - normalizr
    - ネストしたリソースを正規化
    - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
    - 改善 - ⾃動でデータを取り扱う
    

    View Slide

58. Sansan Builders Box
    - API定義から専⽤のコードを⽣成するツールを作成
    - normalizrで利⽤するschema定義
    - actionのtype定義
    - データの型情報など
    - ⽣成されたコードを使って通信、レスポンス解析を⾏うための
    middlewareとreducerを作成
    - 改善 - ⾃動でデータを取り扱う
    https://github.com/eightcard/openapi-to-normalizr
    

    View Slide

59. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    {
    type: GET_PET__PET_ID_,
    payload: { petId: 1 },
    }
    dispatch
    action
    

    View Slide

60. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    専⽤middleware action
    response
    schema +
    normalizrで正規化
    dispatch
    swagger-clientで通信
    

    View Slide

61. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    id: 2
    id: 1
    Pet PetStore
    id: b
    id: a
    store
    view
    React
    正規化により
    同じデータは⼀箇所に
    専⽤
    reducer
    

    View Slide

62. Sansan Builders Box
    normalizrのメリット
    - 更新APIなどではレスポンスを利⽤して、なにもしなくてもデータ更新
    - APIのレスポンスに更新済みデータがあればschemaに従って更新
    - ネストしているリソースも正規化するので
    異なるAPI由来でもデータ更新
    - 改善 - ⾃動でデータを取り扱う
    {
    petStore: {
    id: “a”,
    pet: {
    petId: 1,
    kind: “cat”
    }
    }
    }
    store
    petStore更新
    pet更新
    

    View Slide

63. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    view
    middleware
    action
    reducer
    store
    定形処理のコード群
    • 通信部分
    • reducer
    Redux
    React
    

    View Slide

64. Sansan Builders Box
    - 改善 - ⾃動でデータを取り扱う
    action schema reducer
    不要 不要
    x 4
    

    View Slide

65. まとめ
    

    View Slide

66. Sansan Builders Box
    - フロントエンドの歴史と改善
    - レガシーへの対応も新しいチャレンジも
    - 技術だけではなくチームを巻き込んだ改善
    まとめ
    

    View Slide

67. Sansan Builders Box
    まとめ
    デザイナ, PO フロントエンド サーバサイド
    

    View Slide

68. View Slide