プライベートクラウドを用いてフロントエンドのDXを向上　LINEのフロントエンドエンジニアが目指すもの

自己紹介

吉澤峻行氏（以下、吉澤）：それでは「プライベートクラウドを用いてLINEのフロントエンドのDXを向上させる」という題で吉澤が発表いたします。自己紹介、普段の業務内容、技術スタックとチーム体制、プロジェクトのおもしろい点、現状の課題と今後の展望という流れでお話ししたいと思います。

本来、スライドで自己紹介するのはあまり好みではないのですが、私がこの発表をしているDevOpsというポジションに応募して内定した場合、入ると確実に私と一緒に仕事をすることになるので、自己紹介したほうがいいかなと思いまして、簡単に自己紹介します。

私は吉澤という名前でして、rchaser53というアカウントでいろいろやっています。実際にこうしてGitHubとかに何か作っているので、どういうのを作っているんだろうと見たい場合にはこれをベースに見てください。言語としてはRustとかが好みですね。rustfmtとかRustの本体とかにコントリビュートなどをしていました。

最近は「AtCoder」という競技プログラミングにすごいのめり込んでしまっていて、そればかりやっていて、OSSのほうが疎かになっているので、そちらに戻らないとまずいかなと思っています。これもまた初心者なんですが、ロードバイクもやっています。

その他のメンバーとも、恐らくご縁がありましたら一緒に働くことがあると思われますが、ニコニコ動画の生放送をもともとやっていたエンジニアや、弊社のプライベートクラウドのフロントエンドのチームをもともとやっていた人など、そういったあたりの人と一緒に仕事をすることになると思います。

普段の業務内容

普段の業務内容は、いきなり毛色が異なっていて、基本的に私たちのチームはマネージャーも一応いますが、エンジニアしかいませんので、担当するものはすべての社内サービスになります。その社内サービスを実際に企画して開発して運用。サーバーが落ちないように管理をしたりとか問い合わせに対応したりするというようなことをやることになります。

どんな機能を作りたいかや、どんな新規サービスを始めたいかというのを全部自分たちで決めることになります。先ほども軽くお話ししましたが、利用ユーザーは、もう完全に同僚のみなさまです。先ほどいろいろ発表してくださった方からも問い合わせが来たことが、何回かあります。そんな状況です。同僚のみなさまがお客さまになります。

同僚からの問い合わせの対応を行ったり、LINEは社内インフラに「Verda」というプライベートクラウドを使っていますが、そのあたりで何か「すごい大きな変更がありました！」みたいな話があったら、改めてそれをUIT全体に共有するというようなことも、仕事の一環としてあります。

社内サービスとは言うものの、いったい何なんだという話になると思うんですが、だいたい主に2パターンぐらいあります。ゼロベースで本当にDBの構築やテーブルの設計を行って、アーキテクチャがどうだというところからやるようなゼロベースで開発するものを作って、APIサーバーとかを立てて、DBとかを立ててCLIとかGUIで管理画面を作ったりするパターン。

そういったゼロベースで開発するパターンと、OSSのミドルウェアをホスティングして必要に応じて機能を足していくというようなパターンがあります。ちょっとこれだけだと何言っているかわからないみたいな話があるので、次に具体例を説明できればなと思います。

それ以外の業務内容

このようなことが普段の業務内容になるんですが、それ以外にもこんなものがあります。ゼロベースのパターンとしてはAbyssというサービスがあったり、Belcheroというサービスがあったり、Torimochiというサービスがあったりします。このへんに関しては、LINE DEVELOPER DAY2020の資料で、こんなものをやっていますよみたいなものがありますので、もし興味がありましたら、そちらをご覧ください。

実際にミドルウェアをホスティングして、それにいろいろやっているパターンではVerdaccioやSentry、CircleCIがあります。私たちのチームで関わっているのが青色になりますね。このAbyssとかBelcheroとかVerdaccioになります。

具体的なイメージはこちらです。これはBelcheroというサービスがあるんですがNode版のHerokuみたいなもので、そのBelcheroを実際に叩いて、Belcheroの利用ユーザーが立てたサービスです。対象の機能がブラウザで実際に使えるかという「Can I use」というサービスがあると思いますが、あれのLINE版に「Can We use」というのがあって、それを実際に私たちが作ったBelcheroを使ってホスティングしてもらっているというものが、これになります。

次がAbyssです。これは静的なリソースをホスティングするもので、これをCLIを使ってデプロイすると、CDNを使ってホスティングしたり、いつデプロイを行ったかのログを取ったり。CDNのアクセスログをSQL経由で分析できるようにしたりなど、そういったことを面倒見ます。

実際にどんなファイルがアップロードされているのかを、こうやって画面上で見ることができます。これはできたのが3、4年ぐらい前と、ちょっと古いのですが、この画面はNuxtで作られています。そんなに凝ったデザインではないのですが、一応GUIを作る機会もあります。

次がプライベートnpm。先ほどVerdaccioをホスティングしている話をしたと思うんですが、Node.jsのパッケージマネージャ、npmのレジストリを社内にホスティングしていますが、それのUIがないのでそれを自分たちで作ったのがこれです。

これに関しては、まだできあがって1年ぐらいしか経っていないんですが、画面自体はVue 3を使って開発しました。今ではもうVue 3を使っているところはそこまで珍しくはないとは思いますが、これが開発が開始された時は2020年の5月とか6月ぐらいなので、そこそこ新しいものを使って開発できたのではないかなと思います。

何が言いたいのかというと、一応社内サービスですが、新規に立ち上げる際に、全員が自由に技術が使えて、それなりに新しいものも使うことができるということが伝えたいという話です。

技術スタック

この次は現在使っている技術スタックになります。先ほどのみなさんにも、こういった技術スタックを説明する場所があったと思うんですが、それと比べるとNode.js以外のものが腐るほどある。むしろNode.jsに関してはわずかなもの、つまりJavaScriptに関してはわずかなものしか書かれていないということです。「実際にこれ以外にも使っているんだろ」と言うと使ってはいますが、それしか書いていないと。

それ以外は明らかにミドルウェアミドルウェアしたものが大量に書かれています。ミドルウェア以外にも、CloudFrontとか、CDNとかもあります。いろいろなものを使っていますが、要はこれで何を言いたいかというと、特に縛りは全然ないと。運用経験があって導入に自信がある。「私にこれを任せてくれれば自分たちで導入して、お前たち全員に使えるようにしてやるぜ！」と自信があるなら、好きな技術が導入できる、ということがこちらのスライドで言いたかったことです。

チーム体制は、これもちょっと触れたのですが、非常に珍しいチーム体制をしています。先ほどまでいろいろなサービスの説明があったと思うんですが、ビジネスサイドやQA、サーバーサイド、インフラのチームなど、いろいろメンバー構成の役割があったと思うんですが、私たちのチームはフロントエンドのエンジニアしかいません。UITのメンバーしかいません。UITのメンバーの中で、マネージャーがいてエンジニアがいて、あとは全部自分たちでUIを決めてテストから何から何までやるといった、よくわからないチームになっています。

利用ユーザーも特殊です。私たちのエンドユーザーは同僚です。エンジニアになります。こういった点からもかなり毛色は異なってくるのではないかなと思います。社外に対して基本的にアウトプットするというのはかなり少ないわけですね。ないと言ってもいいかもしれません（笑）。デザインなども自分たちでやるために、デザイナーももちろんいません。役職はマネージャーとエンジニアのみです。

しかし自分たちのUITのチームだけで完結するかというと、別にそういうわけではなく、部署横断でいろいろやっている人であったり、他のチームの方々と関わったりする人も別に珍しくはありません。

例えばプライベートクラウドの製品に関わって、チーム内だけではなくてUIT全体に発生したような問題などや疑問などを持って行ってまとめ、「こういうことがあったんだけどどうすればいいかな？」と、プライベートクラウドチームのみなさんに相談したり、要望を投げかけたりします。それがベースとなってボトムアップに実行された施策なども一応あります。

例えばオブジェクトストレージのハードウェアが、もともとハードディスクドライブだったのですが、それをSSDに変換したり。今やっているのは、先ほどのAbyssで使われているCDNの圧縮がgzipしか使えなかったのですが、brotliを使えるように変換してもらったり、いろいろとボトムアップベースで、私たちもUITからピックして企画がスタートして、プライベートクラウドのVerdaのみなさんに動いてもらったというケースなど、いろいろとあります。

LINE NEWSやLINEのコーポレートページの他に、ここには書いていませんがLINE STOREやLINE LIVE、LINE Payなど、いろいろなプロジェクトの方々と直接関わってやり取りします。その人たちが実際に「こんな機能をください」「こういう問題があるんだ」などを、Slackベースでやり取りをして、新規機能の開発を行っていくことをやっています。普段会話する同僚が、エンドユーザーというわけですね。3回ぐらい同じことを言っている気がしますが。

プロジェクトのおもしろい点

プロジェクトのおもしろい点は、先ほども今まで永遠と話していて非常によくわからないプロジェクトという感じがあると思いますが、会議が非常に少ないです。なのでフットワークがすごい軽いです。これはメンバーがUITで完結しているからというのが非常に大きいです。あとは、これもUIT内で完結するからというのがありますが、行う作業がほぼすべてボトムアップで決まります。

自分たちで声を上げてもいいですし、現場から利用ユーザーのみなさんから来た意見を受け取って、それで何かしら決めたり。さらに言うと、先ほどの画面で、どんな技術を使っているかを見せたと思いますが、いろいろなものを使っているので、フロントだけではなく、サーバーサイドやインフラの本当にいろいろな技術を使うようになります。

意思決定が少なく、関わる人数が少ないためというのと、Slackベースでやり取りをするという話です。「会議が少なくてフットワークが軽い」とありますが、問い合わせや障害対応、技術調査の確認があるために拘束時間が短いというわけではないということは詐欺にならないようにお伝えしておきたいなと思っています。割り込みも問い合わせなので、けっこうな量なのではないでしょうか。

おもしろい点としては、フロントエンドのチームなのですが、いろいろな技術が必要になりますよというのがけっこうおもしろいと思います。本当に何から何まで自分たちのチームでサービスを完結させているからです。基本的に専業の職種が多いLINEで、かなり珍しいプロジェクトだと思います。ミドルウェアのホスティングや冗長化など、その辺りを考えたりなどは、基本あまりやらないんじゃないでしょうか。

とは言え、先ほども言いましたが、フロントエンドエンジニアとしての仕事もできますが、残念ながら、現状はインフラの仕事が多いような状況になってしまっています。

現状の課題と今後の展望

現状の課題と今後の展望です。社外と比較して社内サービスの機能が不足しているのと、サービス全体の安定性が不足しているといます。これはどういうことかと言うと、サードパーティのサービスがなかなか使えないので、オンプレのものを自分たちでホスティングして使うケースが多いですが、そもそもクラウド版では提供しているけどオンプレ版がなかったり、オンプレ版だと機能が少なかったりというケースがあります。

具体例を挙げるとCircleCIが現状まだ2.0ですが、CircleCIのエンタープライズだと使えなかったりしています。そういった不足する部分を自作したり、類似のミドルウェアをホスティングすることで対応することが、私たちが今後やっていかなければいけないのかなと思っています。

サービス全体の安定性がやはり不足しているところがありますので、ミドルウェアやタスクスケジューラなどを導入したり、冗長性を担保したりしていろいろやっていきたいなと思っています。というのがフロントエンドエンジニアのチームなのですが、フロントエンドと関わりながらいろいろなことをやる点が、このチームのおもしろいところではないかなと思っています。ありがとうございました。