2024.10.10
将来は卵1パックの価格が2倍に? 多くの日本人が知らない世界の新潮流、「動物福祉」とは
LINE NEWSの開発メンバーの働き方 (全1記事)
提供:LINE株式会社
リンクをコピー
記事をブックマーク
折原レオナルド賢氏:では、自分からは「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には大きく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はスモールチーム体制というものをとっています。スモールチームは大きく分けて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の中でフロントエンジニアをやる魅力が何かというと、スモールチーム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のフロントエンドチームはどういうものかというと、実装したものが怖いくらいの人に使われます。これは最初にお伝えしたように、PV数・Monthly Active User数がかなり多いので、かなりの人数が自分の作ったプロダクトを触ってくれるということです。これはうれしいことで、やりがいがあることではありますが、最初はなかなか怖くて怖気づいてしまう人もいるようです。
そして、React・Vue、Vueの中でもVue 2・Vue 3が使われていたり、フレームワークが複数使われているので、いろいろな技術に触れられます。そのため、いろいろな技術を触ってみたい、または新しいフレームが出た時にもっと新しい技術を使いたい人には、かなりうってつけなのではないかと考えています。
そして、メンバーが多く、多様で自律的です。これによって新しい挑戦・成長もしやすいと自分は考えています。メンバーが多いので、「自分があれをやりたい」と提案した時に、それに対してフォローしてくれるようなメンバーも多くなります。また、挑戦したい時も一緒に闘ってくれるようなメンバーもいることになるので、かなりやりがいもあり、調整がしやすい環境ではないかと考えています。
ということで、LINE NEWSの紹介はここまでになります。フロントエンドとして人数が多いので、ぜひ一緒に働いてフロントエンドエンジニアとして高みを目指せるような関係になれればと思います。
以上です。ありがとうございました。
LINE株式会社
関連タグ:
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.12
自分の人生にプラスに働く「イライラ」は才能 自分の強みや才能につながる“良いイライラ”を見分けるポイント
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.11
気づいたら借金、倒産して身ぐるみを剥がされる経営者 起業に「立派な動機」を求められる恐ろしさ
2024.11.11
「退職代行」を使われた管理職の本音と葛藤 メディアで話題、利用者が右肩上がり…企業が置かれている現状とは
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.12
先週まで元気だったのに、突然辞める「びっくり退職」 退職代行サービスの影響も?上司と部下の“すれ違い”が起きる原因
2024.11.14
よってたかってハイリスクのビジネスモデルに仕立て上げるステークホルダー 「社会的理由」が求められる時代の起業戦略
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.12
自分の人生にプラスに働く「イライラ」は才能 自分の強みや才能につながる“良いイライラ”を見分けるポイント
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.11
気づいたら借金、倒産して身ぐるみを剥がされる経営者 起業に「立派な動機」を求められる恐ろしさ
2024.11.11
「退職代行」を使われた管理職の本音と葛藤 メディアで話題、利用者が右肩上がり…企業が置かれている現状とは
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.12
先週まで元気だったのに、突然辞める「びっくり退職」 退職代行サービスの影響も?上司と部下の“すれ違い”が起きる原因
2024.11.14
よってたかってハイリスクのビジネスモデルに仕立て上げるステークホルダー 「社会的理由」が求められる時代の起業戦略