月間154億PVを誇るプロダクトのフロントを12人で開発する　「LINE NEWS」のフロントエンド開発の特徴と魅力

LINE NEWSについて

折原レオナルド賢氏：では、自分からは「LINE NEWSの開発メンバーの働き方」という題で、「LINE NEWS」の紹介をします。

自分は折原レオナルド賢と言います。フロントエンジニアをやっています。たまにチーム内でUXアドバイザー的な立ち回りをすることもありますが、主にはフロントエンジニアです。LINE入社は3年目で、主な開発プロダクトとしてLINE NEWSをやっています。

最初に、LINE NEWSがどういうものなのかを紹介します。LINE NEWSは一言で言えば、ニュースを提供するプロダクトになっています。

ニュースを提供するプロダクトというと「画像とテキストを置いて終わりじゃないか」と勘違いされる方も多いと思いますが、LINE NEWSではかなり複雑な処理を行っているところがあり、「TikTok」のような動画を動かせるようなUIだったり、数多くの難しいコンポーネントを用意していました。そしてA／Bテストなども行っているので、ユーザーによって画面が出し分けられるような機能もあります。

（スライドを指して）LINE NEWSがどこにあるかというと、LINEアプリ内のこの位置にあります。つまりLINEの中のサービスとしても、LINEを使っているユーザーから、かなりリーチしやすいところにあるものとなっています。

具体的な数字でいうと、LINE NEWSのインパクトは月間7,700万人のアクティブユーザー、そして月間154億のPVを叩き出しています。この数字は日本国内でフロントエンド開発をする場面ではかなり珍しい数字なのではと自分は考えています。

もしかしたら数字だけではピンととない人もいるかもしれないので、簡単な例を紹介します。今、リモートワークなどで会社に出社することが少なくなっている方もいると思うのですが、以前、満員電車に潰されながら自分の目の視界に入ってしまうスマートフォンの画面の中で、「この前自分がリリースしたやつだ！」と1つ2つぐらいは見かけるぐらいのインパクトになっています。

LINE NEWSのフロントエンド技術スタック

このフロントエンド技術スタックはどうなっているのかですが、LINE NEWSには大きく2つの画面があります。1つは、先ほど紹介したタブから行けるニュースタブ面。そしてもう1つは、そのニュースタブから記事をクリックした時に出てくる、記事面です。大きく分けて2つと言いましたが、記事面にはいくつかの面が存在します。

ざっくりいうと、ニュースタブ面はReact、そして記事面はVue.jsで開発されています。

React、Vue、TypeScriptの3つが、LINE NEWSで使われている主な開発のツールになっています。ReactはFlux Utilsを使ったstore構成をとっていたり、Vue.jsに関してはVue 2・Vue 3を使っていたり、Vuexを使っている面もあったりします。

ここでみなさんが危惧されることは、「これはもしかすると、それぞれのフレームワークが混ざってしまって、カオスになっているのではないか？」ということだと思いますが、各フレームワークは面ごとに独立しています。

タブ面はReactで、記事面はVue.jsになっています。記事面も多岐に渡っているので、Vue 2で開発されるところやVue 3で開発するところ、さまざまです。つまり、混ざってはいないので、カオスにはなっていないということをお伝えします。

また、LINE NEWSではかなりアウトプットにも力を入れています。詳細な技術の話として「LINE NEWSをTypeScript化したい！」というスライドがあります。これは、LINE NEWSをJavaScriptからTypeScriptに移行する時に、どのようなフローを経たのか、そしてどのような困難があったのかを紹介しているものになります。

そして、11月11日のLINE DEVELOPER DAY 2021では、「LINE NEWSにおけるレイアウトシフト問題への取り組み」ということで、LINE NEWSがいかにレイアウトシフトに対応したかを、かなり掘り下げて技術的なところまで紹介していくので、興味がありましたら、ぜひLINE DEV DAYに参加して見てもらえればと思います。

LINE NEWSの開発プロセス

そんなLINE NEWSの開発プロセスがどうなっているかというと、LINE NEWSはスモールチーム体制というものをとっています。スモールチームは大きく分けて3つあり、それぞれにフロントエンジニアが2名ずつ所属していることになります。

フロントエンジニアのほかには、それぞれプロダクトオーナー、サーバーエンジニア、QAエンジニアが存在していて、このスモールチーム1つでプロジェクトを進られるような体制になっています。

そしてLINE NEWSには、LINE NEWSで開発すべきタスクが優先順位順に並んでいるプロダクトバックログがあります。

このプロダクトバックログは共有されており、かなり大きいです。共有は、スモールチーム1・2・3でされていることになります。

スモールチームは、このプロダクトバックログの中から「自分がやりたい」というタスクを取ってアサインしていくフローをとります。

このアサインですが、自分がやりたいという気持ちからアサインをすることもあれば、「この案件であればスモールチーム2にかなり得意な人がいる」ということでスモールチーム2にアサインするというように、多岐に渡ったアサインの仕方があります。

アサインする会を“アサイン会”という題で毎週金曜日に行っていますが、さながらドラフト会議のように、かなり盛り上がる、LINE NEWSの開発チームの中では一大イベントになっていると感じています。

スモールチームにアサインされた案件は、スモールチームのプロダクトバックログへ入っていきます。そこのバックログの優先順位に沿って、スモールチームはスプリント内で開発を進めていくやり方をとります。

実はスモールチーム3つのほかに“カイゼンチーム”というものもLINE NEWSには存在しています。カイゼンチームにもフロントエンドエンジニアが2人、そしてサーバーエンジニアが4人、QAエンジニアが2人と、また小さなチームとして存在しています。

カイゼンチームにも同じようにバックログがあります。カイゼンチームに積まれているバックログは、例えばwebpackのバージョンアップであったり、「不要なコードがあったからそれを削除したい」といったような開発イシューが主にあります。

新規開発を進めるLINE NEWSのスモールチームとはまた別で、案件をこなすだけではなく、開発改善だったり、ちょっと手が届かないところにあるようなタスクを解消してくれるチームになっています。

このため、カイゼンチームがかなりLINE NEWSの開発に貢献しています。案件を進める、LINE NEWSを開発、プロダクトをどんどん良くしていく中で、手を触れなくなりがちな改善的なイシューに関しても取り組めるというふうになっています。

LINE NEWSの中でフロントエンジニアをやる魅力

そんなLINE NEWSの中でフロントエンジニアをやる魅力が何かというと、スモールチーム1・2・3、そしてカイゼンチーム、これにマネージャー陣を加えると、LINE NEWSのフロントエンジニアだけで12人にもなります。12人というのは、1つのプロジェクトという中では、かなり大きいものになっていると自分は考えています。フロントエンドだけで12人ですからね。

LINE NEWSには、とにかくフロントエンジニアの人数が多いです。スモールチームという分断の仕方はしているものの、チーム自体は分断されていない。要は、フロントエンドのLINE NEWSとしては分断されていないので、12人で一緒に切磋琢磨することになります。

このような人数がいるとどういうことができるかと言うと、1つはモブプログラミングだったり、モブワークができます。モブプログラミングは、1人がコードを触りながら、その画面をみんなで見て、ああでもないこうでもないと言って開発を進めていくやり方になります。モブプログラミングは、毎週水曜日にやりたいことを持ち寄って、みんなで倒していくというふうなアプローチをとって開催しています。

これとは別に、実装で詰まって自分で1人で困っている時にも、Slackでフロントエンドメンバーに対して「誰か来てくれませんか？」と呼ぶと、そこそこの人数が来る人数感になっています。

もう1つは、新しい技術をみんなでキャッチアップできます。先ほど紹介したTypeScript移行についても、実際にTypeScript移行が行われた時、技術者の中にはTypeScriptに自信がない方もいたはずです。こういう方に対しても、TypeScriptの勉強を一緒にやって底上げする勉強会を開催しました。

React Hooksに対しても共有する会が行われています。以前、LINE NEWSではReactのバージョンが古くHooksが使えなかったため、クラスコンポーネントだったり、旧来的な書き方をしていました。Reactのバージョンを上げることによってHooksが使えるようになってからは、Hooksで書いてFunction Componentのアプローチをとるようになるのですが、この時も、先ほどのTypeScriptと同じように、みんなで共有会・勉強会をしました。

人数が多いと、その中での得意分野もさまざまになってきます。ある人はアクセシビリティにかなり関心があって得意であったり、ある人はTypeScriptの型についてかなり詳しかったり。またある人は、ユーザーエクスペリエンスに対して興味を持っていて、それについて着手したいという考えを持っていたり。

このように、やはり人数が多いと得意分野はさまざま出てくるので、それぞれに対して、「アクセシビリティだったらあの人に聞こう」「TypeScriptだったらあの人に聞こう」みたいなアサインをできることになります。

アクセシビリティとユーザーエクスペリエンスに関してだと、タスクフォースとして、チームの枠を超えた兼業をしたケースもあります。どういうことかというと、LINE NEWSに属したまま「自分はアクセシビリティが得意なので、さらにLINEのアクセシビリティを上げたい」ということで、アクセシビリティを改善する組織を立ち上げ、そこと兼業するような感じです。

このように、人数が多いということもありますが、得意分野が多いと、その得意分野を活かせる立場にあるように感じています。

いろいろな技術を触りたい人にLINE NEWSはおすすめ

まとめます。LINE NEWSのフロントエンドチームはどういうものかというと、実装したものが怖いくらいの人に使われます。これは最初にお伝えしたように、PV数・Monthly Active User数がかなり多いので、かなりの人数が自分の作ったプロダクトを触ってくれるということです。これはうれしいことで、やりがいがあることではありますが、最初はなかなか怖くて怖気づいてしまう人もいるようです。

そして、React・Vue、Vueの中でもVue 2・Vue 3が使われていたり、フレームワークが複数使われているので、いろいろな技術に触れられます。そのため、いろいろな技術を触ってみたい、または新しいフレームが出た時にもっと新しい技術を使いたい人には、かなりうってつけなのではないかと考えています。

そして、メンバーが多く、多様で自律的です。これによって新しい挑戦・成長もしやすいと自分は考えています。メンバーが多いので、「自分があれをやりたい」と提案した時に、それに対してフォローしてくれるようなメンバーも多くなります。また、挑戦したい時も一緒に闘ってくれるようなメンバーもいることになるので、かなりやりがいもあり、調整がしやすい環境ではないかと考えています。

ということで、LINE NEWSの紹介はここまでになります。フロントエンドとして人数が多いので、ぜひ一緒に働いてフロントエンドエンジニアとして高みを目指せるような関係になれればと思います。

以上です。ありがとうございました。