フロントエンド開発事例② LINE公式アカウント

9/11【オンライン開催】LINEヤフー フロントエンドエンジニア 採用説明会: https://lycorptech-jp.connpass.com/event/327728/

登壇者1: Theo Steiner
フロントエンドエンジニア
LINEヤフー株式会社 MSカンパニー ビジネスPF統括本部 ビジネスPF開発本部 フロントエンド開発部 B2C開発チーム

2022年秋新卒入社のフロントエンドエンジニアで、現在は公式アカウントのUI開発を担当しています。

登壇者2: 玉田晃寛(spring-raining)
フロントエンドエンジニア
LINEヤフー株式会社 MSカンパニー ビジネスPF統括本部 ビジネスPF開発本部 フロントエンド開発部 B2B開発チーム

2019年新卒入社のフロントエンドエンジニア。現在はLINE公式アカウントをはじめとしたビジネスユーザー向けのプロダクトを開発しています。本業以外ではOSS (Vivliostyle) の開発などもやっています。

Transcript

1. © LY Corporation LINE公式アカウント におけるFrontend開発 マーケティング・ソリューション・カンパニー ビジネスPF統括本部 ビジネスPF開発本部 フロントエンド開発部 B2C開発チーム Theo Steiner（テオ）
2. © LY Corporation • ドイツ生まれ育ち • 2022年秋入社 *もう少しで2年記念日 • svelte.js のアンバサダー • neovim信者 Theo Steiner - テオ 2 自己紹介
3. © LY Corporation LINE公式アカウント 「LINE」上に企業や店舗が アカウントを作成し、 友だち追加してくれたユーザーに 対して情報を発信できます 3
4. © LY Corporation 4 LINE公式アカウント 表と裏 企業や店舗向けのアプリは エンドユーザー向けのアプリは B2Bチーム B2Cチーム
5. © LY Corporation 来店時に使用できるクーポンを作成し、 メッセージとして配信することができ ます。 OA Coupon 5
6. © LY Corporation LINE上でポイントカードの発行管理が できます。利用データの分析も可能で す。 OA Shopcard 6
7. © LY Corporation おすすめのアカウント・新着のアカウ ントなどを見付けられるページ OA List 7
8. © LY Corporation 企業やブランドの基本情報を掲載 できるページ OA Profile 8
9. © LY Corporation LINE公式アカウント のやりがい 9 • 利用者が非常に多い • クロス・ファンクショナル・チーム • 日常生活でみかける
10. © LY Corporation B2Cチームの技術スタック 10 • 型安全なviteベースのvue SPA • チャレンジができる環境 • イケイケの最新の技術に触れる機会も沢山ある！
11. © LY Corporation 仕事環境 11 • カンファレンス・出張に行くチャンスがある • 成長できる環境 • 自由に仕事ができる
12. © LY Corporation ご清聴ありがとうございました 続いては玉田さんが B2Bチーム の事情を紹介します
13. © LY Corporation 1
14. © LY Corporation 日常に溶け込みながらユーザーと企業・店舗との接 点を創り出す • 日本国内で月間9,700万人（2024年3月末時点）以上が 利用しているLINEを通じて、企業や店舗がユーザーと コミュニケーションをとれるサービス • 国内で認証済のアクティブアカウント数は46万※ 超 • 日本・タイ・台湾を中心に展開するグローバル ビジネスプラットフォーム ※ LINEヤフー調べ : 2024年4月実績 ※認証済アカウントのアクティブアカウント数を集 計・LINEヤフーが提供するサービスのアカウントを除く 2 LINE公式アカウント
15. © LY Corporation 街中のお店をはじめ幅広い業種※ で利用される リアル店舗に限らず、公共施設やウェブサービスといった 分野まで幅広くBtoBtoCソリューションを提供中 ※ LINEヤフー調べ : 2024年4月実績 ※認証済アカウントのアクティブアカウントにおけ る業種分布 3 LINE公式アカウント
16. © LY Corporation 4 企業や店舗向けのアプリは B2Bチーム
17. © LY Corporation LINE公式アカウントのPC向けWebページとスマートフォン向けのモバイルア プリを作ってます 5 B2Bチームって何をしてるの？
18. © LY Corporation • https://manager.line.biz • LINE公式アカウントの管理 を一手に担うページ (メッセージ配信、チャッ ト画面、クーポン作成、コ ンバージョン分析、プロ フィール編集、自動応答設 定、友だち追加URL、ポス ター作成 etc.) Webページ 6
19. © LY Corporation • iOS/Android向けにリリース • ほぼすべての画面をWebViewとし て実装し、Webページと同様の機 能の大部分を提供 • React Native、Cordova、 Capacitorなどのフレームワークは 使わず、Native側の実装は別チー ムがフルスクラッチで実装 モバイルアプリ 7
20. © LY Corporation toB向けという位置づけですが、そこそこ使われていると思います！ 8 LINE公式アカウントアプリ
21. © LY Corporation • 様々な機能を提供しており、比較的規模は大きめ • 704,839行 / Vueファイル2,657個 / TS(JS)ファイル1,637個 (2023年12月時点) 9 プロダクトの特徴 https://engineering.linecorp.com/ja/blog/git-submodule-with-monrepo https://engineering.linecorp.com/ja/blog/git-submodule-with-monrepo 大規模開発特有の問題 に対処するための さまざまな取り組み
22. © LY Corporation • 日本のメンバーだけでなく、海外のチームとも協力して開発 (JP/VN/KR) • オフショア的な委託、納品という関係ではない自走する開発を重視 • 手を上げれば、もちろん出張の機会もあります 10 開発体制