JSConf JP 2019のドワンゴのスポンサートークの資料です。 2019/01/12 https://jsconf.jp/2019/
JSConf JP 2019Sponsor Talk株式会社ドワンゴ2019/12/01
View Slide
Introduction● Kosei Himeno● Frontend Engineer● ニコニコ生放送 開発改善グループ リーダー○ 主に、開発中の辛いところを改善して回ってます● GitHub: Himenon
Niconicoのサービス
ニコニコ動画 / Video on-demandoniconico douga was the firstwebsite to overlay usercomments over video tocreate a new viewingexperiencehttps://www.nicovideo.jp/
ニコニコ生放送 / Live Streamingniconico live is live streamingservice.https://live.nicovideo.jp/
N予備校 / EducationFϥʔχϯάαʔϏεhttps://www.nnn.ed.nico/
少し話すこと• ニコニコ生放送の開発者に対するの環境改善の事例について紹介
PC版 SP版
Repositories > Developer
鮮度を維持する● モノレポ化○ Lernaの導入● 自動バージョン更新○ Renovateの導入
とはいえ、リポジトリやライブラリの境界は存在するため鮮度が落ちる
問題の認識ができないと老朽化が進む
影響範囲を可視化していく● 口頭だけでは伝わらないことが多い!● 例を3つ紹介1. npm-scriptsのメンテナンス2. ファイルの依存関係が設計とどれくらい近いのか?3. 変更を入れたライブラリの利用先の認識
例1:改修前のnpm-scripts
例1:改修後のnpm-scripts
例2:ファイルの依存関係を可視化
依存関係を可視化するライブラリはあったが...
依存関係を可視化するライブラリはあったが...人の手に負えるレベルではない(今後の課題でもある)
例3:GitHub Enterpriseにあるパッケージの利用先の依存関係Library Apackage.json• dependencis• devDependenciesLibrary Bpackage.json• dependencis• devDependencies???package.json
例3:GitHub Enterpriseにあるパッケージの利用先の依存関係
ここで利用したライブラリorアプリケーション● npm-scriptsの実行順序可視化https://github.com/Himenon/npm-run-script-chain● ファイルの依存関係の可視化https://github.com/Himenon/code-dependency● ライブラリの依存関係可視化https://github.com/Himenon/dependents-view
他には
開発手順・ルールを共有する● レビューを一部自動化danger-jsを強化したようなものがある(内製)○ 自動ラベル付け○ ラベルでCIのタスクを分岐など
問題を認識する● AnnotationをSlackに通知TODO/FIXME/@ts-ignoreなど。● ファイルサイズの遷移をレポーティングするPull Request / Merge後などを選択できる
PRコメントにファイルサイズの増減通知
Botが自動レビュー
課題はまだまだ潜む● 課題を関係者(非エンジニアも含む)で互いに理解し合うことが解決への第一歩● 見える化・自動化を行いあらゆる改善の効率を上げていく● 我々はまだまだ道半ば
ニコニコ生放送のフロントエンド開発は多くのJSのライブラリで支えられているajv chalk chokidar commitizen csp-header dependency-cruiserdirectory-tree dot-prop enhanced-resolve gray-matter ip lru-cache markdown-table mdast mobx normalize-package-dataparse-diff pidusage pluralize portfinder react recursive-readdirresolve resolve-pkg rimraf rtcpeerconnection-shim sanitize-html screenfull sort-package-json stdout-stream svgo true-case-path vue webpack ...
ドワンゴは大規模フロントエンドにチャレンジしたい人を募集しています。https://dwango.co.jp/recruit/