Tweet
Tweet

Slide 1

Slide 1 text

© LY Corporation 澤入 圭佑 Yahoo! JAPANトップページ

Slide 2

Slide 2 text

© LY Corporation 2 澤入 圭佑 LINEヤフー株式会社 フロントエンドエンジニア 2019年度にヤフー株式会社に新卒入社 同年から現在まで Yahoo! JAPANトップページの開発業務 に従事 現在 : WEB版Yahoo! JAPANトップページ開発チームにて リーダー 趣味 : 観葉植物（エアプランツ収集）、3DCG制作 © LY Corporation

Slide 3

Slide 3 text

© LY Corporation 3 Yahoo! JAPANのユーザ数

Slide 4

Slide 4 text

© LY Corporation 4 サービスの特徴 • Web版はスマホ/PC/tabletの3デバイスに展開 • 各サービスへの起点となるポータルサイト • 社内の各種サービスと連携して開発 多種多様な情報をユーザに届ける Yahoo! JAPANトップページについて

Slide 5

Slide 5 text

© LY Corporation 5 技術スタック Yahoo! JAPANトップページを支える技術 TypeScript Next.js React Redux CSS Modules Playwright jest

Slide 6

Slide 6 text

© LY Corporation 6 MFE（マイクロフロントエンド） Yahoo! JAPANトップページを支える技術 • MFE（マイクロフロントエンド） • マイクロサービスの概念をフロントエンドに拡張 • アプリケーションの機能を分割しチームごとに開発 • トップページを以下の2つに分類 • AppShell → 分割したアプリケーションを呼び出す • Fragment → 分割されたアプリケーション AppShell Fragment

Slide 7

Slide 7 text

© LY Corporation 7 MFE（マイクロフロントエンド） Yahoo! JAPANトップページを支える技術 • 分割した機能（Fragment）はトップページと疎結合 • Fragmentを各サービスが個別・並列に改修可能 → 価値提供の速度向上 Top page service News service Buzz service … service

Slide 8

Slide 8 text

© LY Corporation 8 組織・チーム Yahoo! JAPANトップページの開発体制 • チーム開発がメイン • トップページ PC/SP の他に社内ツールの開発も担当 チームA チームB チームC

Slide 9

Slide 9 text

© LY Corporation 9 開発プロセス Yahoo! JAPANトップページの開発体制 ペアプロ/ペアワーク − スキルレベルに差のあるメンバーでペアを組んで知見を共有 − 作業で詰まったらすぐに集まって解消 TDD（テスト駆動開発） − テストの信頼性向上 − リファクタリングの推進

Slide 10

Slide 10 text

© LY Corporation 10 改善活動 Yahoo! JAPANトップページの開発体制 毎週1営業日を各自の改善の時間として確保 パフォーマンス 改善 デザイン システム MFE テスト ガイドライン 整備 各種フロー 改善

Slide 11

Slide 11 text

© LY Corporation TypeScript & Reactで大規模サービスを開発したい 最新技術を業務で活用してみたい 与えられた仕事だけでなく自分で模索してチャレンジしたい 01 02 03 11 こんな方に来てほしい

Slide 12

Slide 12 text

© LY Corporation 12 こんな方に来てほしい • ヤフーのサービスは100以上あり、トップページはたくさんのサービスが集まってコンテンツを提供し ている • どうしたらサービス別に、独立して高速なデプロイが実現できる？ • 人々の生活基盤を支え、災害や地震がおきても絶対に落とさない仕組みとは？ • 多くのリクエストを捌くための仕組みや工夫とは？ • 数値分析を繰り返して、たくさんのリリースを維持するための工夫とは？ • これだけ大規模なシステム郡、どうやってメンテナンスしている? • 障害ポイントをどのように解決している？

Slide 13

Slide 13 text

© LY Corporation 13 ぜひエントリーお待ちしています！

Slide 14

Slide 14 text

© LY Corporation

Slide 15

Slide 15 text

© 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桁目の数値を四捨五入