LINEギフト開発の裏側

2025年12月8日に開催されたLINEヤフー Developer Meetup #2 in Fukuokaで投影したスライドです。
#LINEヤフーDevMeetup

Transcript

1. © LY Corporation LINEギフト開発の裏側 コマースドメイン ソーシャルコマースSBU サービス開発ユニット SC開発1ディビジョン ⽚⼭ 智洋 LINEヤフー Developer Meetup 2025.12.08
2. © LY Corporation 2 ⾃⼰紹介 ⽚⼭ 智洋 好きな⾔語 TypeScript (Vue, React, NestJS) 最近はKotlinも気になっている 趣味 ゲーム (ドラクエ1&2おもしろい) プログラミング (ラズパイで遊ぶことが多い) 経歴 〜2021 独⽴系SIer企業でシステム開発 2021〜2023 LINE Fukuoka(現LINEヤフーコミュニケーションズ) でフロントエンドエンジニア 2024〜現在 LINEヤフーのフロントエンドエンジニア @ukyoda フロントエンドエンジニア LINEのコマースサービスの フロントエンド開発に従事
3. © LY Corporation LINEギフトとは 3 • LINEのホームやトーク画⾯を⼊り⼝に、LINEの友だちにギフトを贈れるギフトサービス • LINEのトーク上に贈るので、相⼿先の住所を知らなくても気軽にギフトを贈れる ※ 画⾯はイメージです
4. © LY Corporation 贈れるギフト 4 eギフト、配送ギフトなど、多様なニーズに対応しています
5. © LY Corporation ショッピングタブ 5 • LINEギフトも簡単に使える • LINEユーザーの購買⾏動に合わせた売り場づくり • 現在段階的に置き換えを実施中 LINE起点のショッピング体験を提供
6. © LY Corporation 6 LINEギフトは⼤規模で仕様も複雑 商品の種類 ギフトの贈り⽅ 様々な キャンペーン 様々な 決済⽅法 様々な仕様が組み合わさって複雑になる 関連システムが多い LINEギフト 社内向けCMS 社外向けCMS ショッピングタブ
7. © LY Corporation LINEギフトは2020年から急成⻑！ 7 ※2024年7⽉時点で「LINEギフト」を贈った、もしくはもらった経験があるユニークユーザー数 事業の成⻑に合わせ開発組織も⼤きくなった！
8. © LY Corporation 8 今⽇話すこと • LINEギフトの開発組織とチームの開発の進め⽅ 複雑で⼤規模なサービスの裏側で、LINEギフトのエンジニアがどのようにして 開発を進めているかご紹介！ • 安全で効率的な開発をするのための改善や⼯夫について
9. © LY Corporation 9 LINEギフトの開発組織と チームの開発の進め⽅
10. © LY Corporation 開発体制ざっくり サービス開発ユニット 基盤開発ユニット 開発推進ユニット SERVER FRONT QA SERVER FRONT QA SERVER FRONT QA SERVER SERVER TPM システム企画 Aチーム Bチーム Cチーム SRE CRE ※他、業務委託 メンバーで構成 されたチームも あります ※状況に応じて、フロントエンドエンジニアが スポットで参戦したりする。 開発推進の部隊は社内外⾊々なステークホルダーと 連携してプロジェクトを推進していく部隊。 エンジニアは全体で５0⼈以上！⼤きく3つのユニットに分けてアジャイルな開発をしています QA TPM TPM TPM
11. © LY Corporation 11 ⾃分が所属しているチームの構成 SERVER FRONT QA TPM 計16⼈ 1⼈ 7⼈ 4⼈ 4⼈ ※ スクラムマスター ⼤きめの案件を直近で ⾏なっていた影響で⼈ 数が多めになっている
12. © LY Corporation 12 開発の進め⽅ スクラムで開発を進めています 開発 プランニング デイリースクラム レトロスペクティブ
13. © LY Corporation 13 プランニング • 現スプリントの成果を確認 • チームの置かれている状況を整理 • バックログから次スプリントのタスクを決定 • 規模⾒積もり（※不定期） 我々はいかにして丸太を担ぐか？
14. © LY Corporation 14 QA(テスト)はスクラムサイクルに含めていない QAタスクはスプリント外にしている • テスト計画〜実⾏を開発のスプリントに合わせることが難しかった • QA可能な状態(Betaデプロイ)をスプリントのゴールに設定 • 開発↔QA間のコミュニケーションを密にして相互連携を強化
15. © LY Corporation 15 開発 ステークホルダー間で協業しながら開発をすすめる • 各ステークホルダーで仕様を整理 • FE/BE/企画/デザイナー • プログラム設計・実装 • コードレビュー • 開発した機能をBeta環境にデプロイ したらDone
16. © LY Corporation 16 OpenAPIでAPI仕様を作成 OpenAPI Generator FE/BE間の“仕様のズレ”を防ぐ • APIの仕様をOpenAPIで定義 • OpenAPIを元にコードを⾃動⽣成 • FE / BEで使⽤の⾷い違いが起きにくい • 仕様書の更新漏れが発⽣しにくい
17. © LY Corporation 17 DeployPreviewで早期に認識合わせ Beta環境にデプロイする前のフロントエンドのコードを試せる！ 企画やデザイナーに開発段階の画⾯を 触ってもらえるため、詳細なフィード バックを早期に得ることができるように なった。
18. © LY Corporation 18 デイリースクラム 進捗や困っていることを毎⽇共有 • 各メンバーの進捗報告 • レビュー担当者の割り当て • 困りごと相談会 • 最近のトピックやコンディション なども共有
19. © LY Corporation 19 ２次会(バックエンドのみ) • バックエンドのレビューは数が多くてボリュームが⼤きいものが多い • Wikiでレビュー状況や期⽇を管理し、担当者を割り振る運⽤をしている レビュー確認会
20. © LY Corporation 20 ２次会(バックエンドのみ) 設計や実装での困りごとを相談・共有 相談ログのフォーマット（サンプル）
21. © LY Corporation 21 スプリントレトロスペクティブ Keep-Problem-Try（KPT）で前スプリントの振り返りを⾏う • 「スプリントの中でベストを尽くす」こと を念頭においてKPTを実施 • Problemを中⼼に多くの⼈が気になってい るトピックについて議論してTryを決める • 前ページのデイリースクラムの時の取り組 みは振り返りの中で⽣まれました
22. © LY Corporation 22 参考: とある⽇のレトロスペクティブの例 振り返りにはMiroというホワイトボードアプリを使って実施しています
23. © LY Corporation 23 安全で効率的な開発ができるようにしている 改善や⼯夫について
24. © LY Corporation 24 技術基盤のアップデート フロントエンド バックエンド Before Before Now Now JavaScript TypeScript Perl Java / Kotlin • 安全で可読性が⾼いプログラミング⾔語/FWへ段階的に移⾏ • ビルドツールやテストツールをより⾼速で扱いやすいものに移⾏ • 仮想マシンから Kubernetes へ段階的に移⾏し、運⽤やスケーリングのしやすさを改善中 仮想マシン 技術スタックを段階的に移⾏中 Kubernetes Vue2 Vue3 Webpack Vite Vitest Jest
25. © LY Corporation 25 テスト環境の整備 FE/BE/QAそれぞれで⾃動テスト環境を整備し、安全に変更ができるようにしている PR時に単体テストのカバレッジを表⽰し、 テストの過不⾜を可視化 QAの事例 統合テストでAPIレベルの動作を検証 フロントエンドの事例 バックエンドの事例 E2Eのリグレッションテストを MagicPod で⾃動化
26. © LY Corporation 26 まとめ ⼤規模サービスの裏側で、LINEギフトのエンジニアがどのようにして開発を進めているかご紹介！ 開発組織とチームの開発の進め⽅ 安全で効率的に開発するために取り組んでいること • 3つの開発ユニットに分かれていて、職種横断のチーム開発を⾏っている • スクラム体制でこまめに認識合わせとプロセス改善を⾏っている • 技術基盤のアップデートを⾏っている • テスト環境の改善に取り組み、安全な修正ができるようにしている
27. © LY Corporation 27 終わりに: ⼀緒に働く仲間を募集中！ 👈👈👈 採⽤ページはこちら！ 👈👈👈 LINEギフトのテックブログも⾒てね！ （Yahoo! JAPANのページに遷移します） 福岡採⽤も実施中！LINEのコマースサービスを⼀緒に開発しませんか？
28. © LY Corporation おわり 28