実は多くのLINEサービス開発を担う技術　幅広いユーザーの“Better Experience”を目指すフロントエンドエンジニアの働き方

フロントエンド開発を担うUIT（User Interface Technology）

金昌熙氏：今日は私からLINEのフロントエンド開発の組織を紹介します。まず私の自己紹介ですが、金昌熙（Kim Changhee）と申します。フロントエンド開発センターのUIT1室副室長をやっています。同時に、Front-end Dev6チームという開発チームのマネージャーも兼任しています。なので、ふだんは組織のマネージメントなどを主にやっているのですが、同時にゴリゴリコードを書いたりもしています。LINEには2018年5月に入社して、今はLINE公式アカウントのフロントエンドの開発をリードしています。

このUITという言葉をこれから使っていくのですが、私たちLINEでは、フロントエンドの組織や領域のことをUITという名称で呼ぶことが多いです。User Interface Technologyの略で、けっこう歴史のある用語になっています。

このような名称を使って、社外においてもフロントエンド技術を広めるための活動など、コミュニティ活動をしています。今日の発表でも、UITという名称が何度か出てくると思いますが、フロントエンドという意味として捉えてもらえればと思います。

いろいろなサービスに関わりながら知見を広めていける環境

まずは、私たちフロントエンド開発センターの組織がどういうふうに構成されているかを、パッと見てもあまりわからないかもしれませんが、参考になればと思います。

センターというのは、けっこう大きな組織の単位で、私たちはフロントエンド開発センターに所属しています。フロントエンド開発センターの下に、UIT CommitteeとUIT1室、2室の3つの組織がぶら下がっています。

UIT1室は東京を拠点に活動する室で、2室は福岡と京都を拠点に活動している仮想組織になっています。

私が働いてる1室はこの東京にありますが、東京には10までの数字がついたチームがあります。その中で、Dev2チームというチームが欠番になっているので、実際には9個のチームが存在しています。

メンバーが3人というすごく小さなチームもあれば、8人いるチームもあります。

文字どおり、私たちはフロントエンド開発センターに属してるので、センター長を含めマネージャー陣、メンバーすべての人が、基本的にフロントエンドをバックグラウンドとして持っている人たちが集まっている専門組織です。なので、フロントエンドエンジニアとして成長していくには、最適な環境なのではないかと思います。

チーム分けですが、プロジェクトによってチームが分かれている印象があります。LINE NEWSといった大きめのサービスだと、3つのチームが同時に関わっていたりします。

1つのチームで、複数のプロダクトを担当する場合もあります。みなさんが聞いたことがあるサービスも出てくると思いますが、パターンはさまざまです。ほかにも、例えば京都拠点と東京拠点が一緒にやってるようなプロジェクトも存在します。

なので、こういうふうに拠点横断して仕事ができたり、チームごとに担当サービスがわりと決まってはいるのですが、その担当できるサービスの幅は非常に広いです。1つのプロジェクトにずっとアサインしっぱなしで、入社後ずっとそのプロジェクトばかりやっていることはあまりありません。基本的にはいろいろなサービスに関わりながら知見を広めていける環境になっています。

できるだけメンバーがスキルを120パーセント発揮できるようなプロジェクトにアサインするように心がけてるので、そこも安心できるかなと思います。

開発は他部署とディスカッションをしながら進めていく

さて、ふだんの私たちが業務をどのように行なっているかを、イメージで表してみました。開発組織ではあるのですが、基本的にフロントエンドエンジニアは、ユーザーが触れる部分を一番作っていると思うので、デザイナーや企画者、サーバーサイドのエンジニアなど、いろいろな職種の方々と関わる必要があります。

わりと企画段階から、みんな一丸となってサービス作りに参加できるというのがLINEの仕事の大きな特徴になっています。

開発担当だからコードを書くことだけに業務がとどまるのではなくて、基本みんなで、企画段階から「この仕様はどうですか」とか「どういうふうにしたいですか」「もっと良くするにはどうすればいいですか」とディスカッションしながら一緒に作っていけるという実感が持てる環境だと思います。

また、リリースした後もユーザーからのフィードバックをもらって、そこでまたみんなで議論して、フィードバックして、良いもの作りに取り組んでいます。

Webフロントエンド技術で開発でされているLINEのサービス

これは面接をやると、けっこうよく聞かれる質問で、LINEはLINEアプリのNativeアプリのイメージが強くて、「LINEでWebフロントエンド技術を使って、なにか作るものはあるの？」と疑問に思われる方もいるかもしれません。

実際に今日来ていただいた学生のみなさんも、やはりどういう業務をするのか、具体的に想像できる方は多くないかもしれませんね。

ご存じのとおり、LINEではいろいろなサービスを作っています。この画面はLINEアプリの一番左にあるホームタブです。そこでLINEが提供しているサービスの一覧を見ることができるのですが、この中のほとんどに、実はWebフロントエンド技術が関わっています。

拠点によって違うかもしれませんが、私たちの仕事の範囲はLINEでサービスしているもののほとんどで、非常にたくさんのサービスに関わってると言えます。「LINE LIVE」とか、「LINEギフト」とか、そういったものもすべてWebのフロントエンド技術を使用して開発されています。

to C、to B、to Dと幅広いユーザーにサービスを提供している

ではここから一歩踏み込んで、フロントエンドエンジニアとして推したいLINEという会社の特徴を紹介したいと思います。

まず大きな特徴として、私たちがサービスを提供するユーザーが非常に幅広いということがあります。あまり学生のみなさんには馴染みがない言葉・表現かもしれませんが、to C、to B、to Dという、いわゆるいろいろな人がユーザーになり得るという環境があります。

to Cのto Consumerがたぶんみなさんが一番イメージしやすいものだと思います。代表的なものでいうと「LINE NEWS」とか。ほかにも最近CMをやっていますね、「LINEギフト」とか、「LINEポイント」とか、そういうサービスがあります。

これがたぶん一番想像しやすいですし、サービスの数としても非常にバリエーションがあるので、みなさんがふだん使っているサービスの開発にも、関われるかもしれません。

次にto B、To Businessですね。これはちょっと代表的なものを出しています。実は一般のユーザーではありません。LINE公式アカウントを例でいうと、お店の人がLINEのサービスを使ってくれているわけですね。

なので、そういう店舗や企業がメッセージを配信できるというビジネスソリューションも私たちは開発しています。スマホのアプリを作ることもあって、その時はNativeの力を少し借りていますが、中身はすべて、基本的にWebフロントエンド技術で作られています。

最後にto Dですね。これは、たぶん恐らく他の会社さんにはなかなか無い、珍しいパターンだと思います。開発者向けのプロダクトですね。LINEの部品を組み込んでもらったり、Webアプリケーション作っている開発者にSDKを提供するなどのソリューションを作っています。

具体的な例でいうと、開発者向けにGitHub上に公開しているSDKがあります。オープンソースとして出していくことで、オープンソースの開発にも関われるというのは、非常に大きな魅力なのではないかなと思います。

このようにto D、to C、to Bなど、対象のユーザーはさまざまですが、私たちはそれぞれのユーザーをしっかり理解して、どんなプロジェクトであってもユーザーとしての背景知識を積みながら開発に取り組んでいます。

現場で使われている技術

たぶんこれが気になる方が多いと思いますが、技術スタックですね。私たちがふだんどんな技術を使っているのかを紹介します。

フロントエンドを志望する学生さんであれば、わりと馴染みがあるのかもしれませんが、まずはJavaScriptやTypeScriptが出てきます。あと、ここに実際はHTMLやCSSといったフロントエンドの基礎的な技術が入ります。

基本的にはブラウザーで動くアプリケーションを作ってもらうので、JavaScriptが第一言語になります。プロジェクトによってはTypeScriptが導入されることもあります。ライブラリはReactとVueが、LINEでは今メジャーになっています。

先ほどは、ブラウザーで動くアプリケーションと言ったのですが、だからといってサーバーサイドに関われるチャンスがまったく無いかというと、そうではありません。JavaScriptのエコシステムには、素晴らしいサーバーサイドのソリューションがあるんですね。

なので、Node.jsをはじめとして、その上で動くいろいろなフレームワークを使って、フロントエンドのためのバックエンドサーバーを自分たちで書いたり、最近はGraphQLを使った取り組みをしたりしてします。

社内の技術の多様さを見せるためにちょっとグラフを貼ってみました。これは「LINE Engineering Blog」に載っていて、検索してくると出てくると思います。興味があったら読んでください。

UITでいえば、毎年このように社内で使っている技術のアンケートを取っていて、これが2021年1月時点でのアンケート結果になっています。

主に使うフレームワークを聞く質問では、ReactとVueがほぼ半分半分という結果になりました。どちらも優劣をつけられないという感じですね。

CSSにおいても、Sass、PostCSSといった、どちらかにすごく偏ることなく、いろいろな技術が使われていることがたぶんわかると思います。

なので1つの技術、決まった技術だからそれを変えられないとか、縛られ過ぎてなかなか新しい技術にチャレンジできないとか、そういうことはあまりありません。恐らく次の年の調査では、またこのグラフは変わってくると思うのですが、その時その時の時代に合った、その時のベストプラクティスを自分たちで研究していきながら、技術を置き換えて開発しています。

フロントエンド技術は入れ替わりがすごく激しいので、そういう変化に柔軟に対応できる体制になっているとも言えます。

ミッションは「Better Experience」

それでは私たちUITの、フロントエンド開発組織のミッションを紹介します。一言で言うと、「Better Experience」です。これは誰のExperienceかというと、ユーザーを想像してもらうとよいと思います。

その中のキーワードをちょっと挙げてみました。Better Experienceを実現するために、私たちは常にユーザーに最も近い場所から、ユーザー目線でものづくりをしています。

また、体が不自由な方を含めたすべてのユーザーに、同じような体験を提供できるように、アクセシビリティの向上にも取り組んでいます。

最後に、私たちの仕事はサービスをリリースしたら終わりではなくて、さらに快適にサービスを使ってもらうためにはどうすればいいかを常に研究して、パフォーマンス指標の改善にも取り組んでいます。

これらのポイントはただで手に入るものではありません。Better Experienceの実現のために、UITメンバー全員が技術的な探究心を持って、日々ナレッジをアップデートしながら取り組んでいます。

求めるエンジニア像

まとめです。私たちUITでは、どういうエンジニアを求めてるかを簡単にお話しします。やはりユーザーを一番に考えて、サービス開発に取り組める方を求めています。

これはフロントエンドエンジニアの宿命でもありますが、やはりユーザーに一番近い立場を活かして、ふだんはものづくりしながら、競合サービスにもいっぱい触れて、良いものを取り入れることができる方が非常に向いてると思います。

技術の入れ替わりが激しいという話がありました。そういう事情があるので、やはり常にアンテナを張って、新しい技術の探求や、学習を苦と思わないことが大事なのではないかなと思います。

そして、新しい技術をインプットしたら、自分のものだけにせず、チーム内や組織内で広くシェアして、良いと思ったものはみんなに使ってもらうという活動も必要なのではないかなと思います。

ふだんからこういったことを実践してるよ、もしくは仕事として実践していきたいと思う学生さんがいれば、ぜひフロントエンド開発センターに来てください。

社外でのアクティビティも活発

最後になりますが、フロントエンド開発組織としてやっている活動を、簡単に紹介したいと思います。

これは社外の方々を迎え入れてのコミュニティ活動ですが、こういうミートアップを定期的に開催しています。今はコロナ禍でオンラインになってしまっているのですが、フロントエンド界隈の人たちが集まって、いろいろなナレッジの共有やライトニングトークをやっています。

ほかにも、フロントエンドの話だけをするPodcastがあります。そういう珍しいコンテンツを私たちは発信しています。URLを貼っているので、興味があればぜひ聞いてみてください。フロントエンド技術のトレンドが読めると思います。

最後に、これはUITだけじゃなくて、開発組織全体でも言えることですが、OSS活動を積極的に推進しています。UITのメンバーでもNuxt.js、Rust、Prettierといった、OSSのコントリビューターになっている人もいます。

あとここ（スライド）にあるように、BootstrapというOSSの日本版のサイトをLINEできちんと翻訳してホスティングをしています。

このように、積極的に外向けに発信していく活動を、組織内で非常に推奨していますので、そういう経験をしたいという方も、非常に楽しくできるのではないかなと思います。

組織の説明は以上です。ありがとうございました。