JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

JSConf JP 2019のドワンゴのスポンサートークの資料です。
2019/01/12
https://jsconf.jp/2019/

Transcript

1. JSConf JP 2019
   Sponsor Talk
   株式会社ドワンゴ
   2019/12/01
   

   View Slide

2. Introduction
   ● Kosei Himeno
   ● Frontend Engineer
   ● ニコニコ生放送 開発改善グループ リーダー
   ○ 主に、開発中の辛いところを改善して回ってます
   ● GitHub: Himenon
   

   View Slide

3. Niconicoのサービス
   

   View Slide

4. ニコニコ動画 / Video on-demando
   niconico douga was the first
   website to overlay user
   comments over video to
   create a new viewing
   experience
   https://www.nicovideo.jp/
   

   View Slide

5. ニコニコ生放送 / Live Streaming
   niconico live is live streaming
   service.
   https://live.nicovideo.jp/
   

   View Slide

6. N予備校 / Education
   FϥʔχϯάαʔϏε
   https://www.nnn.ed.nico/
   

   View Slide

7. 少し話すこと
   • ニコニコ生放送の開発者に対するの環境改善の
   事例について紹介
   

   View Slide

8. PC版 SP版
   

   View Slide

9. Repositories > Developer
   

   View Slide

10. 鮮度を維持する
    ● モノレポ化
    ○ Lernaの導入
    ● 自動バージョン更新
    ○ Renovateの導入
    

    View Slide

11. とはいえ、リポジトリや
    ライブラリの境界は存在するため
    鮮度が落ちる
    

    View Slide

12. 問題の認識ができないと
    老朽化が進む
    

    View Slide

13. 影響範囲を可視化していく
    ● 口頭だけでは伝わらないことが多い！
    ● 例を3つ紹介
    1. npm-scriptsのメンテナンス
    2. ファイルの依存関係が設計とどれくらい近いのか？
    3. 変更を入れたライブラリの利用先の認識
    

    View Slide

14. 例1：改修前のnpm-scripts
    

    View Slide

15. 例1：改修後のnpm-scripts
    

    View Slide

16. 例2：ファイルの依存関係を可視化
    

    View Slide

17. 依存関係を可視化するライブ
    ラリはあったが...
    

    View Slide

18. 依存関係を可視化するライブ
    ラリはあったが...
    

    View Slide

19. 依存関係を可視化するライブ
    ラリはあったが...
    人の手に負えるレベルではない
    （今後の課題でもある）
    

    View Slide

20. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係
    Library A
    package.json
    • dependencis
    • devDependencies
    Library B
    package.json
    • dependencis
    • devDependencies
    ???
    package.json
    

    View Slide

21. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係
    

    View Slide

22. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係
    

    View Slide

23. ここで利用したライブラリorアプリケーション
    ● npm-scriptsの実行順序可視化
    https://github.com/Himenon/npm-run-script-chain
    ● ファイルの依存関係の可視化
    https://github.com/Himenon/code-dependency
    ● ライブラリの依存関係可視化
    https://github.com/Himenon/dependents-view
    

    View Slide

24. 他には
    

    View Slide

25. 開発手順・ルールを共有する
    ● レビューを一部自動化
    danger-jsを強化したようなものがある（内製）
    ○ 自動ラベル付け
    ○ ラベルでCIのタスクを分岐など
    

    View Slide

26. 問題を認識する
    ● AnnotationをSlackに通知
    TODO/FIXME/@ts-ignoreなど。
    ● ファイルサイズの遷移をレポーティングする
    Pull Request / Merge後などを選択できる
    

    View Slide

27. PRコメントにファイルサイズの増減通知
    

    View Slide

28. Botが自動レビュー
    

    View Slide

29. 課題はまだまだ潜む
    ● 課題を関係者（非エンジニアも含む）で互いに
    理解し合うことが解決への第一歩
    ● 見える化・自動化を行いあらゆる改善の効率を上げてい
    く
    ● 我々はまだまだ道半ば
    

    View Slide

30. ニコニコ生放送のフロントエンド開発は多くのJSのライブラリで支えられている
    ajv chalk chokidar commitizen csp-header dependency-cruiser
    directory-tree dot-prop enhanced-resolve gray-matter ip lru-
    cache markdown-table mdast mobx normalize-package-data
    parse-diff pidusage pluralize portfinder react recursive-readdir
    resolve resolve-pkg rimraf rtcpeerconnection-shim sanitize-
    html screenfull sort-package-json stdout-stream svgo true-
    case-path vue webpack ...
    

    View Slide

31. ドワンゴは大規模フロントエンドに
    チャレンジしたい人を募集しています。
    https://dwango.co.jp/recruit/
    

    View Slide