Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

LY Corporation Tech

September 17, 2024
Tweet

More Decks by LY Corporation Tech

Other Decks in Technology

Transcript

  1. © LY Corporation 2 澤入 圭佑 LINEヤフー株式会社 フロントエンドエンジニア 2019年度にヤフー株式会社に新卒入社 同年から現在まで

    Yahoo! JAPANトップページの開発業務 に従事 現在 : WEB版Yahoo! JAPANトップページ開発チームにて リーダー 趣味 : 観葉植物(エアプランツ収集)、3DCG制作 © LY Corporation
  2. © LY Corporation 4 サービスの特徴 • Web版はスマホ/PC/tabletの3デバイスに展開 • 各サービスへの起点となるポータルサイト •

    社内の各種サービスと連携して開発 多種多様な情報をユーザに届ける Yahoo! JAPANトップページについて
  3. © LY Corporation 6 MFE(マイクロフロントエンド) Yahoo! JAPANトップページを支える技術 • MFE(マイクロフロントエンド) •

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

    Fragmentを各サービスが個別・並列に改修可能 → 価値提供の速度向上 Top page service News service Buzz service … service
  5. © LY Corporation 8 組織・チーム Yahoo! JAPANトップページの開発体制 • チーム開発がメイン •

    トップページ PC/SP の他に社内ツールの開発も担当 チームA チームB チームC
  6. © LY Corporation 9 開発プロセス Yahoo! JAPANトップページの開発体制 ペアプロ/ペアワーク − スキルレベルに差のあるメンバーでペアを組んで知見を共有

    − 作業で詰まったらすぐに集まって解消 TDD(テスト駆動開発) − テストの信頼性向上 − リファクタリングの推進
  7. © LY Corporation 12 こんな方に来てほしい • ヤフーのサービスは100以上あり、トップページはたくさんのサービスが集まってコンテンツを提供し ている • どうしたらサービス別に、独立して高速なデプロイが実現できる?

    • 人々の生活基盤を支え、災害や地震がおきても絶対に落とさない仕組みとは? • 多くのリクエストを捌くための仕組みや工夫とは? • 数値分析を繰り返して、たくさんのリリースを維持するための工夫とは? • これだけ大規模なシステム郡、どうやってメンテナンスしている? • 障害ポイントをどのように解決している?
  8. © 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桁目の数値を四捨五入