Pro Yearly is on sale from $80 to $50! »

JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

3a206ec7df76023cca167a8886b69672?s=47 K.Himeno
December 01, 2019

 JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

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

3a206ec7df76023cca167a8886b69672?s=128

K.Himeno

December 01, 2019
Tweet

Transcript

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

  2. Introduction • Kosei Himeno • Frontend Engineer • ニコニコ生放送 開発改善グループ

    リーダー ◦ 主に、開発中の辛いところを改善して回ってます • GitHub: Himenon
  3. Niconicoのサービス

  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/
  5. ニコニコ生放送 / Live Streaming niconico live is live streaming service.

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

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

  8. PC版 SP版

  9. Repositories > Developer

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

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

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

  13. 影響範囲を可視化していく • 口頭だけでは伝わらないことが多い! • 例を3つ紹介 1. npm-scriptsのメンテナンス 2. ファイルの依存関係が設計とどれくらい近いのか? 3.

    変更を入れたライブラリの利用先の認識
  14. 例1:改修前のnpm-scripts

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

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

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

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

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

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

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

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

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

  24. 他には

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

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

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

  28. Botが自動レビュー

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

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