【Team & Project】LINEのユーザ向けサービスのWebフロントエンドを開発しているチームを紹介します

LINEの開発組織のそれぞれの部門やプロジェクトについて、その役割や体制、技術スタック、今後の課題やロードマップなどを具体的に紹介していく「Team & Project」シリーズ。

今回は、フロントエンド開発組織の中で、ユーザ向けサービスのWebフロントエンドを担当しているチームについて紹介します。フロントエンド開発センターの清水大輔、縣亮太、折原レオナルド賢に話を聞きました。

ユーザ向けサービスのWebフロントエンドを担当しているチームのzoom会議の様子

―― まず、自己紹介をお願いします。

清水:システム開発会社で図書館システムや金融・物流の開発などを担当した後、2009年5月にネイバージャパン(現LINE)にフロントエンドエンジニアとして入社しました。 検索サービスのフロントエンド開発に関わり、LINEアプリの立ち上げ以降は様々なWebサービスのフロントエンド開発や、JavaScript SDKなどのプラットフォーム向けプロダクト開発を担当していました。現在は、フロントエンド開発センターの中にあるUIT1室の室長を務めています。

:2010年4月に当時のネイバージャパンに新卒で入社しました。入社してからすぐにフロントエンドエンジニアとして様々なサービスの開発に携わり、現在はUIT1室 Front-end Dev3チームのマネージャーを務めています。

折原:広告代理店でエンジニア・UXデザイナーを担当した後、2018年11月にLINEに入社しました。それ以来ずっとLINE NEWSのフロントエンド開発を担当しています。

―― 皆さんがLINEに入った理由、働くやりがいなどを教えてください。

清水:以前に勤めていた会社では、インフラやサーバサイドからフロントエンドまで幅広く担当していましたのですが、当時はGoogle Mapsのようなサービスが流行り始め、Webのフロントエンドがどんどんとリッチになっていく最中でした。そこからフロントエンド開発への興味を持つようになりました。
ネイバージャパンでフロントエンド開発の求人を知り、自社サービスでフロントエンド専門の組織があるところも珍しく、自身のキャリアとしてフロントエンド開発に特化して専門的にやってみたいと考えていました。また、図書館の蔵書検索サービスを開発していたつながりで、検索サービスのフロントエンド開発に関わりたいと強く思ったのが入社のきっかけです。

:私は学生の頃、PHPやFlashを得意としていたので、就職先を探す時もその経験が活きるところを探していて、当時NHN Japanの採用試験を受けに行った時、ネイバージャパンの会社説明も同時に受けることができました。Google検索に対抗するような姿勢で、何か面白いことができるかもしれないという思いを感じ、そして私自身も新しいことに挑戦する気持ちでネイバージャパンに入社を決めました。

折原:私は、前職で半年ほど開発・ユーザーテスト等でUIとUXをデータにもとづいて決定する取り組みを行っていました。その取り組み自体、とても大掛かりなことだったのですが、利用ユーザ数は数十人と、なかなかユーザ数が伸びないB to Bサービスでした。自分が開発したサービスをもっと広く届けていきたいと強く思い、既にユーザが沢山いるLINEであればそれが実現できるという期待感がありました。

清水:LINEアプリというとiOSやAndroidといったNative Applicationのイメージがあるかもしれませんが、WebViewを使って作られている部分が非常に多くあります。そしてLINEという多くのユーザーに利用されているアプリケーションのフロントエンド開発は考慮すべき範囲が広く、多くのユーザーが使いやすいように開発面で様々な工夫をする必要があります。
例えばSPA(Single Page Application)で必要なサーバーのAPIがエラーを返したとしても、それをユーザに対して「どのように適切な情報を伝え処理するのか」という点も含めて、フロントエンドエンジニアが責任を持つ必要があります。
また、様々な国やユーザの環境の違いを考慮したアクセシビリティや、UI/UXについて対応が必要な場面も多くあります。このような経験は、LINEという巨大なプラットフォーム上だからこそできる経験で、大きなやりがいの1つではないかと考えています。

:フロントエンド開発の業務では、ひとつのサービスを集中して見ることもありますが、LINEにはファミリーサービスが多く存在するため、複数のサービスを横断的に担当することもあります。ファミリーサービスの開発は各プロジェクトチームで進めているのですが、似たような問題を抱えることがよくあります。そういった時に生まれる開発者同士のコラボレーションや、問題を解決していく渦中にいることがとても楽しいですね。また様々な拠点の多国籍な開発メンバーから、多くの異なる意見が聞けることも大変刺激があって面白いです。

折原:LINEアプリのユーザ数は、実際のアクセス数をみると膨大なことがすぐに分かります。しかし新しい機能を実装した時、家族や友人から「アプリに新しいエリア出来てたね!」などと言われたり、電車の中でLINE NEWSを使っている人を見かけたりすると、自分の開発したサービスが多くの人の手に届いていることを実感し、とても嬉しく感じます。使っている人が近くにいた時は、ついついどのように使用しているかじっと見続けてしまったりしますね(笑)。

左上からフロントエンド開発センターの中にあるUIT1室の室長の清水、UIT1室 Front-end Dev3チームのマネージャーの縣、
LINE NEWSのフロントエンド開発を担当する折原

―― チームの構成・役割などについて教えてください。

清水:フロントエンド開発センターには大きく分けてUIT1室、UIT2室という組織が存在します。UIT1室は新宿オフィスで働くメンバーが所属していて、UIT2室は京都、福岡の国内の他の拠点のメンバーが兼務で所属する組織となっています。そして、それぞれの室の中ではいくつかのチームに分かれています。

日本国内以外にも韓国、台湾、ベトナムにフロントエンドエンジニアの組織があり、共同でプロジェクトを進めることもあります。主にチャットやワークショップなどを通じて技術共有など各拠点同士で連携を行なっています。

私たちは、大きく分けて3つの分野でフロントエンド開発に関わっています。
1つ目はLINE NEWS、LINE LIVE、LINEギフトやLINEクーポンなどのコンシューマー向けのサービスです。
2つ目はLINE公式アカウント、LINEキャリアなどのビジネス向けのサービス、そして3つ目はLINE Front-end Framework(LIFF)などのJavaScript SDKや、社内ツールの整備などを行うエンジニア向けのプロダクト開発です。
この中でもコンシューマー向けサービスが最も多い割合を占めていて、LINEアプリの中のWebViewで提供するアプリケーションの開発を中心に行っています。純粋にWebアプリケーションとしてHTML、JavaScript、CSSを使った開発以外にもiOSやAndroidと連携する部分についてもクライアントチームと連携して開発に関わっています。チームはサービスごとに分かれている訳ではなく、プロジェクトの規模など状況によっては、チームを横断して1つのサービスの開発に関わるケースもあります。また、比較的小規模なプロジェクトであれば並行して複数のプロジェクトにアサインされることも少なくありません。

―― チームメンバーを紹介してください。

清水:組織としての私たちの大きな役割はフロントエンド開発ですが、個々が得意とするスキルや分野を生かして+ αの能力や技術を持って関わっているメンバーがとても多くいます。例えば、LINE NEWSを担当する折原さんは、前職のUXデザイナーとしての経験を活かして、エンジニア観点からUX改善に関わっています。また、アクセシビリティ分野の研究やガイドライン作成を行い組織内で勉強会などを積極的に実施しているメンバーもいます。
昨今のフロントエンド開発は、周辺知識の習得が必要な分野が広くなっていますが、このように様々な分野で得意とするスキルを持ったメンバーがチーム内にいるということは、組織にとって非常に大きな強みだと考えています。

チームについて話す清水

―― 利用技術・開発環境について教えてください。

清水:Vue.js、React、TypeScript、Sassなど、基本的にOSSのプロダクトを使うケースが多いため、業界のトレンドと大きくは変わらないと思います。プロジェクトにアサインされたメンバーにはある程度裁量を与えているため、チーム内で合意されれば新しいツールや仕組みを導入することができます。
また、例年、社内のフロントエンドエンジニア向けに開発環境についてアンケートをとっています。2019年のものについては、こちらの資料で公開しているので是非参考にしてみてください。

一方、サービスの最適化やビジネス上の優位性などを考慮すると、どうしても内製が必要なケースもあります。例えば、私たちはWebサービス上での効果測定やデータ分析を行うための独自のプラットフォームを持っています。この分析の独自プラットフォームは、フロントエンド開発センターのメンバーが中心となり開発に関わっています。
Why LINE’s Front-end Development Team Built the Web Tracking System

LINE NEWSなど、多くのサービスではこのプラットフォームを利用してデータの分析を行い、サービスへの改善などに繋げています。このように膨大なデータが集まる独自プラットフォームの設計や開発に関われる機会があるのは、LINEならではのチャレンジングなものの1つだと思います。

――フロントエンド開発について具体的に教えてください。

折原:今回は私の担当するLINE NEWSのフロントエンドがどのように開発されているかをご紹介します。

――LINE NEWSとは

LINE NEWSはとても多くのユーザーによって支えられています。
・月間アクティブユーザ7,100万人*
・月間140億PV超*
*いずれも2020年3月末時点

日本の人口1.261億人(令和元年、引用:総務省統計局)の2人に1人以上はLINE NEWSを見ているという計算となります。国内においてこれほどのMAUを持っているサービスは数えるほどしかありません。LINE NEWSはニュースだけでなく、“情報を届ける媒体”として「天気」「運行情報」「避難情報」「今日の運勢」「スポーツ速報」など多くのコンテンツを提供してきました。

最近では、雑誌を手にとったように眺めることができる「LINE MOOK」や、新たな動画プラットフォームの「VISION」など新しいコンテンツも増やしています。これらのコンテンツの開発内容については、いくつかピックアップして説明します。

――LINE NEWSのアーキテクチャ

News Tabと呼んでいる箇所は、LINE NEWSのトップで記事が並んでいる画面のことを指します。ニュースタイトルや画像をタップすると記事の画面へ遷移します。News TabはReactとFluxで作られたSPA(Single Page Application)となっています。一方で記事の画面は主にVue.jsとVuexが使われています。LINE NEWS内には数多くの機能があるため、それぞれアーキテクチャが異なっています。

――最近開発したコンテンツ紹介

Jリーグ速報
Jリーグを始めとしたスポーツの速報を伝えることもLINE NEWSの役割のひとつです。サッカーに興味がある人は、熱い試合をテレビでみながらLINE NEWSのサッカー速報を一緒に眺めてみても良いかもしれません。ハイライトシーンだけでなく、場面ごとの選手たちの動きについてのコメントや詳細な情報を瞬時に見ることができます。

両チームの統計情報を表示するレーダーチャートという機能の実装では当初は外部のデータビジュアライゼーションのライブラリを利用しようと考えていました。
しかし、こういったライブラリは容量が比較的大きなものが多く、また、レーダーチャートはJリーグの速報機能でしか用いられる予定がありませんでした。
そこで、「レーダーチャートくらいのSVGであれば、それほど実装の難易度が高くないんじゃないか」「機能が限定的だからシンプルな実装ができそう!」という考えから、自前でSVGを描画するコンポーネントを作ることになりました。SVGの記法に則って角度を計算するといった独特な要素はあったものの、ライブラリを導入するより軽くシンプルに実装できました。

VISION
VISIONはスマートフォンに特化した動画視聴コンテンツです。

多種多様な動画をスワイプで次々と再生するこの機能もWebで作られています。カルーセル形式で最大15個のvideo要素が横に並び、スワイプすることで再生を次々と切り替えられるという仕様をWebで実現するのには様々な課題がありました。その中でも古い機種のようなスペックが低い端末でカルーセル動作が重かったり、自動再生までに時間がかかったり、そもそも自動再生が始まらないなど、パフォーマンス起因の不具合の解消に特に時間を要しました。LINE NEWS UITチームで毎週実施している開発相談会でVISIONの実装について意見を交わしたところこんな解決策が得られました。

・カルーセルをスワイプさせている間は動画の再生を中断させる処理を入れる
・15個のvideo要素をすべてマウントするのではなく通常は画像のみをマウントし、必要なときだけvideo要素をマウントする
これによって、パフォーマンスがかなり改善され、古い機種でも問題なく動作するクオリティを実現することができました。一人では解決できない様な問題にぶつかっても、こうして周りに相談できる環境が整っていたため解決することが出来ました。

―― 今後のチーム課題を教えてください。

清水:LINEはNative Applicationとして多くのユーザが利用しているコミュニケーションツールですが、現在そのプラットフォーム上でユーザーの生活の様々なシーンを支える”Life on LINE”構想を推進しています。そのため、AIやFintechなどの新たな分野にも積極的にサービス展開をしています。これらを全てNative Applicationとして開発するには事業スピードや改善速度がマッチしないことから、私たちは多くのサービスをWebアプリケーションとして提供してきています。
しかし、サービスや組織が多くなるにつれサービスごとの品質やUXのばらつきというものが起きています。そういったものを解消するために先ほどあげたような分析基盤やJavaScript SDK、Web Componentsを利用したUI Framework、アクセシビリティの整備など、フロントエンド開発社向けの開発プラットフォームの整備といった課題に取り組んでいます。

:私のチームが主に担当しているサービスであるLINE LIVEとLINEポイントは、どちらもサービス開始から時間が経っていてレガシーコードが目立つようになってきました。また近年は、担当する開発者の人数も少しずつ増えています。最近ではレビュー環境拡充、負荷分散のためプラス1、2人の人員強化を行いました。
少しずつ改善は図ってきていたものの、もう少し大胆に開発環境などを一新するタイミングに差し掛かっていると思います。
LINE LIVEに関しては、近年までアプリに力を入れてきた為、Webの部分がアプリの機能開発に追いつけていないという課題があります。SP Web版では、動画の視聴は最低限行えますが、ログインしていないのでコメントはできませんし、コインの購入をすることもできません。
Webは手軽にランディングできるという利点があるので、アプリが中心であれば最低限の機能だけで必要十分という考えもあります。しかしその一方、端末の性能向上やWebブラウザの表現も増えていて、トレンドも常に変化しています。Webフロントエンド開発担当としては、これらのアップデートをなかなかできていないのは課題と考えています。

チームの課題について話す縣

折原:LINE NEWSではメンバーの強い要望と努力のおかげで、TypeScriptやReact Hooksのようなモダンな開発環境に置き換えることが出来ました。テストを書く環境や書く基準などを明確に決めたことで、健全なコード品質を保てる土台が出来ています。
しかし一方で、開発環境のモダン化はすべてのメンバーが担当していたわけではないので、新しい技術のキャッチアップがメンバー全員に必要でした。また、「テストはどう書いてなにをテストするべきか」「コードの分割はどの粒度で行うべきか」などチーム全体として統一し、認識のすり合わせが必要となってきています。
現状では、「モダンな技術を率先して使いましょう」「テストを書く基準を決めたので書きましょう」と強制に近い形で認識のすり合わせをしているため、業務以外の時間を使って各自がキャッチアップをする必要があったり、モダン技術に慣れていないメンバーは、新たな開発工数の見積もりが難しいという問題が起きています。

―― 課題解決に向けた取り組みと今後の目標について教えてください。

:私たちのプロジェクトでは特殊な取り組みというものはありません。開発メンバーの増員によって起こってくる問題は優先して解決していかなくてはならず、開発者間の意思疎通や属人化の解消のためにもTypeScriptの導入、Test、CIの整備を進めています。TypeScriptは社内でも徐々に採用事例が増えてきているため、レビュー品質向上の実感もあり、積極的に導入をしていきたいと思っています。
LINE LIVEはアプリ中心の為、Webにかけるリソースは多くありません。しかし、常にデザイナーや企画と相談しながらUXの改善に取り組んでいます。目的のライブを探す検索性の向上や、リファクタリングによる全体的な性能向上など、改善を行っている最中です。
また、UX改善しつつWeb componentsが得意なメンバーを中心に、既存UIコンポーネントのWeb components化も少しずつ進めています。
Web componentsはWebの標準技術の為、パフォーマンス面で優位なケースがあります。Vue、Reactのどちらでも利用することができますし、仮にこれらのコンポーネントベースのフレームワークを今後使わなくなったとしても、Web componentsベースのコンポーネントは残るでしょう。少し未来を見据えた取り組みとなります。そして、同じようにLINEポイントでもUXの改善を行っています。例えば、LINEポイントを利用する際の体感速度を向上させるために、アニメーションを付けたりスケルトンスクリーンを導入しました。この施策についてはUITが主催するイベントで発表も行いました。

今後の目標としては、短期的には今も取り組んでいるJSのTypeScript移行とCI環境等の整備です。さらに、独自実装のWebViewのサービスとして開発されているページをLIFFに移行する計画もあります。これは長期的に見ると、LINEの独自実装をよりWeb標準に近い形で実装し直す計画の第一歩と言えます。このように、環境変化に強いサービスにするための取り組みをしていきたいと思っています。

– 関連リンク –
UIT#4 ページ遷移Animation & Skeleton screen をWebViewアプリに実装した体験談
120億PVの巨大サービス「LINE NEWS」をTypeScript化した話
UIT#4 Web in App ネイティブアプリケーションのように振る舞うウェブ

課題解決に向けた取り組みを話す折原

折原:私たちのチームでは週に90分、モダン技術のキャッチアップのための時間を業務内に強制的取れるようにスケジュールを決めています。
また、週に1時間はコードの書き方について認識を合わせるための時間をチームで取っています。この時間では、現状のコードで納得がいかない部分をみんなで洗い出し
「こういう書き方にしたほうが良いのでは?」などと設計の相談などを行っています。誰か一人のエンジニアが舵をきって方向性を決めていくと、属人化したり、「こういう書き方は好きじゃないんだけど」と言うような問題が起きて、メンバーの不満が溜まりがちになります。私たちはこういった時間を活用して、徹底的に自分の書き方のメリットをメンバー全員に訴え、みんなの同意のもとで方針を決定します。可能な限り民主主義的に、且つ意見しづらい状態を作らないようにすることに努めています。今後の目標として、開発環境を整えつつ、一部モダン化の対応が終わっているコードの全体モダン化を更に浸透させていく予定です。合わせてメンバーのスキルや認識も揃えていく取り組みを進めていく予定です。

―― 最後に、ユーザ向けサービスのWebフロントエンド開発に興味を持ってくれた人にメッセージをお願いします。

清水:フロントエンド開発センターには様々なバックグラウンドや得意分野を持ったメンバーが集まっていて、エンジニアとして多くの刺激を受けることができる環境だと思います。LINEという大きなプラットフォーム上でWebアプリケーションを開発することで得られる経験や、これから取り組むべき課題も多くあるので、興味を持っていたらぜひ一緒に挑戦していきましょう。

:フロントエンドを中心としたチームではありますが、何かアイデアを出す時はそこに囚われずに意見を出し合います。最終的にWebのフロントで表現する手前でいろいろなことを考えます。少しでも興味があれば是非飛び込んできてみてください。

折原:LINE NEWSはユーザ数が本当に多いサービスです。アプリ内とはいえWebで開発できるこの規模のプロダクトは日本ではほとんどないと思います。本気でtoC向けのサービスをやりたい人はぜひ一緒に挑戦していきましょう!

LINEのユーザ向けサービスのWebフロントエンド開発チームではメンバーを募集しています。

フロントエンドエンジニア
フロントエンドエンジニア / フロントエンド開発センター
フロントエンドエンジニア / 京都開発室

Related Post