自己紹介

大槻友諒氏(以下、大槻):ここからは「ファミリーサービスの開発事例」を紹介していきます。モデレーターを務めます大槻です。2016年にLINEに中途入社してから、「LINE NEWS」のフロントエンド開発を担当してきました。その過程でスクラムマスターなどを経験して、今はエンジニアリングマネジメントに専念しています。本日はよろしくお願いします。

では、パネラーのみなさんも自己紹介をお願いします。まずは栗原さんからです。

栗原祐二氏(以下、栗原):栗原です。よろしくお願いします。私はフロントエンド開発センターのDev3チームというところに所属しています。2020年に新卒入社して、現在は「LINE LIVE」や、新しいライブコマースサービスの「LIVEBUY」を担当しています。趣味はランニングとか、パン作りをしてます。

知らない方も多いと思うので簡単に補足すると、「LIVEBUY」は新しいライブコマースで、2021年の年末にテストローンチされました。配信を見ながら(商品を)購入したり、ユーザーとの双方向のコミュニケーションをする機能(があります)。

技術的な要素でいうと、LIFF(LINE Front-end Framework)アプリケーションなどを使っています。また、社内では初となるgRPCを活用したサービスなので、もし気になる方がいたら「LINE Engineering Blog」に詳細を説明している記事があるのでご確認ください。よろしくお願いします。

稲置美里氏(以下、稲置):稲置美里と申します。フロントエンド開発センターUIT1室Front-end Dev5チームに所属していて、2019年4月にLINEに入社しました。「LINEクーポン」「LINEマイカード」を担当しています。犬と一緒に住んでいます。よろしくお願いします。

大槻:では安部さん、お願いします。

安部卓也氏(以下、安部):安部卓也と申します。フロントエンド開発センターのDev1チームに所属しています。現在は「LINE NEWS」のフロントエンド開発を担当しています。今は妻と中学生の娘がいます。

1日の業務の流れ

大槻:ありがとうございます。さっそく開発事例について話していきたいです。まずは1日の業務の流れから聞いていきたいと思います。栗原さん、いかがでしょう。

栗原:今はリモート業務なので、出社していたものがちょっと変わりつつはありますが。私はだいたい朝10時にリモート業務を開始しています。

(業務が)始まったら、例えばSlackなどのチャットアプリケーションを開いて、前日のチャットを確認したり。我々は開発をしていくうえでバグが出たり問題が起きた時に、バグトラッカーなどを使用しています。

バグトラッカーで前日のイシューが上がってきてないかとか、今日やるイシューはどんなことかを確認したり。バグトラッカーの中でも、例えば新しい実装機能要件みたいなものが登録されることもあるので、それを見て、仕様書と照らし合わせて開発を行なっていきます。

お昼前ぐらいからコードを書き始めて、お昼過ぎには事業部のミーティングがあったりするので、そちらに参加します。そこでスペックや今後の方針などを調整していきます。

エンジニアもすごく裁量やコメントする機会があるので、企画の方や営業の方と「こうしたらいいんじゃないか」と要望や意見を伝えたりとか、逆に「こういうデザインがいい」とか、「こういう機能が欲しい」という要望を受けたりします。

お昼を過ぎて15時ぐらいになってくると、また開発に戻ったりして、レビューや今日のデプロイなどをして過ごします。

日にもよりますが、17時頃になると勉強会があります。社内のJavaScriptエンジニアだったらJSer Tech ミーティングというものがあって、各エンジニアが持ち寄った「こういう新しい動きがあるよ」とか「このライブラリ気になるね」みたいな話をして、18時半ぐらいに退勤していきます。

フレックスというか裁量労働だったりするので、「何時に何やらなければいけない」みたいなことは特になく、非常に裁量があるかなとは思います。

大槻:リリースの頻度などに合わせてリズムを作って仕事をしているんですか。例えば1週間サイクルとか、2週間サイクルとか。

栗原:そうですね。リリースの頻度がプロジェクトによってはまちまちなんですがあったりして。「ここまでにQAを済ませてリリース作業に移る」というスケジュールができていたりするので「この日は忙しいな」とか。

自分は金曜日が忙しかったりするんですけど、「忙しいな」という日もあれば、ちょっと余裕があって「サブプロジェクトやってみようかな」という日もあったりします。

大槻:わかりました。先ほど事業部とのミーティングという話がありましたが、話し相手はプランナーやデザイナーですか。

栗原:そうですね。基本的にデザイナーさんや企画者、プランナーと呼ばれる方が議論する中では多いかなと思います。

大槻:ファミリーサービスには必ずファミリーサービスのプランナーがいるので、その人たちと一緒に仕事をしていくというのは、どのサービスでも共通しているかもしれないですね。

栗原:そうですね。「LIVEBUY」と「LINE LIVE」を担当していますが、企画の方が持ってくるような仕様やそれに合わせてデザインも上がってくるので、そういうところでエンジニアもただ単に受け入れるわけではなく、「これは実装上どうだ」とか。できないこともあったりするので、必ず相談して決めていく流れかなと思います。

LINEに入社した決め手

大槻:ありがとうございます。そしたらちょっと話の切り口を変えます。みなさん、入社のきっかけとかタイミングはさまざまだと思いますが、入社の決め手とか、入社後ファミリーサービスの開発に関わってみてどう感じたかを聞きたいです。一番最近入社された安部さん、いかがでしょう。

安部:僕が入社を決めた理由に、今日みなさんも見ていただいているようなLINE Developer Meetupがあります。たまたまVue.jsのMeetupと合同で開催されていることがあり、それを見てLINEのフロントエンド開発に興味を持ちました。

そこでLINEのエンジニアの方たちがお話しされていましたが、すごく優秀そうに感じる人が多かったというのと、若いエンジニアの方も数人登壇されていました。新規のサービスを開発される時に、自分たちで技術選定されているというような話を聞いて「LINEのフロントエンジニア組織が、若い人でも意見の言いやすい風土がある環境なのかな」と感じて、それを見て応募しました。

その他にも、面接が進んでいく中で知ったことですが、LINE STYLEというLINEの社員向けの振る舞いというか、考え方とか行動のガイドラインみたいなものがあります。それを見てすごく共感する部分が多かったということが、入社の決め手になったかなと思います。

「LINE NEWS」に関わって感じたこと、驚いたこと

大槻:実際に入社して「LINE NEWS」の開発に関わってみて、その印象や実体験で感じたことはありますか。

安部:「優秀な人たちが多そうだ」とか、発言のしやすい文化みたいなところに関しては、期待していたとおりだったかなと思います。

驚いた部分としては、やはり会社の規模が大きいところもあるので、すごくオンボーディングが手厚かったり、社内で使ってるツールやライブラリがすごく豊富で、若干圧倒されたりする部分があったかなと思います。

大槻:そうですね。オンボーディングや社内ツールも、フロントエンドエンジニアが、実際に手を動かして用意したものだったりするので。自主的に作っているものなので、一人ひとりがオーナーシップを持って関わってる場面は多いのかなと私は見ていて感じました。

オーナーシップを持って開発に取り組むというのは、楽しさでもあるけれど難しさもあって。やりがいポイントとか、楽しさ、難しさでいうと2人にも聞きたいです。稲置さんは何かそういうエピソードありますか。

稲置:やりがいというか、私もちょっと入社してすごくびっくりしたことなんですけれど。私が入社直後に「LINEクーポン」で使用されていた画像の最適化を行なったんですね。

具体的にいうと、CDN(Content Delivery Network)から配信される画像のサイズやフォーマットが、管理画面から登録された画像そのままを使っていることがわかり、そのリサイズや、適切なJPEGだったりPINGの画像に変換して配信したいという思いがあって、CDNの設定を見直しました。

そもそもLINEのCDNというのは、Verdaと呼ばれるインフラ基盤システムで管理されていて、「LINEクーポン」の場合はその担当者がいたんですが、担当者がLINEの韓国法人で働いてらっしゃる、韓国在住の方だったんですね。

その方と設定のやり取りをするに当たって、「LINE WORKS」というアプリの翻訳botを使ってお互い母国語でコミュニケーションを取りました。

お互い母国語を使ってやり取りしていましたが、けっこうスムーズにコミュニケーションができて、無事CDNの設定を改善して、最適化された画像を配信できました。

入社直後のことだったので、「そもそもVerdaってなんぞや」というところから入ったんですけど、翻訳botであったり、あと他の大きめの会議だと通訳さんもいたりして、言葉の壁を超えて協業できる体制が初めからすごく整っていたのが、自分はびっくりしていました。

大槻:確かに言語の違う人と一緒に仕事することがすごく多いんですけど、チャットでも会議でも母国語で会話しますね。

稲置:そうなんですよね。

大槻:栗原さんも、日本語以外の言語の方と仕事する機会ってありますか。

栗原:ありますね。LINEは他の企業さんと比べると、そこがちょっと変わってるところかなと思っていて。LINEが特殊なところとしては、すごく多国籍な方が働いていると思うんですね。

ただ言語の壁もないし、みなさんすごくいい方で、お互いの文化を尊敬できるような点もあると思うので、そういうところはすごく新鮮味があります。

例えばLINE Fukuokaとかに行くと、東京の四谷オフィスより日本以外の国籍の方が多くて。コロナ前とかは飲み会に行くと、自分以外、海外の人がいないような状況があったりとか。そういうのが好きな人はドンドン行ってもいいし。

そういうのは少し難しいなと思ったら、翻訳してくれる方が社内にはたくさんいるので、困ることはまったくなくて。逆にいいとこ取りができてるのかなと思います。

ふだんの業務で母国語以外を話す機会

大槻:質問が続々と来ています。あとでQ&Aの時間があるので、まとめて回答かなと思ったんですけど、1個答えやすそうなものがあるので、稲置さんに聞いてもいいですか。「母国語以外の言語を話す機会は、ふだんの業務でどれぐらいありますか」と来ているんですけれど。

稲置:私はほぼないです。というのも、私のチームは基本的に日本人で、日本のオフィスで働いてる方しかいないので、OBSの担当者以外は、基本的には日本語です。でも、チームによるという認識ではいます。

栗原:フロントエンドはあまりないかと思いますが、先ほどお話されていたVerdaのようなサービスになると、共通語は英語だったりするので。チームとかによるかなとは思っています。

「LIVEBUY」における仕事のおもしろさ、難しさ

大槻:ありがとうございます。ちょっと質問がいっぱいあるので、質問に答えましょうか。先ほどの仕事の難しさ、おもしろさなどの話でいうと、栗原さんは何かエピソードありますか。

栗原:自分の場合は、技術選定の裁量という点でお話ししたいと思っていて。LINE社内でVueやReactなどを使っていたりするんですが、最近であった話だと、先ほど紹介した「LIVEBUY」というライブコマースサービスをやっています。

その中で、今はgRPC-Webというものを使っています。採用した背景としては、もともとWebで開発することがあまり考えられていなくて、アプリとサーバー間通信をgRPCというプロトコルで行うという想定でした。

みなさんがよく知っているRESTful APIではなくて、gRPCの通信はシリアライズ化されていたりなどする特殊なもので、現状ではライブラリを入れて対応したり、Webでの先行事例がなかなかない中でアプリとサーバー間の開発が先行している背景を踏まえ、gRPC-Webを採用しました

我々はgRPC-Webを社内でチャレンジングな導入として扱っていて、今回無事にgRPC-Webをプロダクションで導入できたということがありました。

結果として、仕様を大きく変えることなく、また、既存技術の実装を利用して開発工数を削減できました。その技術選定はやみくもに行われるというよりは、社内の横のつながりなど、いろいろな意見を聞いて「ちゃんといけるよね?」という判断をしてから導入するものです。

やみくもにというわけではありませんが、裁量を持って、自分のオーナーシップ持って、プロダクトにチャレンジングな導入をできるというのが、最近あった事例です。

大槻:ふだん使わない技術を試してみるに当たって、乗り越えなければいけなかった壁や、ぶつかった難しいポイントとかはありましたか。

栗原:たぶん検索すれば出てくると思いますが、gRPC-Webが、なかなか一筋縄でいかない技術だったりするんです。そのため、我々が自社で開発しているAPIラッパーを作ったり、あとはChromeとかのDevToolsでは、データがシリアライズ化されてるので、レスポンスが見えないんですよね。

なので、それをデシリアライズするような、Chrome Extensionみたいなものを自社開発というか、チーム開発して乗り越えていくということがあります。

そこはそこで難しいところではありますが、今後他のサービスが導入する時にも、助言や手伝える部分になると思うので、いい経験ができたとは思います。

大槻:ファミリーサービスならではのデバッグツールとか、開発を手助けするツールとかは、けっこうみなさん開発されてますよね。

栗原:そうですね。よりよい体験になればいいかなと思っていて、それがつながって、もしかしたら外に出て行くっていうタイミングもあるかと思うので、みなさん開発していることが多いかなと思います。

「LINE NEWS」における技術選択

大槻:はい、ありがとうございます。技術選択でいうと、「LINE NEWS」でも新しい技術選択をしたりする場面があって。最近チームの中で「実装の方針どうしたらいいか」みたいなディスカッションもありましたよね、安部さん。

安部:チームの中で、週1回のモブプログラミングの時間を設けていて、実装方法を悩んだりした部分とかは、その中でチームみんなで意見を出し合いながら「どういう実装方法があるのか」「現実的に問題があるのかないのか」みたいなことは、よく話し合ったりはしていますね。

大槻:ちょうど今の話に近い質問が来たので、ちょっとだけ質問に回答してもいいですか。「チーム間の交流や知見の共有など、横のつながりがどれぐらいあるか知りたいです」ということです。

先ほど安部さんがモブプロの話を出してくれましたが、モブプロ以外で、横のつながりってどんなものがありますか。

安部:週に1回JSer Tech ミーティングというものがあって、そこでJavaScriptに関する勉強会を、フロントエンドチームとしてやっています。そこでフロントエンドエンジニアたちとしての知見の共有ができています。

あと、SlackにもそういうUITチームメンバーのチャンネルがあるので、そこでサービスをまたいでフロントエンジニア間たちで知見を共有することはできてるんじゃないかなと思います。

大槻:稲置さんのところはいかがでしょう。チーム内での交流とか、何かありますか。

稲置:前提から話すと、Dev5チームはそれぞれが違うサービスをバラバラに担当しています。同じチームであっても、同じサービスを担当しているわけではないんですよね。

3個ぐらいのサービスを3つに分けて、ちょっと細かく担当しています。なので、別の案件を同じチームの別のメンバーが助け合うみたいな時が時々あります。

そういった背景があるので、誰がどれぐらい忙しいかがけっこうわかりづらいんですよ。なので2週間に1回くらい、「今どういうタスクをやってるのか」みたいなことを共有する会みたいなものを最近始めていて。

それでメンバー同士が、「今、どこのチームの誰とこういう案件をやってるのか」みたいなことが、けっこう見えるようになってきた。

あとはリモートになったというところもあって、2週間に1度ランチ会を開催しています。

大槻:ランチ会、いいですね。「LINE NEWS」はリリースが隔週でありますが、その度に「息抜き会」といって、リリース後のお疲れさま会をしてますよね。

稲置:1度私も、別のチームとコラボということで、チームとして参加しましたね。

大槻:来てもらいましたね。毎回いろいろな人を呼んで、「LINE NEWS」以外の人とも一緒にワイワイしてますね。

まだ質問はいっぱいもらっていますが、この後のパートの人の回答と併せてしたほうがいいものもいくつかありそうなので、ちょっと早いですが次のパートに移りましょう。ファミリーサービスの開発についての説明は以上です。ご静聴いただきありがとうございました。