Yahoo!知恵袋におけるフロントエンド開発

2025年6月11日に開催された中途採用向けフロントエンドエンジニア採用説明会で投影したYahoo!知恵袋におけるフロントエンド開発の紹介スライドです。

Transcript

1. © LY Corporation External Use (採用説明) Yahoo!知恵袋における フロントエンド開発 LINEヤフー株式会社 厚東 裕貴
2. © LY Corporation External Use (採用説明) 2 厚東 裕貴 LINEヤフー株式会社 フロントエンドエンジニア メーカーでスマホアプリ、Webの開発を経験した後、 2022年10月にヤフー株式会社に中途入社 入社後は知恵袋のWebフロントエンド開発を担当し、 現在ではiOSスマホアプリの開発にも従事している © LY Corporation
3. © LY Corporation External Use (採用説明) Yahoo!知恵袋とは？ Yahoo!知恵袋の概要 様々なカテゴリで 疑問や悩みを投稿 知恵やアドバイスを投稿 Q A 3
4. © LY Corporation External Use (採用説明) Yahoo!知恵袋の歴史 4 Yahoo!知恵袋の概要 2004年 ベータ版提供開始 2005年 正式版リリース 2009年 カテゴリマスター制度開始 2012年 iOSアプリリリース 専門家回答スタート 2016年 企業公式回答スタート 最近 AI回答 AI質問 リリース20周年
5. © LY Corporation External Use (採用説明) Yahoo!知恵袋の規模 5 Yahoo!知恵袋の概要 引用元: https://www.lycorp.co.jp/ja/news/release/007875/ 登録利用者数 5,200万人 質問総数 2億8,000万件 回答総数 6億5,000万件以上
6. © LY Corporation External Use (採用説明) 6 基盤チーム 新規チャレンジ チーム 組織・チーム Yahoo!知恵袋の開発体制
7. © LY Corporation External Use (採用説明) TypeScript Yahoo!知恵袋を支える技術 7 Yahoo!知恵袋のフロントエンド開発 JavaScript Webpack Sass Node.js Express Jest ESLint Stylelint React Storybook AI Copilot ChatGPT
8. © LY Corporation External Use (採用説明) FE(フロントエンド)定例 • 週に2回実施 • 知恵袋のフロントエンドエンジニアが全員参加 • FEに関することを話し合う • 開発中の案件の開発相談 • issue議論 • etc. 知恵袋におけるフロントエンド改善活動 8 Yahoo!知恵袋のフロントエンド開発
9. © LY Corporation External Use (採用説明) FE(フロントエンド)定例 • このような議論をしています 知恵袋におけるフロントエンド改善活動 9 Yahoo!知恵袋のフロントエンド開発 これってどうやって 開発すればいいの？ ここのソースコードを キレイにしたい！ こういう技術を 導入しませんか？ ・ ・ ・
10. © LY Corporation External Use (採用説明) FE(フロントエンド)定例 • たまに集まって議論します 知恵袋におけるフロントエンド改善活動 10 Yahoo!知恵袋のフロントエンド開発
11. © LY Corporation External Use (採用説明) FEコーディング規約 • FE定例で議論しながら規約を作成 • コードの一貫性が保たれる • コードレビュー時の明確な基準となる 知恵袋におけるフロントエンド改善活動 11 Yahoo!知恵袋のフロントエンド開発
12. © LY Corporation External Use (採用説明) FEコーディング規約 • このようなことを皆で書いています 知恵袋におけるフロントエンド改善活動 12 Yahoo!知恵袋のフロントエンド開発 変数名は キャメルケース にしよう！ 使わなくなったコード は消そう！ コメントはこう書こう！
13. © LY Corporation External Use (採用説明) リアーキテクト • 以前はControllerに多くの処理が集中 • リアーキテクトし処理を各層に分散 • 可読性向上 • ユニットテストの記述コスト低減 • これらの層の役割も全て コーディング規約に記載 知恵袋におけるフロントエンド改善活動 13 Yahoo!知恵袋のフロントエンド開発 Controller Controller Scenario Service Application Service Model Utility
14. © LY Corporation External Use (採用説明) Yahoo!知恵袋のフロントエンドメンバーによる登壇など • JSConf JP • ステップバイステップで進めるYahoo!知恵袋のフロントエンドリアーキテクト https://speakerdeck.com/l1lhu1hu1/sutetupubaisutetupudejin-meruyahoo-zhi-hui- dai-nohurontoendoriakitekuto • LINEヤフー Tech Blog • Yahoo!知恵袋 フロントエンドをリアーキテクトしている話 https://techblog.lycorp.co.jp/ja/20240527a • ポッドキャスト • https://uit-inside.linecorp.com/episode/158 • https://uit-inside.linecorp.com/episode/172 知恵袋メンバーの登壇 14 Yahoo!知恵袋のフロントエンド開発
15. © LY Corporation External Use (採用説明) エントリーをお待ちしています！
16. © LY Corporation External Use (採用説明)