© LY Corporation External Use (採用説明) Yahoo!知恵袋における フロントエンド開発 LINEヤフー株式会社 厚東 裕貴 

© LY Corporation External Use (採用説明) 2 厚東 裕貴 LINEヤフー株式会社 フロントエンドエンジニア メーカーでスマホアプリ、Webの開発を経験した後、 2022年10月にヤフー株式会社に中途入社 入社後は知恵袋のWebフロントエンド開発を担当し、 現在ではiOSスマホアプリの開発にも従事している © LY Corporation 

© LY Corporation External Use (採用説明) Yahoo!知恵袋とは？ Yahoo!知恵袋の概要 様々なカテゴリで 疑問や悩みを投稿 知恵やアドバイスを投稿 Q A 3 

© LY Corporation External Use (採用説明) Yahoo!知恵袋の歴史 4 Yahoo!知恵袋の概要 2004年 ベータ版提供開始 2005年 正式版リリース 2009年 カテゴリマスター制度開始 2012年 iOSアプリリリース 専門家回答スタート 2016年 企業公式回答スタート 最近 AI回答 AI質問 リリース20周年 

© LY Corporation External Use (採用説明) Yahoo!知恵袋の規模 5 Yahoo!知恵袋の概要 引用元: https://www.lycorp.co.jp/ja/news/release/007875/ 登録利用者数 5,200万人 質問総数 2億8,000万件 回答総数 6億5,000万件以上 

© LY Corporation External Use (採用説明) 6 基盤チーム 新規チャレンジ チーム 組織・チーム Yahoo!知恵袋の開発体制 

© LY Corporation External Use (採用説明) TypeScript Yahoo!知恵袋を支える技術 7 Yahoo!知恵袋のフロントエンド開発 JavaScript Webpack Sass Node.js Express Jest ESLint Stylelint React Storybook AI Copilot ChatGPT 

© LY Corporation External Use (採用説明) FE(フロントエンド)定例 • 週に2回実施 • 知恵袋のフロントエンドエンジニアが全員参加 • FEに関することを話し合う • 開発中の案件の開発相談 • issue議論 • etc. 知恵袋におけるフロントエンド改善活動 8 Yahoo!知恵袋のフロントエンド開発 

© LY Corporation External Use (採用説明) FE(フロントエンド)定例 • このような議論をしています 知恵袋におけるフロントエンド改善活動 9 Yahoo!知恵袋のフロントエンド開発 これってどうやって 開発すればいいの？ ここのソースコードを キレイにしたい！ こういう技術を 導入しませんか？ ・ ・ ・ 

© LY Corporation External Use (採用説明) FE(フロントエンド)定例 • たまに集まって議論します 知恵袋におけるフロントエンド改善活動 10 Yahoo!知恵袋のフロントエンド開発 

© LY Corporation External Use (採用説明) FEコーディング規約 • FE定例で議論しながら規約を作成 • コードの一貫性が保たれる • コードレビュー時の明確な基準となる 知恵袋におけるフロントエンド改善活動 11 Yahoo!知恵袋のフロントエンド開発 

© LY Corporation External Use (採用説明) FEコーディング規約 • このようなことを皆で書いています 知恵袋におけるフロントエンド改善活動 12 Yahoo!知恵袋のフロントエンド開発 変数名は キャメルケース にしよう！ 使わなくなったコード は消そう！ コメントはこう書こう！ 

© LY Corporation External Use (採用説明) リアーキテクト • 以前はControllerに多くの処理が集中 • リアーキテクトし処理を各層に分散 • 可読性向上 • ユニットテストの記述コスト低減 • これらの層の役割も全て コーディング規約に記載 知恵袋におけるフロントエンド改善活動 13 Yahoo!知恵袋のフロントエンド開発 Controller Controller Scenario Service Application Service Model Utility 

© 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!知恵袋のフロントエンド開発 

© LY Corporation External Use (採用説明) エントリーをお待ちしています！ 

© LY Corporation External Use (採用説明)