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

リリースから17年を迎える pixiv のフロントエンドにはこれまで、 Smarty, Vue.js, React, Next.js の4つの実装が存在してきました。この混沌とした世界を Next.js に統一するこれまでの取り組み、対面した課題、今後の展望についてお話しします。
2024/9/20 pixiv DEV MEETUP 2024 にて発表 https://conference.pixiv.co.jp/2024/dev-meetup

Transcript

1. pixivのフロントエンド開発の これまでとこれから yto (ユト)
2. 2021年新卒入社 pixiv事業本部 小説チーム (〜2023.12) → コミュニティユニット (〜現在) フロントエンドエンジニア・たまに PdMをやっています yto (ユト)
3. 話すこと 1. pixivのフロントエンドのこれまで • PHP の世界に React / Vue.js が入り、 Next.js の世界ができるまで 2. pixivのフロントエンドの現在 • Next.js 化プロジェクトの進行と得られた恩恵 3. Next.js化プロジェクトの課題 4. pixivのフロントエンドのこれから ※説明のため、意味が大きく変わらない範囲で話が簡略化されている箇所があります。
4. pixivのフロントエンド のこれまで
5. www.pixiv.netの誕生 PHPで実装されていた （2007年〜） https://www.itmedia.co.jp/news/articles/0803/19/news059.html
6. スマートフォン版touch.pixiv.netの誕生 デスクトップPC版 (www.pixiv.net) とは別ドメイン touch.pixiv.net で リリース PHPで実装されていた （2010年〜） https://www.pixiv.co.jp/news/press-release/article/878/
7. サービスの拡大・UIの進化 複雑なロジック・アニメーション等 のリッチな UI が実装されていく PHP + Smarty + js, css (+ jQuery等)
8. デスクトップ版・スマホ版のドメイン統合 www.pixiv.net に統一 フロントエンドの実装は別 れたまま → UserAgent によって出 し分ける （2018年）
9. SPAの世界に移行 デスクトップ版が React, スマホ版が Vue.js を導入 し、それぞれが SPA 化さ れた （2018年〜）
10. SPAの世界に移行 二重実装のつらさを緩和 するためにコードの共通 化が行われるように 共通のロジック・定数などをパッケージ化
11. 主要ページのレスポンシブ化 （2020年〜）
12. Next.js の世界の誕生 新規のリポジトリで Next.js プロジェクトを作成し、実装を リプレイスしていく取り組み （2022年〜）
13. pixivのフロントエンドのこれまで
14. pixivのフロントエンド の現在
15. SPA (React, Vue.js) 世界の課題 • ビルドやテストにかかる時間を短縮したいが、複雑な設 定ファイルに手を入れるのが難しい 1から設定されたビルドシステム
16. SPA (React, Vue.js) 世界の課題 内部に存在する複数のフロントエンドプロジェクトと、そ れをまとめる yarn workspaces • 影響範囲が広くてライブラリアップデートが難しい • デプロイロック待ちの発生 関係者が多い大きなモノレポ
17. SPA (React, Vue.js) 世界の課題 • あらゆる機能改修をそれぞれ実装する必要がある ◦ → ダッシュボード・リクエスト機能等をレスポンシブ で作ったことで、開発速度の違いが明らかに • 新規開発者の学習コストもそれぞれかかる デスクトップ版とスマホ版の二重実装
18. 新規のNext.jsプロジェクトで pixivのフロントエンドを リプレイスする
19. ねらい • pixivのフロントエンド開発者が、フロントエンド開発に 対してオーナーシップを持てるようにする ◦ ライブラリのアップデート、新しいライブラリの導入ができる ◦ ビルドが遅かったら改善できる ◦ テストやデプロイのフローを改善できる ◦ バックエンド・他プロジェクトとデプロイがかち合わない なぜ新規のリポジトリ？
20. ねらい • 既存の React 実装が移行しやすい • 広く普及したフレームワークに乗ることができる ◦ pixiv固有のビルドシステムを理解しなくても公式の丁寧なド キュメントを読めばいい ◦ 社内でも利用実績が増えていて、知見が共有しやすい なぜNext.js？
21. キックオフ〜最初のリリースまで エンジニア2名を中心に、2022年3月末〜 8月のおよそ4ヶ月でリクエスト機能が Next.js に 全体に関わる実装を移植 → ページごとに移植
22. https://inside.pixiv.blog/2022/08/15/120000
23. 現在まで 移行された既存ページの例 • デスクトップ版のイラスト・マンガ・小説投稿画面 • pixiv小説の「FACTORYでつくる」ページ • 設定画面（デザインリニューアル含む） • お知らせページ（デザインリニューアル含む） 新規開発は Next.js, 既存ページは徐々に移行
24. 得られた恩恵
25. • デプロイフローの改善 ◦ before: ロックをとって手動ビルドしてデプロイ ◦ after: MR をマージしたら CI が自動でデプロイ • ビルド時間の改善 ◦ before: 本番ビルド 〜10分、開発ビルド 〜1分 ◦ after: 本番ビルド 〜5分、開発ビルド 〜5秒 コードベースに改善を入れやすくなった
26. コードベースに改善を入れやすくなった • 新しいライブラリへの置き換え ◦ 　　styled-components → 　　Tailwind Css ◦ 　　Redux → 　　TanStack Query
27. 全てが最高になった！
28. ……わけではない
29. Next.js移行 (リプレイス) の課題
30. 課題1: 3つの世界が4つの世界に pixivには150ほどのページが存在し、新規 開発も積極的に行われている 移行期間が長引くほど、 Smarty / React / Vue.js / Next.js の4つの世界を並行して開 発し続けることに
31. 課題1: 3つの世界が4つの世界に 当初の見積もりの2倍程度の 時間がかかってしまった 小説投稿画面 Next.js 移行時の反省
32. 課題1: 3つの世界が4つの世界に • Class Component を Function Component に全て書き換え • 表紙画像生成の状態の持ち方を整理 →時間をかけて完璧な実装を目指すより、まずは 移行を終わらせることを目指したほうが良い 小説投稿画面 Next.js 移行時の反省
33. 課題2: pixiv内の他ページとの遷移 Next.js で新規実装されたページ ↔ React / Vue.js で実装 されたページが非 SPA 遷移になる • 遷移・ブラウザバックに時間がかかる • 遷移前後の状態が保たれない
34. 課題2: pixiv内の他ページとの遷移 ホーム (　) で作品を眺める → 続きが気になって作品ページ (　) に飛ぶ → 読み終わってブラウザバックすると作品の 並びが変わり、スクロール位置もリセット pixivの「ホーム」タブ実装時の課題
35. 課題2: pixiv内の他ページとの遷移 BFCache (Back/forward Cache) が有効になるようにし て、ブラウザバック時にキャッシュから高速に元のページ の状態を復元 pixivの「ホーム」タブ実装時の課題 https://web.dev/articles/bfcache#optimize-your-pages-for-bfcache
36. 課題2: pixiv内の他ページとの遷移 BFCache が有効な場合 BFCache が無効になり そうな場合
37. 課題3: ページサイズの増加と表示速度の低下 Next.js 化したページでは • TTFB (Time to first bite) が悪化 • LCP (Largest Contentful Paint) が改善 しており、初期に移行していた要素数の少ないページでは 恩恵のほうが大きかった
38. 課題3: ページサイズの増加と表示速度の低下 コンテンツが多いページでは最初に 降ってくる HTML のサイズが大きい → TTFB の悪化によって体感できる程 度にページ速度が低下
39. 課題3: ページサイズの増加と表示速度の低下 検討中の改善 • 初回アクセスで表示するコンテンツ量 の調整 • 翻訳データの遅延読み込み
40. pixivのフロントエンド のこれから
41. スマホ版「ホーム」タブのリリース 今年7/1から段階的リリース開始 🎉 pixivの中でアクセス数が多いページの1つ → ここまでに話したような課題も見えてきた スマホ版pixivのトップページが Next.js に [pixiv] お知らせ - モバイル版pixivのトップページに新しいタブが追加されます
42. pixivのフロントエンドのこれから • ページ速度の改善 • 4つの世界を1つの世界に ◦ 作品詳細画面など主要ページの Next.js 化 より速く、より多くの価値をユーザーに 届けられるフロントエンド開発
43. END