pixivのフロントエンド開発のこれまでとこれから / The evolution and future of pixiv’s frontend development

by yto (60°)

Slide 1

Slide 1 text

pixivのフロントエンド開発のこれまでとこれから yto (ユト)

Slide 2

Slide 2 text

2021年新卒入社 pixiv事業本部小説チーム (〜2023.12) → コミュニティユニット (〜現在) フロントエンドエンジニア・たまに PdMをやっています yto (ユト)

Slide 3

Slide 3 text

話すこと 1. pixivのフロントエンドのこれまで ● PHP の世界に React / Vue.js が入り、 Next.js の世界ができるまで 2. pixivのフロントエンドの現在 ● Next.js 化プロジェクトの進行と得られた恩恵 3. Next.js化プロジェクトの課題 4. pixivのフロントエンドのこれから ※説明のため、意味が大きく変わらない範囲で話が簡略化されている箇所があります。

Slide 4

Slide 4 text

pixivのフロントエンドのこれまで

Slide 5

Slide 5 text

www.pixiv.netの誕生 PHPで実装されていた（2007年〜） https://www.itmedia.co.jp/news/articles/0803/19/news059.html

Slide 6

Slide 6 text

スマートフォン版touch.pixiv.netの誕生デスクトップPC版 (www.pixiv.net) とは別ドメイン touch.pixiv.net でリリース PHPで実装されていた（2010年〜） https://www.pixiv.co.jp/news/press-release/article/878/

Slide 7

Slide 7 text

サービスの拡大・UIの進化複雑なロジック・アニメーション等のリッチな UI が実装されていく PHP + Smarty + js, css (+ jQuery等)

Slide 8

Slide 8 text

デスクトップ版・スマホ版のドメイン統合 www.pixiv.net に統一フロントエンドの実装は別れたまま → UserAgent によって出し分ける（2018年）

Slide 9

Slide 9 text

SPAの世界に移行デスクトップ版が React, スマホ版が Vue.js を導入し、それぞれが SPA 化された（2018年〜）

Slide 10

Slide 10 text

SPAの世界に移行二重実装のつらさを緩和するためにコードの共通化が行われるように共通のロジック・定数などをパッケージ化

Slide 11

Slide 11 text

主要ページのレスポンシブ化（2020年〜）

Slide 12

Slide 12 text

Next.js の世界の誕生新規のリポジトリで Next.js プロジェクトを作成し、実装をリプレイスしていく取り組み（2022年〜）

Slide 13

Slide 13 text

pixivのフロントエンドのこれまで

Slide 14

Slide 14 text

pixivのフロントエンドの現在

Slide 15

Slide 15 text

SPA (React, Vue.js) 世界の課題 ● ビルドやテストにかかる時間を短縮したいが、複雑な設定ファイルに手を入れるのが難しい 1から設定されたビルドシステム

Slide 16

Slide 16 text

SPA (React, Vue.js) 世界の課題内部に存在する複数のフロントエンドプロジェクトと、それをまとめる yarn workspaces ● 影響範囲が広くてライブラリアップデートが難しい ● デプロイロック待ちの発生関係者が多い大きなモノレポ

Slide 17

Slide 17 text

SPA (React, Vue.js) 世界の課題 ● あらゆる機能改修をそれぞれ実装する必要がある ○ → ダッシュボード・リクエスト機能等をレスポンシブで作ったことで、開発速度の違いが明らかに ● 新規開発者の学習コストもそれぞれかかるデスクトップ版とスマホ版の二重実装

Slide 18

Slide 18 text

新規のNext.jsプロジェクトで pixivのフロントエンドをリプレイスする

Slide 19

Slide 19 text

ねらい ● pixivのフロントエンド開発者が、フロントエンド開発に対してオーナーシップを持てるようにする ○ ライブラリのアップデート、新しいライブラリの導入ができる ○ ビルドが遅かったら改善できる ○ テストやデプロイのフローを改善できる ○ バックエンド・他プロジェクトとデプロイがかち合わないなぜ新規のリポジトリ？

Slide 20

Slide 20 text

ねらい ● 既存の React 実装が移行しやすい ● 広く普及したフレームワークに乗ることができる ○ pixiv固有のビルドシステムを理解しなくても公式の丁寧なドキュメントを読めばいい ○ 社内でも利用実績が増えていて、知見が共有しやすいなぜNext.js？

Slide 21

Slide 21 text

キックオフ〜最初のリリースまでエンジニア2名を中心に、2022年3月末〜 8月のおよそ4ヶ月でリクエスト機能が Next.js に全体に関わる実装を移植 → ページごとに移植

Slide 22

Slide 22 text

https://inside.pixiv.blog/2022/08/15/120000

Slide 23

Slide 23 text

現在まで移行された既存ページの例 ● デスクトップ版のイラスト・マンガ・小説投稿画面 ● pixiv小説の「FACTORYでつくる」ページ ● 設定画面（デザインリニューアル含む） ● お知らせページ（デザインリニューアル含む）新規開発は Next.js, 既存ページは徐々に移行

Slide 24

Slide 24 text

得られた恩恵

Slide 25

Slide 25 text

● デプロイフローの改善 ○ before: ロックをとって手動ビルドしてデプロイ ○ after: MR をマージしたら CI が自動でデプロイ ● ビルド時間の改善 ○ before: 本番ビルド〜10分、開発ビルド〜1分 ○ after: 本番ビルド〜5分、開発ビルド〜5秒コードベースに改善を入れやすくなった

Slide 26

Slide 26 text

コードベースに改善を入れやすくなった ● 新しいライブラリへの置き換え ○ 　　styled-components → 　　Tailwind Css ○ 　　Redux → 　　TanStack Query

Slide 27

Slide 27 text

全てが最高になった！

Slide 28

Slide 28 text

……わけではない

Slide 29

Slide 29 text

Next.js移行 (リプレイス) の課題

Slide 30

Slide 30 text

課題1: 3つの世界が4つの世界に pixivには150ほどのページが存在し、新規開発も積極的に行われている移行期間が長引くほど、 Smarty / React / Vue.js / Next.js の4つの世界を並行して開発し続けることに

Slide 31

Slide 31 text

課題1: 3つの世界が4つの世界に当初の見積もりの2倍程度の時間がかかってしまった小説投稿画面 Next.js 移行時の反省

Slide 32

Slide 32 text

課題1: 3つの世界が4つの世界に ● Class Component を Function Component に全て書き換え ● 表紙画像生成の状態の持ち方を整理 →時間をかけて完璧な実装を目指すより、まずは移行を終わらせることを目指したほうが良い小説投稿画面 Next.js 移行時の反省

Slide 33

Slide 33 text

課題2: pixiv内の他ページとの遷移 Next.js で新規実装されたページ ↔ React / Vue.js で実装されたページが非 SPA 遷移になる ● 遷移・ブラウザバックに時間がかかる ● 遷移前後の状態が保たれない

Slide 34

Slide 34 text

課題2: pixiv内の他ページとの遷移ホーム (　) で作品を眺める → 続きが気になって作品ページ (　) に飛ぶ → 読み終わってブラウザバックすると作品の並びが変わり、スクロール位置もリセット pixivの「ホーム」タブ実装時の課題

Slide 35

Slide 35 text

課題2: pixiv内の他ページとの遷移 BFCache (Back/forward Cache) が有効になるようにして、ブラウザバック時にキャッシュから高速に元のページの状態を復元 pixivの「ホーム」タブ実装時の課題 https://web.dev/articles/bfcache#optimize-your-pages-for-bfcache

Slide 36

Slide 36 text

課題2: pixiv内の他ページとの遷移 BFCache が有効な場合 BFCache が無効になりそうな場合

Slide 37

Slide 37 text

課題3: ページサイズの増加と表示速度の低下 Next.js 化したページでは ● TTFB (Time to ﬁrst bite) が悪化 ● LCP (Largest Contentful Paint) が改善しており、初期に移行していた要素数の少ないページでは恩恵のほうが大きかった

Slide 38

Slide 38 text

課題3: ページサイズの増加と表示速度の低下コンテンツが多いページでは最初に降ってくる HTML のサイズが大きい → TTFB の悪化によって体感できる程度にページ速度が低下

Slide 39

Slide 39 text

課題3: ページサイズの増加と表示速度の低下検討中の改善 ● 初回アクセスで表示するコンテンツ量の調整 ● 翻訳データの遅延読み込み

Slide 40

Slide 40 text

pixivのフロントエンドのこれから

Slide 41

Slide 41 text

スマホ版「ホーム」タブのリリース今年7/1から段階的リリース開始 🎉 pixivの中でアクセス数が多いページの1つ → ここまでに話したような課題も見えてきたスマホ版pixivのトップページが Next.js に [pixiv] お知らせ - モバイル版pixivのトップページに新しいタブが追加されます

Slide 42

Slide 42 text

pixivのフロントエンドのこれから ● ページ速度の改善 ● 4つの世界を1つの世界に ○ 作品詳細画面など主要ページの Next.js 化より速く、より多くの価値をユーザーに届けられるフロントエンド開発

Slide 43

Slide 43 text

END