フロントエンドエンジニア中途採用説明会レポート#02 LINEギフトの開発事例
現在、LINEヤフーでは多岐にわたるプロダクトの開発に関わるフロントエンドエンジニアを積極採用中です。2024年9月11日に開催されたフロントエンドエンジニア向けのオンライン説明会では、使用技術やサービスごとのチーム体制に加え、フロントエンドエンジニアとしてサービス開発に携わることで得られる経験やスキルについて、「LINEギフト」「LINE公式アカウント」「Yahoo! JAPAN トップページ」を担当するエンジニアが実際の開発事例を通じて詳しく説明しました。
レポート#02では、「LINEギフト」のフロントエンドエンジニアの林田が登壇し、開発事例や組織について紹介したパートをレポートします。LINEヤフーのフロントエンドエンジニアに興味を持っている方やキャリアを見つめ直している方や、転職を検討中の方はもちろん、情報収集を目的とした方々に向けたものです。興味を持っている方、迷っている方はぜひご覧ください。
ほかのイベントレポート記事とも合わせ、ぜひご覧ください。
当日の資料は以下からもご覧いただけます。
登壇者
林田 憲昌（はやしだ のりまさ）
外資系企業で大規模な企業向けコラボレーションツールの開発などを経験後、2019年旧LINEに入社し、現在は主に「LINEギフト」および「ショッピングタブ（名称未定）」のフロントエンド開発に携わる。
コマースサービスでありながらコミュニケーションサービスでもある「LINEギフト」
林田 「LINEギフト」は、ギフトを送り合うことで「LINE」の友だちとのつながりを活性化することを目的とした、コマースサービスでありながらコミュニケーションサービスでもあるという非常にユニークな位置づけにあるサービスです。
「LINEギフト」の開発・運営組織には、さまざまなスキルを持ったメンバーが役割ごとに異なるチームに分かれて所属しており、各チームは密に連携しながら、数多くの案件を日々進行しています。
エンジニアが所属する開発チームは、プロダクト企画チームやデザインチームとのディスカッションを重ねたり、プロダクトグロースチームやセールスチームからの要望やフィードバックを受けたりしながら、どのような機能を開発すべきかについて日々議論し実装を進めています。各チーム間の距離は非常に近く、とても協業を進めやすい体制となっています。
現在、機能の開発や改修を主に担当するエンジニアが所属するサービス開発部は3つのチームに分かれています。各チームはいわゆるアジャイルチームに相当するもので、バックエンドエンジニア、フロントエンドエンジニア、QAエンジニアがそれぞれ数名ずつ所属しています。
各チームにはリソースの空き具合を見ながら案件がアサインされます。アサインされた案件について、各チームは他のチームを交えたディスカッションなどを行いながら実装やテストを進め、最終的なリリースまでを責任持って行います。
このように、「LINEギフト」の開発体制は、各チームが密に連携しながら効率的にプロジェクトを進めることができるように設計されています。
LINEギフトにおけるフロントエンドエンジニアの役割
林田 では、「LINEギフト」におけるフロントエンドエンジニアの役割について紹介します。
「LINEギフト」のフロントエンドエンジニアが主に担当するものの一つが、「LINE」のエンドユーザーが実際にギフトを送り合う際に利用する、「LINE」上で動作するWebアプリケーション（LIFFアプリケーション）の開発です。
ユーザーがギフトを選ぶ際に役立つ機能や、特にギフトを送る予定がないユーザーでも、スキマ時間に覗いてみたくなるような、見ているだけで楽しくなるようなデザインのUI/UXを持つWebアプリケーションの開発に注力しています。
特に注目すべきは「商品棚LP」と呼んでいる機能です。これは、個々のランディングページ（以下、LP）を実装する代わりに、LPを生成するための専用のCMS（コンテンツ管理システム）を開発したというものです。
「LINEギフト」はクリスマスやバレンタインなどのイベント時にユーザーが非常に増えるため、大々的なキャンペーンを実施します。以前は、イベントごとにゼロからリッチなLPを実装していたため、これにフロントエンドエンジニアのリソースが大量に割かれていました。
しかし、現在はこの「商品棚LP」の仕組みがあるため、デザイナーや運用担当者だけで独自にLPを量産することが可能となりました。これにより、2023年の後半以降は、キャンペーン向けのLPの大部分を、フロントエンドエンジニアによる実装なしで作成することができるようになっており、効率的に多くのキャンペーンを実施する上で大きな役割を果たしています。
もうひとつの大きな柱として、CMSのフロントエンド開発があります。CMSには、「LINEギフト」に出店しているショップが商品の登録や売上の管理を行うための外部向けCMSと、サービス運用のための設定などを行うための内部向けCMSの2種類があり、どちらもフロントエンドエンジニアが開発に携わっています。
このCMS開発にデザイナーが関わることはほとんどないため、使いやすいUI/UXを設計するのはフロントエンドエンジニアの役割となります。こういった部分はフロントエンドエンジニアの腕の見せどころとも言えるでしょう。
CMSで使用されている技術についても、コードの再利用性や業務の効率化を高めるために、LIFFアプリケーションとほとんど変わらないものを採用しています。
LINEギフトにおける技術的な取り組み
林田 「LINEギフト」は長く続いているサービスであるため、レガシーな技術が使われているのではないかと思われる方もいるかもしれません。実際、そういった部分が少し残っているのは事実です。
しかし、機能の開発と並行して、ライブラリや開発環境の更新にも継続的に取り組んでいます。例えば、過去1年半ほどの間に行った大きな改善としては、Vue 3やTypeScriptへの完全移行、 OpenAPI の導入、DevOps的な観点でいうとGitHub Actionsへの移行などが挙げられます。このように、「LINEギフト」のチームは開発環境の効率化や最新技術のキャッチアップも積極的に行っています。
「ショッピングタブ」の開発
林田 現在我々の組織を中心に「ショッピングタブ」と呼んでいる新しいプロダクトの開発を進めています。 ショッピングタブは、「LINE」のタブリニューアル計画の一環として新たに誕生する予定のECプラットフォームです。この開発には「LINEギフト」チームも深く関わっています。具体的な内容はまだ公開できませんが、「LINEギフト」と同様にLIFFアプリケーションやCMSの開発を進めています。
「LINEギフト」と同じフロントエンドエンジニアが関わるため、技術スタックはなるべく統一するようにしていますが、新規開発ならではの新しい取り組みも行っています。たとえば、Tailwind CSSとHeadless UIをベースとしたデザインシステムの構築や、VercelやNetlifyを使っている方には馴染み深いPreview Deployments（プルリクエストを作成したらその変更をすぐに確認できる仕組み）環境の構築などです。
「ショッピングタブ」はまだ立ち上げ段階にあり、カオスな状況ではありますが、このような状況を楽しむことができる人や、ゼロから何かを作り上げることが得意な人、自力でさまざまな人を巻き込みながら問題を解決できる人にとっては非常にやりがいのあるプロジェクトではないかと思います。 このタイミングで参加された方は、LINEヤフーという大きな組織で新規サービスの立ち上げに携わるという貴重な機会を得ることができるはずです。
LINEギフト開発チームの魅力
林田 私たちの組織にはプロダクトのUI/UXにこだわるメンバーが多く、フロントエンドエンジニアにとって非常にやりがいがある環境です。また、指示されたものをただ実装するだけということは決してなく、開発内外のさまざまなチームと近い距離間でディスカッションを重ねながら一緒により良いサービスをつくり上げていくことができます。さらには、UIやアクセシビリティ改善といった開発側からの提案にも柔軟に対応してくれるという側面もあります。このように、「LINEギフト」の開発では、組織が一丸となって一緒にひとつのプロダクトをつくり上げていく感覚が得られる点が大きな魅力ではないかと思います。
関連リンク
LINEギフト
最後に
LINEヤフーではフロントエンドエンジニアを積極採用中です。記事を読んでLINEギフトのフロントエンドエンジニアに興味を持っていただいた方は、ぜひ下記より募集職種の詳細をご確認ください。多くの方のご応募、お待ちしております。