2019/08/24 LL2019jp pixivをspaにしている話し

1. を にしている話
pixiv Inc.
後藤 尚輝
2019.08.24

2. 2
自己紹介
● 2018新卒 / 2年目
● pixiv運営本部 UI/UXチーム所属
● 主にモバイル版pixivの開発を担当
後藤 尚輝

3. モバイル版 は
年半かけて大方 になりました
3

4. 4
サンプル画像提供 ragrog

5. ● SPA化の過程であった課題と工夫
● SPA化で生まれた今戦っている課題
5
今回話すこと

6. ● スマートフォン向けにUI/UXを最適化したpixiv
● MAU 2200万 - PV 28億/月
● 2010年9月リリース / 2度のデザインリニューアル
● PHP Smarty
● jQueryTemplate / jQueryXHR を用いたpjax
6
モバイル版 について
最初期のモバイル版 pixiv

7. 7
作品画面リニューアル
2018.4

8. 8

9. 9
● 将来的にSPA(PWA)を目指す
○ フロントエンド技術の成熟
○ アプリと同等のUI/UX
● Vue.jsを採用
○ pixiv内の特殊な企画ページでの部分的なVue.jsの採用事例
● フルスクラッチではなく、メイン部分をVueで置き換えてSPAにする方針
リニューアルにあたり を選択

10. 10
SPA化の過程であった
課題と対応

11. 11
● [検出] Sentryの導入
○ エラートラッカのOSS
○ 自前でホストして運用
○ 詳細なユーザ分析・統計
○ ソースマップとの同期
○ slackへの通知
バグが 稀によく 本番環境に入る

12. 12
● [予防] Jest導入
○ フロントのテストが書ける環境を作る
○ Storyshots / ビジュアル回帰テスト
■ StorybookのStoryを定義しておくと
描画結果をテストできる
■ 少ない工数でカバレッジ確保!
○ GitLabCI
バグが 稀によく 本番環境に入る
Storybook

13. 13
● 開発ドキュメントの整備
○ フロントエンジニアならpixivを開発できる状態へ
○ 一通りの作業マニュアル
○ コンポーネントや状態管理(vuex)に対する考え方
● Notion(SaaS)を利用
○ リアルタイム編集
○ 高度なドキュメント編集機能
開発体制の確立

14. 14
● ディレクトリ / コードベースを標準に近づける
○ Nuxt.js等のディレクトリ構成を参考に整理
■ レガシー部分を分けて, SPA系統は標準っぽい構成へ
○ ESLintルールの地道に厳格化
● Typescriptへの移行
○ 型を見れば大体わかる状態
○ ドキュメンテーションとしての型
○ APIClient定義等を優先し, TSへ移行
開発体制の確立

15. 15
SPA化で生まれた
今戦っている課題

16. 16
フロントエンド開発参入障壁
● pixivの開発チームは皆フロント~サーバサイドをさわる人で構成
● フロントエンドエンジニア以外がフロントを触るのは非効率に
○ キャリアパス
○ 学習コスト / レビューコスト
● UI/UXチームを作成。 フロントエンドのリソースを集約
● UX設計とUI実装(それに伴うサーバサイド実装)を行う
● レコメンド(機械学習)チーム等と専門性を分担

17. 17
デスクトップ版 とのコード差異
● デスクトップ版pixiv(React)とモバイル版pixiv(Vue.js)の存在
● 基本的に全機能を2重実装
● Nexus(社内npm repo) / yarn workspace を導入
● APIClient / 翻訳 / Config系 のコード共通化 共通パッケージの一部

18. 18
まとめ

19. 19
まとめ
● コード量変化 (2018.2 => 2019.8)
○ *.vue : 1,938 => 88,924
○ *.js : 18,358 => 23,273
○ *.ts : 2,533 => 16,118
● SPAのフレームに則った開発体制/ 開発効率の向上
● ドキュメントの整備等で新規開発者がJOINして成果を出せる

20. 20
さいご
pixivはレガシーでしたが、
1年半でSPAになりました。
これからもやっていきます。

21. 21

22. 22
● pixivメディアガイド:
https://pixon.ads-pixiv.net/click?format=js&ad_group_id=2270&campaign_id=182
&creative_id=3674&zone_id=click
● 11歳のpixivが迎えた3度のリニューアル:
https://logmi.jp/tech/articles/320459
● チームごとに色づいたピクシブのStorybook運用
https://inside.pixiv.blog/do7be/5950
●
参考