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
データグループにおけるフロントエンド開発
Search
LINEヤフーTech (LY Corporation Tech)
PRO
July 02, 2025
Technology
2
710
データグループにおけるフロントエンド開発
2025年6月11日に開催された中途採用向けフロントエンドエンジニア採用説明会で投影したデータグループにおけるフロントエンド開発の紹介スライドです。
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)
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
7
630
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
330
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
3
390
Yahoo!知恵袋におけるフロントエンド開発
lycorptech_jp
PRO
0
710
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
74
Seamless inventory management with AI
lycorptech_jp
PRO
0
40
AI Frontiers Revealed: Transforming LINE Shopping TW with LLM-Driven Product Attribute Extraction
lycorptech_jp
PRO
0
64
LINEヤフーの音声AIがもたらす未来:ASR/TTSと対話技術の新たな可能性 / LY Corporation's Speech AI Vision: Towards Realtime Spoken Dialogue through Advanced ASR and TTS
lycorptech_jp
PRO
0
71
「Yahoo!検索」におけるWebパフォーマンス改善の取り組み / Efforts to Improve Web Performance in "Yahoo! JAPAN Search"
lycorptech_jp
PRO
1
91
Other Decks in Technology
See All in Technology
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.8k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.8k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
130
事業特性から逆算したインフラ設計
upsider_tech
0
140
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
160
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
140
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
2
1.4k
文字列の並び順 / String Collation
tmtms
1
100
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
120
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
22
5.6k
全員が手を動かす組織へ - 生成AIが変えるTVerの開発現場 / everyone-codes-genai-transforms-tver-development
tohae
0
210
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
580
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Visualization
eitanlees
146
16k
Faster Mobile Websites
deanohume
309
31k
Building Adaptive Systems
keathley
43
2.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
© LY Corporation © LY Corporation Public データグループにおける フロントエンド開発
LINEヤフー株式会社 データグループ データエンジニアリング統括本部 データプラットフォームサービス本部 UXエンジニアリングチーム 川原 駿
© LY Corporation © LY Corporation Public 川原 駿 LINEヤフー株式会社
データグループ フロントエンドエンジニア 2016 年 ヤフー株式会社に新卒入社 社内向けアクセス解析、検索データ可視化などの内製ツール開発 2023 年 アクセス解析および A/B テストツールを担当するチームのリーダー 2024 年 データ領域の UI/UX やフロントエンド業務を担当するチームのリーダー(現職) 2 / 11
© LY Corporation © LY Corporation Public 特定のサービスに属さず、全社横断のデータ利活用に取り組む組織 主に 3
つの統括本部で構成 データエンジニアリング: システム基盤の構築、DB の性能向上など データサービス: データ収集、データマネジメント、データの整形など データサイエンス: サービス向けのデータサイエンス、新技術の研究開発など 膨大な量のデータを扱える環境 LINE: 9,000 万 MAU Yahoo! JAPAN: 8,000 万 MAU 安心・安全・簡単にデータを利活用するための、さまざまなプロダクトを開発 参考:データ活用により LINE ヤフーをさらに飛躍させる。データグループの 2 人の雄が未来を語る | LINE ヤフー採用 https://note.com/lycorp_recruit/n/n24f4a054c85b データグループについて 3 / 11
© LY Corporation © LY Corporation Public グループ内のフロントエンド専門組織として立ち上げ プロダクト開発への直接参画 データ領域プロダクトのフロントエンド開発
上記と通したプロダクト戦略への貢献 グループ内のフロントエンド技術の標準化 ガイドラインの整備と推進 生成 AI x フロントエンドの可能性を探る実験的な取り組み グループ内の一部範囲での活動からスタートし、 今後はグループ全体のフロントエンド開発組織への発展を目指しています。 UX エンジニアリングチームについて 4 / 11
© LY Corporation © LY Corporation Public プロダクト紹介(一例) フルマネージド ETL
ワークフローエンジン サービス DB から分析環境にデータをコピーするツール データ分析者が複雑なコードを書かずにデータ収集を行える ログ設計ツール ログの形式や構造を設計・管理するためのツール ログ設計を標準化し、レビューや履歴管理コストを削減する ターゲティング通知ツール 特定の属性や行動履歴を持つユーザーにプッシュ通知を配信するツール サービス独自で通知システムの実装をする必要がなくなる 5 / 11
© LY Corporation © LY Corporation Public 一般的なものに加え、社内ツールの特性に合わせた技術を採用 技術スタックの代表例(プロダクトごとに異なる) Vue.js/Nuxt.js,
React/Next.js, TypeScript Vite, GitHub Actions, Screwdriver.cd Vitest, Vue Testing Library, Playwright/Cypress ESLint, Prettier, Stylelint 社内ツールの特性 SEO 不要のため、SSR なしの SPA として実装 技術選定の自由度が高く、最新技術を試しやすい(例: Nuxt4 のフラグ ON) 中長期的には部分的な標準化を進めていきたいと考えています。 フロントエンド技術について 6 / 11
© LY Corporation © LY Corporation Public 開発・レビューなどの作業に集中しやすい体制 メンバー毎に担当プロダクトを決め、FE エンジニアとしてアサイン
プロダクトにより開発体制は異なる BE エンジニア/デザイナー/プロダクトマネージャーと密に連携して開発 とあるメンバーのスケジュール例 担当プロダクトの活動(2 週間サイクルのイテレーションを採用) スタンドアップ(朝会) :週 2 回 プランニング:隔週 1 回 UX エンジニアリングチームの活動 チーム会:週 1 回 1on1:週 1 回 開発体制・プロセス 7 / 11
© LY Corporation © LY Corporation Public 自分のやりたいこと、アイデアを積極的に取り入れられる環境 UXE Front-end
Weekly 最新のフロントエンド動向を週次でキャッチアップ・読み合わせ会を実施 共有内容例 組織内で広く使われているライブラリのバージョンアップ情報 Figma の新機能 生成 AI x フロントエンド関連の情報 その他、フロントエンドの知見になりそうな記事なら何でも UX エンジニアリングチームの文化 8 / 11
© LY Corporation © LY Corporation Public 通常のサービス開発とは異なる面白さと成長機会がある 複雑なデータをわかりやすく伝える UI/UX
の実現 非常に複雑なデータプラットフォームの操作を直感的にする UI/UX 設計 専門知識がなくても使いやすいインターフェースの実現 ユーザーである社員との距離が圧倒的に近い 社内ユーザーと直接コミュニケーションを取りながら開発できる環境 改善要望を取り入れた効果をすぐに確認することもできる データ領域への理解が深まる環境 ビッグデータ処理や分析基盤など、FE としては珍しい領域に関わる経験 LINE ヤフーが保有する国内最大級のデータ規模を間近で見られる環境 データ領域のフロントエンドの魅力 9 / 11
© LY Corporation © LY Corporation Public こんな方に来てほしい 「技術」も「プロダクト」も両方追求したい 「技術的チャレンジをしたい!」し「ユーザーに価値も届けたい!」
主体的に課題解決に取り組みたい 「これ、もっとこうしたらいいかも!」と思ったことを提案・実装したい 新しいことに前向きにチャレンジできる 最新技術のキャッチアップや、実課題への応用を楽しめる 10 / 11
© LY Corporation © LY Corporation Public Thank You