Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Niconicoのサービス

Slide 4

Slide 4 text

ニコニコ動画 / 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/

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

PC版 SP版

Slide 9

Slide 9 text

Repositories > Developer

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

例1：改修前のnpm-scripts

Slide 15

Slide 15 text

例1：改修後のnpm-scripts

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

他には

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Botが自動レビュー

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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