JavaScriptとマークアップどちらもこだわれる　フロントエンドエンジニアが語る「LINEギフト」開発

自己紹介とアジェンダ

木村好汰氏：私から「LINEギフト」のフロントエンド開発について紹介します。はじめに自己紹介します。木村好汰と言います。フロントエンド開発センターのUIT1室 Front-end Dev5 Team に所属している、フロントエンドエンジニアです。

2019年頭にLINEに中途入社したので、在籍3年目になります。入社以来、LINEギフトに主に関わってきています。プライベートではゲームや映画が好きです。よろしくお願いします。

今回お話しするのはLINEギフトというサービスの紹介と、LINEギフトのフロントエンドエンジニアが、実際に何を作っているのか。LINEギフトの開発体制や開発フロー、最後にどんな方に来てもらいたいかを紹介します。

LINEギフトのサービスについて

まずはLINEギフトのサービスの紹介です。みなさん、LINEギフトというサービスを知っていますか？　まだLINEギフトを知らない方もいると思うので、簡単に紹介します。LINEギフトは一言で言うと、LINE上でギフトを贈れるコミュニケーションサービスです。

LINEユーザーなら誰でも利用できます。ギフトをもらったユーザーは、LINEのトーク上でメッセージカードとともにギフトを受け取れます。（スライドを指して）この右側のキャプチャにあるような画面です。

LINEギフトには、店舗で商品を引き換えることができる「eギフト」や、友だちの家に実際に送れる「配送ギフト」など、幅広い商品がラインナップされています。配送ギフトは住所を知らないLINEの友だちにもギフトを贈れるので、人と会いにくい現在において、とても便利なサービスです。

また、クリスマスやバレンタインなどのシーズナルイベントではさまざまキャンペーンを実施しているので、イベントシーズンは特に賑わっています。

LINEスタンプなどと同様に、ギフトを通じた新しいコミュニケーションのツールになっています。今の説明だと「コミュニケーションサービスというより、ECサービスじゃないの？」と思われそうですが、システム的にはユーザーが商品を購入するECサービスです。

しかし、LINEギフトはLINEスタンプやテキストメッセージなどと同じように、「おめでとう」や「ありがとう」といったふだんのコミュニケーションを、ギフトを通じて作っていくことを目指しています。そのため、LINEギフトはECサービスでありながら、コミュニケーションサービスでもあります。

そんなLINEギフトですが、現在急成長中のサービスの1つです。2015年にサービスを開始し、2021年5月には累計ユーザー数が1,500万人を突破しました。この累計ユーザー数はLINEギフトにアクセスしたユーザーではなく、LINEギフトを贈った、またはもらったことがある累計のユーザー数です。また、2020年の総流通額は前年比の250パーセントを達成しており、LINEギフトは今まさに急成長しているサービスの1つと言えます。

LINEギフトのフロントエンドエンジニアが開発しているもの

次に、LINEギフトのフロントエンドエンジニアが、具体的に何を開発しているか紹介します。まずはLINEギフトのアプリです。先ほども紹介しましたが、LINEギフトはLINE上で友だちに簡単にギフトを贈れるサービスです。イベントのシーズンになると特に賑わっています。（スライドを指して）左下のキャプチャのように、LINEアプリのホームタブやトーク画面のプラスメニューから、LINEギフトを開けます。

LINEギフトはネイティブアプリではなくLIFF（LINE Front-end Framework）を使用したWebアプリなので、機能の開発・改善やイベントシーズンのキャンペーン開発などには、フロントエンドエンジニアが携わっています。

次に、「eGift Platform」というプロダクトの開発も行っています。eGift Platformは、eギフトの発行から販売、店舗での消し込み、データ管理までを行うプラットフォームサービスです。2021年1月にリリースされた、比較的若いプロダクトです。

eGift Platformを使うと、eギフトのシステムを持っていないブランドでも、LINEギフトに商品を出品することが可能になります。eGift Platformの中にいくつかのシステムやサービスがあり、フロントエンドエンジニアは主に出店ブランド向けのCMSと、eギフトチケットの画面の2つのサービスの開発に関わっています。（スライドを指して）この画面の下にあるようなかたちです。そのため、to Bとto C両方の要素を持っているプロダクトになります。

現在、LINEギフトのフロントエンドエンジニアが開発している大きなプロダクトは以上の2つがメインになりますが、ほかにもLINEギフトへの出店を申し込むためのWebサイトやLPなどの開発にも携わっていたり、LINEギフトに関連するサービスのフロントエンドを担当しています。今後も新たに担当するプロジェクトも計画されているので、よりたくさんのサービスに関わっていくことになります。

これらのサービスで主に使用されている技術スタックを紹介します。サービスによって多少違いはありますが、主な技術をリストアップしました。

使用言語はJavaScriptまたはTypeScriptで、先ほど紹介したeGift Platformのように、若いサービスはTypeScriptが採用されています。今後新規で開発するサービスは、基本的にTypeScriptが採用されることになると思います。

フレームワークはVue.jsを採用しています。こちらも今後は主にバージョン3を使用していくことになります。またスタイリングにはSassを使用しており、CMSの開発に関しては、Bootstrapベースの社内UIフレームワークであるKoromoを使用しています。ビルド環境で、WebpackやVue CLI。あとはGitやCircleCI。エラーや表示パフォーマンスのトラッキングには、Sentryを使用しています。

LINEギフトの開発メンバーと開発フロー

次にLINEギフトの開発メンバーやフローについて紹介します。（スライドを指して）こちらが、現在LINEギフトに関わっている開発チームの体制です。記載している人数は業務委託の方も含みます。フロントエンドは現在4名で稼働しています。ほかにもサーバーサイドやデザイン、テクニカルPM、QA・テスターなど、総勢50名以上の方が活躍しています。LINEの中でも比較的大きな開発体制なのではないかと思っています。

開発以外にも、企画やアライアンス、マーケティングなど多くのメンバーがLINEギフトに関わっています。各メンバーが案件ごとにアサインされるかたちになっているので、案件によって違うサーバーサイドエンジニア、デザイナーと連携しながら開発していくことになります。

図にするとLINEギフトで開発組織があるように見えますが、それぞれ別の専門組織からLINEギフトにアサインされているかたちになっています。例えばフロントエンドだと、UITから4名がLINEギフトにアサインされている状況です。

それでは、フロントエンドのメンバーはどんな人がいるのかを簡単に紹介します。先ほども紹介したとおり、4名で稼働しています。ただ、現状足りていないので、新しいメンバーを募集中です。また、UITではマークアップとJavaScriptで担当者が分担しているプロジェクトも多いのですが、LINEギフトではみんな両方担当しています。なのでJavaScriptだけではなく、マークアップからこだわって作りたい方にはおすすめです。

また、若いメンバーが多く、2021年入社の新卒もバリバリ活躍中です。これはフロントエンド以外のメンバーもそうですが、温厚でやさしい方が多く、コミュニケーションがバチバチするようなことはあまりありません。意見を言いやすい雰囲気があると個人的に思っています。あとは、きっとみんなLINEギフトのサービスが大好きです。

次に、LINEギフトでの基本的な開発の流れを簡単にご紹介します。まずはじめに企画・見積もりフェーズで、事業部側が企画を検討します。開発メンバーとの仕様共有もそこでします。ここで開発側から実現可否の確認や仕様の提案などを行い、企画と仕様を詰めた上で、開発工数の見積もりや担当者のアサインを行います。この時に、開発側から改善企画などを自ら立てて提案もできます。

次の実装フェーズでは、アサインされた案件の実装に取りかかります。実装フェーズの後半では、ほかのメンバーとのコードレビューやQAを行い、バグの修正やコードのブラッシュアップをします。実装フェーズでテストが無事終わると、ついにリリースです。

この実装フェーズからリリースまでを、2週間のサイクルで回しています。そのルールで運用できるように企画を出したりしているので、急に「明日までにこれ作って」というような依頼をされることは、できる限り発生しないようになっています。大規模な企画になると、複数のサイクルをまたいで計画されることもあります。

LINEギフトのフロントエンドで抱えている課題と力を入れたいこと

次に、今LINEギフトのフロントエンドで抱えている課題や、今後力を入れたい点を紹介します。まずそもそもですが、先ほども言ったとおり、人が足りていません。LINEギフトの企画・運営メンバーが増えていっているので、さまざまな企画が並行して進んでいます。しかし、それらを実現するためのフロントエンドのメンバーがまだ足りていません。

そして技術的な課題ですが、LINEギフトのユーザーもどんどん増えていき、より多くのユーザーがよりよいユーザー体験を得られるように、アクセシビリティや表示パフォーマンスの改善も現在の課題となっています。

そして、ユーザーがギフトを受け取った時や、キャンペーンに参加した時の体験もよくしたいので、リッチなアニメーションを実装する機会が以前より増えてきました。最近はLottieを使って、動的に色を変更できるアニメーションを実装したりなどしています。今後もそういったアニメーションの実装がたびたび必要になると思っているので、今後力を入れていきたいと思っています。

LINEギフトの開発で楽しいところ

次に、LINEギフトの開発で楽しいところを紹介します。成長中のサービスなので、自分が実装したものが実際に数字に現れる実感を得やすいです。自分の担当案件のおかげで「これだけ売上がありました、これだけ利用したユーザーがいました」という話を聞くと、とてもモチベーションが上がります。

また、ユーザーがSNSなどに「LINEギフトでこういうものを贈りました／もらいました」というような投稿をけっこうしてくれるので、ユーザーの意見が開発側にも届きやすいです。あとはヤフーとの連携も始まっており、サービスの拡大を感じられます。

あと開発的な点で、先ほど紹介したとおり、to Cやto Bなど幅広い経験が積めます。あとは開発前から企画やデザイナーとの議論が活発で、エンジニアの意見もとおりやすい雰囲気があるのがいいところです。すべて決まったものを作るのではなく、一緒に考えて作れるので、サービスを自分の手で作っていく実感が強いです。

LINEギフトのフロントエンドエンジニアに来てほしい方・向いている方

最後に、こんな方にLINEギフトのフロントエンドエンジニアとして来てほしい・向いていそうという点を紹介します。LINEギフトの各サービスはVue.jsを使って開発されているので、Vue.jsでの開発経験がある方や、興味がある方に来てもらえるとうれしいです。React派やAngular派だけど、LINEギフトの開発に携わりたい方ももちろん大歓迎です。

また、成長中のサービスに携わりたい方や、周りとのコミュニケーションを活発にできる方も大歓迎です。LINEギフトに関わるメンバーはどんどん増えてきているので、さまざまな職種の方とのコミュニケーションをとる機会があります。

あとは、現在課題となっているアクセシビリティや、表示パフォーマンスの改善経験、もしくは興味がある方も大歓迎です。あとLINEギフトはギフトを贈るコミュニケーションサービスなので、贈る側やもらう側のユーザー体験を意識しています。

そのため、エンジニア目線だけではなく、ユーザー目線になれる方やプロダクト志向を持っている方も大歓迎です。サービスにも向いていると思っています。

これらを聞いて少しでも気になった方や貢献できそうだという方がいたら、ぜひエントリーしてもらえるとうれしいです。

みなさんのエントリーをお待ちしています。ぜひLINEギフトを一緒に成長させましょう。