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

JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

K.Himeno
December 01, 2019

 JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

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

K.Himeno

December 01, 2019
Tweet

More Decks by K.Himeno

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Niconicoのサービス

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Repositories > Developer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 例1:改修前のnpm-scripts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Botが自動レビュー

    View full-size slide

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

    ● 我々はまだまだ道半ば

    View full-size slide

  28. ニコニコ生放送のフロントエンド開発は多くの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 full-size slide

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

    View full-size slide