フロントエンド開発事例③ Yahoo! JAPAN トップページ

登壇者: 澤入圭佑(ksawairi)
フロントエンドエンジニア
LINEヤフー株式会社 メディアカンパニー ヤフーメディア統括本部 開発2本部 開発3部 開発3チーム

2019年4月入社のフロントエンドエンジニアです。入社から現在までY！トップページ WEB の開発に携わっています。

1. © LY Corporation 澤入 圭佑 Yahoo! JAPANトップページ
2. © LY Corporation 2 澤入 圭佑 LINEヤフー株式会社 フロントエンドエンジニア 2019年度にヤフー株式会社に新卒入社 同年から現在まで Yahoo! JAPANトップページの開発業務 に従事 現在 : WEB版Yahoo! JAPANトップページ開発チームにて リーダー 趣味 : 観葉植物（エアプランツ収集）、3DCG制作 © LY Corporation
3. © LY Corporation 3 Yahoo! JAPANのユーザ数
4. © LY Corporation 4 サービスの特徴 • Web版はスマホ/PC/tabletの3デバイスに展開 • 各サービスへの起点となるポータルサイト • 社内の各種サービスと連携して開発 多種多様な情報をユーザに届ける Yahoo! JAPANトップページについて
5. © LY Corporation 5 技術スタック Yahoo! JAPANトップページを支える技術 TypeScript Next.js React Redux CSS Modules Playwright jest
6. © LY Corporation 6 MFE（マイクロフロントエンド） Yahoo! JAPANトップページを支える技術 • MFE（マイクロフロントエンド） • マイクロサービスの概念をフロントエンドに拡張 • アプリケーションの機能を分割しチームごとに開発 • トップページを以下の2つに分類 • AppShell → 分割したアプリケーションを呼び出す • Fragment → 分割されたアプリケーション AppShell Fragment
7. © LY Corporation 7 MFE（マイクロフロントエンド） Yahoo! JAPANトップページを支える技術 • 分割した機能（Fragment）はトップページと疎結合 • Fragmentを各サービスが個別・並列に改修可能 → 価値提供の速度向上 Top page service News service Buzz service … service
8. © LY Corporation 8 組織・チーム Yahoo! JAPANトップページの開発体制 • チーム開発がメイン • トップページ PC/SP の他に社内ツールの開発も担当 チームA チームB チームC
9. © LY Corporation 9 開発プロセス Yahoo! JAPANトップページの開発体制 ペアプロ/ペアワーク − スキルレベルに差のあるメンバーでペアを組んで知見を共有 − 作業で詰まったらすぐに集まって解消 TDD（テスト駆動開発） − テストの信頼性向上 − リファクタリングの推進
10. © LY Corporation 10 改善活動 Yahoo! JAPANトップページの開発体制 毎週1営業日を各自の改善の時間として確保 パフォーマンス 改善 デザイン システム MFE テスト ガイドライン 整備 各種フロー 改善
11. © LY Corporation TypeScript & Reactで大規模サービスを開発したい 最新技術を業務で活用してみたい 与えられた仕事だけでなく自分で模索してチャレンジしたい 01 02 03 11 こんな方に来てほしい
12. © LY Corporation 12 こんな方に来てほしい • ヤフーのサービスは100以上あり、トップページはたくさんのサービスが集まってコンテンツを提供し ている • どうしたらサービス別に、独立して高速なデプロイが実現できる？ • 人々の生活基盤を支え、災害や地震がおきても絶対に落とさない仕組みとは？ • 多くのリクエストを捌くための仕組みや工夫とは？ • 数値分析を繰り返して、たくさんのリリースを維持するための工夫とは？ • これだけ大規模なシステム郡、どうやってメンテナンスしている? • 障害ポイントをどのように解決している？
13. © LY Corporation 13 ぜひエントリーお待ちしています！
14. © LY Corporation
15. © LY Corporation 出典 15 P 項目 コンテンツ・データ概要 出典 4 約8500万人が見ています Yahoo! JAPAN 月間アクティブ ユーザ数 : 約8500万人 「ニールセン デジタルコンテンツ視聴率」（2022年1月〜12月の月平均） [Yahoo! JAPAN（ブランドレベル）で集計、2歳以上の男女。スマートフォンと パソコンのユーザの重複を含まない。] ※上3桁目の数値を四捨五入 日本のインターネット利用者数 : 約10000万人 • 総務省統計局「2022年（令和4年） 12月報 人口推計」（2022年12月20日公 表） • 総務省「通信利用動向調査」（2022年5月27日公表） ※ 上記の総人口とインターネット利用率の数値を元に算出 ➔ 総人口1億2513万人×82.9%=1億373万2770人 ※上3桁目の数値を四捨五入