Slide 1

Slide 1 text

© LY Corporation LINEギフト開発の裏側 コマースドメイン ソーシャルコマースSBU サービス開発ユニット SC開発1ディビジョン ⽚⼭ 智洋 LINEヤフー Developer Meetup 2025.12.08

Slide 2

Slide 2 text

© LY Corporation 2 ⾃⼰紹介 ⽚⼭ 智洋 好きな⾔語 TypeScript (Vue, React, NestJS) 最近はKotlinも気になっている 趣味 ゲーム (ドラクエ1&2おもしろい) プログラミング (ラズパイで遊ぶことが多い) 経歴 〜2021 独⽴系SIer企業でシステム開発 2021〜2023 LINE Fukuoka(現LINEヤフーコミュニケーションズ) でフロントエンドエンジニア 2024〜現在 LINEヤフーのフロントエンドエンジニア @ukyoda フロントエンドエンジニア LINEのコマースサービスの フロントエンド開発に従事

Slide 3

Slide 3 text

© LY Corporation LINEギフトとは 3 • LINEのホームやトーク画⾯を⼊り⼝に、LINEの友だちにギフトを贈れるギフトサービス • LINEのトーク上に贈るので、相⼿先の住所を知らなくても気軽にギフトを贈れる ※ 画⾯はイメージです

Slide 4

Slide 4 text

© LY Corporation 贈れるギフト 4 eギフト、配送ギフトなど、多様なニーズに対応しています

Slide 5

Slide 5 text

© LY Corporation ショッピングタブ 5 • LINEギフトも簡単に使える • LINEユーザーの購買⾏動に合わせた売り場づくり • 現在段階的に置き換えを実施中 LINE起点のショッピング体験を提供

Slide 6

Slide 6 text

© LY Corporation 6 LINEギフトは⼤規模で仕様も複雑 商品の種類 ギフトの贈り⽅ 様々な キャンペーン 様々な 決済⽅法 様々な仕様が組み合わさって複雑になる 関連システムが多い LINEギフト 社内向けCMS 社外向けCMS ショッピングタブ

Slide 7

Slide 7 text

© LY Corporation LINEギフトは2020年から急成⻑! 7 ※2024年7⽉時点で「LINEギフト」を贈った、もしくはもらった経験があるユニークユーザー数 事業の成⻑に合わせ開発組織も⼤きくなった!

Slide 8

Slide 8 text

© LY Corporation 8 今⽇話すこと • LINEギフトの開発組織とチームの開発の進め⽅ 複雑で⼤規模なサービスの裏側で、LINEギフトのエンジニアがどのようにして 開発を進めているかご紹介! • 安全で効率的な開発をするのための改善や⼯夫について

Slide 9

Slide 9 text

© LY Corporation 9 LINEギフトの開発組織と チームの開発の進め⽅

Slide 10

Slide 10 text

© LY Corporation 開発体制ざっくり サービス開発ユニット 基盤開発ユニット 開発推進ユニット SERVER FRONT QA SERVER FRONT QA SERVER FRONT QA SERVER SERVER TPM システム企画 Aチーム Bチーム Cチーム SRE CRE ※他、業務委託 メンバーで構成 されたチームも あります ※状況に応じて、フロントエンドエンジニアが スポットで参戦したりする。 開発推進の部隊は社内外⾊々なステークホルダーと 連携してプロジェクトを推進していく部隊。 エンジニアは全体で50⼈以上!⼤きく3つのユニットに分けてアジャイルな開発をしています QA TPM TPM TPM

Slide 11

Slide 11 text

© LY Corporation 11 ⾃分が所属しているチームの構成 SERVER FRONT QA TPM 計16⼈ 1⼈ 7⼈ 4⼈ 4⼈ ※ スクラムマスター ⼤きめの案件を直近で ⾏なっていた影響で⼈ 数が多めになっている

Slide 12

Slide 12 text

© LY Corporation 12 開発の進め⽅ スクラムで開発を進めています 開発 プランニング デイリースクラム レトロスペクティブ

Slide 13

Slide 13 text

© LY Corporation 13 プランニング • 現スプリントの成果を確認 • チームの置かれている状況を整理 • バックログから次スプリントのタスクを決定 • 規模⾒積もり(※不定期) 我々はいかにして丸太を担ぐか?

Slide 14

Slide 14 text

© LY Corporation 14 QA(テスト)はスクラムサイクルに含めていない QAタスクはスプリント外にしている • テスト計画〜実⾏を開発のスプリントに合わせることが難しかった • QA可能な状態(Betaデプロイ)をスプリントのゴールに設定 • 開発↔QA間のコミュニケーションを密にして相互連携を強化

Slide 15

Slide 15 text

© LY Corporation 15 開発 ステークホルダー間で協業しながら開発をすすめる • 各ステークホルダーで仕様を整理 • FE/BE/企画/デザイナー • プログラム設計・実装 • コードレビュー • 開発した機能をBeta環境にデプロイ したらDone

Slide 16

Slide 16 text

© LY Corporation 16 OpenAPIでAPI仕様を作成 OpenAPI Generator FE/BE間の“仕様のズレ”を防ぐ • APIの仕様をOpenAPIで定義 • OpenAPIを元にコードを⾃動⽣成 • FE / BEで使⽤の⾷い違いが起きにくい • 仕様書の更新漏れが発⽣しにくい

Slide 17

Slide 17 text

© LY Corporation 17 DeployPreviewで早期に認識合わせ Beta環境にデプロイする前のフロントエンドのコードを試せる! 企画やデザイナーに開発段階の画⾯を 触ってもらえるため、詳細なフィード バックを早期に得ることができるように なった。

Slide 18

Slide 18 text

© LY Corporation 18 デイリースクラム 進捗や困っていることを毎⽇共有 • 各メンバーの進捗報告 • レビュー担当者の割り当て • 困りごと相談会 • 最近のトピックやコンディション なども共有

Slide 19

Slide 19 text

© LY Corporation 19 2次会(バックエンドのみ) • バックエンドのレビューは数が多くてボリュームが⼤きいものが多い • Wikiでレビュー状況や期⽇を管理し、担当者を割り振る運⽤をしている レビュー確認会

Slide 20

Slide 20 text

© LY Corporation 20 2次会(バックエンドのみ) 設計や実装での困りごとを相談・共有 相談ログのフォーマット(サンプル)

Slide 21

Slide 21 text

© LY Corporation 21 スプリントレトロスペクティブ Keep-Problem-Try(KPT)で前スプリントの振り返りを⾏う • 「スプリントの中でベストを尽くす」こと を念頭においてKPTを実施 • Problemを中⼼に多くの⼈が気になってい るトピックについて議論してTryを決める • 前ページのデイリースクラムの時の取り組 みは振り返りの中で⽣まれました

Slide 22

Slide 22 text

© LY Corporation 22 参考: とある⽇のレトロスペクティブの例 振り返りにはMiroというホワイトボードアプリを使って実施しています

Slide 23

Slide 23 text

© LY Corporation 23 安全で効率的な開発ができるようにしている 改善や⼯夫について

Slide 24

Slide 24 text

© LY Corporation 24 技術基盤のアップデート フロントエンド バックエンド Before Before Now Now JavaScript TypeScript Perl Java / Kotlin • 安全で可読性が⾼いプログラミング⾔語/FWへ段階的に移⾏ • ビルドツールやテストツールをより⾼速で扱いやすいものに移⾏ • 仮想マシンから Kubernetes へ段階的に移⾏し、運⽤やスケーリングのしやすさを改善中 仮想マシン 技術スタックを段階的に移⾏中 Kubernetes Vue2 Vue3 Webpack Vite Vitest Jest

Slide 25

Slide 25 text

© LY Corporation 25 テスト環境の整備 FE/BE/QAそれぞれで⾃動テスト環境を整備し、安全に変更ができるようにしている PR時に単体テストのカバレッジを表⽰し、 テストの過不⾜を可視化 QAの事例 統合テストでAPIレベルの動作を検証 フロントエンドの事例 バックエンドの事例 E2Eのリグレッションテストを MagicPod で⾃動化

Slide 26

Slide 26 text

© LY Corporation 26 まとめ ⼤規模サービスの裏側で、LINEギフトのエンジニアがどのようにして開発を進めているかご紹介! 開発組織とチームの開発の進め⽅ 安全で効率的に開発するために取り組んでいること • 3つの開発ユニットに分かれていて、職種横断のチーム開発を⾏っている • スクラム体制でこまめに認識合わせとプロセス改善を⾏っている • 技術基盤のアップデートを⾏っている • テスト環境の改善に取り組み、安全な修正ができるようにしている

Slide 27

Slide 27 text

© LY Corporation 27 終わりに: ⼀緒に働く仲間を募集中! 👈👈👈 採⽤ページはこちら! 👈👈👈 LINEギフトのテックブログも⾒てね! (Yahoo! JAPANのページに遷移します) 福岡採⽤も実施中!LINEのコマースサービスを⼀緒に開発しませんか?

Slide 28

Slide 28 text

© LY Corporation おわり 28