Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yahoo!知恵袋におけるフロントエンド開発
Search
LINEヤフーTech (LY Corporation Tech)
PRO
July 02, 2025
Technology
0
31
Yahoo!知恵袋におけるフロントエンド開発
2025年6月11日に開催された中途採用向けフロントエンドエンジニア採用説明会で投影したYahoo!知恵袋におけるフロントエンド開発の紹介スライドです。
LINEヤフーTech (LY Corporation Tech)
PRO
July 02, 2025
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
32
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
0
13
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
29
Seamless inventory management with AI
lycorptech_jp
PRO
0
16
AI Frontiers Revealed: Transforming LINE Shopping TW with LLM-Driven Product Attribute Extraction
lycorptech_jp
PRO
0
27
LINEヤフーの音声AIがもたらす未来:ASR/TTSと対話技術の新たな可能性 / LY Corporation's Speech AI Vision: Towards Realtime Spoken Dialogue through Advanced ASR and TTS
lycorptech_jp
PRO
0
32
「Yahoo!検索」におけるWebパフォーマンス改善の取り組み / Efforts to Improve Web Performance in "Yahoo! JAPAN Search"
lycorptech_jp
PRO
0
41
アクセシビリティ改善の実践:プロダクトにおける具体的な取り組みと課題 / Practices for Accessibility Improvement: Specific Efforts and Challenges in Products
lycorptech_jp
PRO
0
36
「PayPayゲートウェイ」におけるStorybook活用事例 / Introducing Storybook: Enhancing Development in "PayPay Gateway"
lycorptech_jp
PRO
0
39
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
360
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
240
Lazy application authentication with Tailscale
bluehatbrit
0
170
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
asken AI勉強会(Android)
tadashi_sato
0
180
MobileActOsaka_250704.pdf
akaitadaaki
0
110
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
150
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
230
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
290
Operating Operator
shhnjk
1
530
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
179
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Transcript
© 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 (採用説明)