「LINE」アプリを筆頭に大躍進を続ける、LINE社のフロントエンドを担う清水大輔氏。リクルートテクノロジーズ社で若手を育成しながら、自身もNode.js日本ユーザグループ代表として、国内外に活躍の場を広げる古川陽介氏。
両社のフロントエンドエンジニアのチャレンジを支える開発環境や文化はどうなっているのか、さらにどのようなエンジニアを求めているのかを直撃してきました！
目次
広がるフロントエンドエンジニアの領域
──LINE社、リクルートテクノロジーズ社の2社では、「フロントエンドエンジニア」はそれぞれどんな仕事を担っているんでしょうか。
清水（LINE）：サービスのランディングページやCMSなど通常のブラウザ向けのページもちろん作るんですけど、割合として多いのは LINEアプリのウェブビュー向けの開発ですね。LINEのサービスって、アプリの中でウェブビューを使ってサービスを展開するものが多いんですよ。
ネイティブアプリケーションの上で動くので、ネイティブライクな動きをしないとユーザに違和感を与えてしまう。なので、JavaScriptのシングルページアプリケーションで作ったり、パフォーマンスチューニングをしたりということが多いです。
ですが、どうしても標準のウェブビューの機能だけでは良いUXを提供できない場面もあったりして、そういった場合、LINEではiOS/Androidのチームと協力してウェブビューにネイティブAPIを実装していたりします。そのためのJavaScript SDKの開発も私たちのチームで行なっています。
▲LINE株式会社 UIT室 副室長 清水 大輔氏
古川（リクルートテクノロジーズ）：弊社でも、ウェブアプリケーションの中でネイティブみたいにぬるぬる動くシングルページアプリケーションを作ることが多いですね。
それにプラスして、サーバサイドもフロントエンドエンジニアが担当します。サーバを立てるところ、ブラウザとサーバの間にあるNginxのようなリバースプロキシ部分のチューニング、セッション管理など、BFF（Backends For Frontends）も含めてフロントエンドエンジニアの持ちものなんですよ。
エンジニアはサーバサイド・クライアントサイドという分け方ではなくて、フロントエンド・バックエンドという風に分かれてます。バックエンドエンジニアがインフラやデータを扱う部分を担当して、フロントエンドエンジニアがそのAPIを叩くような構成になっています。
▲株式会社リクルートテクノロジーズ ITM統括部テクノロジープラットフォーム部アプリケーションソリューショングループ グループマネジャー兼シニアソフトウェアエンジニア 古川 陽介氏
清水：うちもBFFもフロントエンドに含める方向に進んできてますね。まだ全てのプロジェクトじゃないんですけど、Node.jsでサーバを立ててそれも含めてフロントエンドエンジニアが見ているチームもあります。いろんな最適化を考えたときに、そこを一緒にやらないとコミュニケーションコストがかかり過ぎたり、結果としてうまくいかないこともある。
古川：サーバサイド、クライアントサイドって分かれちゃってると大変なんですよね。クライアントサイド側だけでいろいろ実装しようとすると、何個もAPI叩かないと使えないとか、初期表示を速くしたいけどAPIをキャッシュする層があるとか、結構面倒くさくなってしまう。
なのでNode.jsやプロトコルに関する知識なんかも必要になってきますね。ただ最初からそういうスキルセットを全部持った人はなかなかいないんですけど……。
──フロントエンドエンジニアのお仕事はブラウザだけではないんですね。フロントエンドならではの難しさなどはあるんでしょうか。
古川：シングルページアプリケーションでは、ブラウザがどこまで担保するかっていう話があります。戻る・進むをした時にスクロール位置が前の表示位置にちゃんと戻るようにしたり、フォームのエンターキーを押した時にきちんと送信されるようにしたり、ブラウザのデフォルトの挙動を壊さないようにバランスを取りながら作るっていうのが結構難しいですね。
⇒参考：リクルートテクノロジーズのフロントエンド開発 2016
清水：最近リリースしたサービスでウェブビュー上で React.jsを使って実装したLINEマンガがありますが、ここではヒストリーの動作を壊さないような工夫をしていますね。
⇒参考：LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました
また、AndoridのLINEではタブの切り替えがスワイプで行えますが、一部がウェブビューで実装されているためスワイプの操作がコンフリクトしてしまう問題がありました。なので、JavaScriptからネイティブのスワイプ操作を制御できるAPIを作ったりと、こういったところで結構苦労してます。
古川：うちだとブラウザはブラウザで作ることが多いので、その部分は違っていて面白いですね。
ホットペッパービューティやリクナビのような店舗検索型のサイトは、ユーザの離脱を防ぐために初期ページの表示が速くないといけないんですけど、それ以降のページの体験も速くないといけない。そういう一挙両得なスタイルを目指した背景があって、今のようなReact+Reduxとか、サーバサイドレンダリングとかっていうアーキテクチャになってきました。
⇒参考：React + Reduxで作ったIsomorphic(Universal) JSなサービス開発
清水：うちはネイティブのクライアントとのやりとりが多いですね。クライアントの力を借りて表示したり、一緒におかしいところを直したり。
古川：作るサービスに依存してアーキテクチャが変わってくるのが面白いですね。
開発のための土台もフロントエンドの持ち物
──フロントエンドのためのバックエンド、とありましたが具体的にはどんなシステムやツールを作っているんでしょうか。
清水：先日のLINE DEVELOPER DAYでも発表したんですけど、フロントエンドチームがアナリティクスのシステムを作ったんですよ。
▲9月28日、渋谷ヒカリエで開催されたLINE DEVELOPER DAY 2017の様子。写真はCTO朴イビン氏によるオープニングセッション。
⇒参考：なぜLINEではウェブトラッキングシステムがフロントエンド開発チームによって構築されたのか
清水：ウェブビューってお客さん側で起きたJavaScriptのエラーログはなかなかわからなくて、デバッグしづらいじゃないですか。だから自前でエラーロギングする仕組みを作りたいねってフロントエンドのエンジニアが言い始めて、タスクフォースのような形でメンバーを集めて構築しました。この仕組を発展させてアナリティクスとして社内の多くのウェブサービスで使っています。
古川：エラーロギングをそこまでやれてるのは羨ましいですね。ユーザの行動に関するログのアナリティクスは結構ごついのがあるんですけど、AndroidとかiOSのクラッシュレポートと同じような形でエラーロギングもしたいなと思ってます。
清水：うちのフロントエンドエンジニアはLINE以前の会社ではフルスタックとか専門がバックエンドだった人が多いですね、なのでフロントエンドエンジニアなのですがバックエンドの設計などにも一緒に関わって進めることもあります。
──システムやツールの方はどんな言語で開発しているんでしょうか。
清水：普段はJavaScriptを書いてるので、ツールを作るときもNode.jsでやろうってなることが多いですね。デプロイツールとか、CLIツールとか。そういえばこの間は、LINE BOTのSDKがNode.jsで出ました。
古川：そう、SDKの最初のラインナップにNode.jsなかったんですよね（笑）。
清水：いや、オフィシャルではなかったですけどメンバーがプライベートで作ってるやつはもともとあったんですよ。なんかすみません（笑）。
サポート万全の共通基盤と、自由度たっぷりの裁量性
──2社ともさまざまなサービスを開発していますけど、それぞれのサービスを開発するときの技術選定はどういうフローなんでしょうか。
古川：最近はReact+Reduxとか同じ構成で作るサービスが増えてきていて、ウェブアプリケーション開発のボイラープレートの集合体を作ってあります。このセットを使って開発してくれたら問題が生じた時にサポートしますよ、という形で。
清水：うちにもボイラープレートみたいなものがあるんですけど、そんなにかちっとしてないですね。担当するエンジニアの裁量に任せて割と自由に決めてもらってます。ちゃんとメンテナンスされていなかったり、開発がアクティブにされていないようなフレームワークだとさすがに止めたりしますが（笑）。
清水：うちはフロントエンドの組織が東京の他にも福岡、韓国、台湾、最近ではベトナム、タイもできてこれから京都も稼働し始めますが、全部同じ基盤でやれっていっても難しいことがあるんですよね。月に1回技術共有をして、良い事例があればお互い参考にしたりしています。
古川：そうか、拠点が多くてすごいですね。
清水：入社時はみんな共通の研修をやるんですけどね。サーバサイドや法務などから説明を受け、CTOから一通りカルチャーの共有を受けてから現場に入ります。
古川：たしかにLINEだと共通言語とかありますもんね。うちもセキュリティ、法務のレクチャーなんかはあるんですけど、エンジニア共通でっていうのもできるといいなあ。
距離を超えたナレッジ共有、会社を超えたアウトプット文化
──会社全体としてのエンジニアのナレッジ共有はどうやっているんでしょうか。
清水：週に1回、東京と福岡のフロントエンドエンジニアの勉強会をテレビ会議で開催してます。フロントエンド界隈の記事をシェアしたり、サーバサイドとのAPI設計のやりとりについて話したり、JavaScript以外の言語やコンパイラの実装についてなど、フロントエンドとは直接関係ないものもあったり、わりと雑多です。
古川：うちも週に1回のフロントエンドエンジニアのミーティングに加えて、技術系の社内イベントがあります。技術ナレッジはその発表資料として残してもらっています。
清水：いいですね。社内イベントだと、グローバルワークショップっていうかなり大規模なのがあります。前回は韓国開催で、エンジニアだけで日本から400人くらい参加しました。
▲韓国で開催されたグローバルワークショップの様子。社内イベントとは思えない賑わい。
古川：うちにもエンジンっていうフォーラムがあるんですけど、社内の審査を勝ち上がった人が話す場で、社長賞を決めたりするので結構ハードルが高いんですよ。「そのテーマってどこに新規性があるの？」みたいな（笑）。もうちょっとカジュアルに話せる場を作りたいなあと思ってます。
清水：なるほど、社長賞ですか。うちは個人を特定で表彰する制度って実はないんですよね。表彰より、みんなで楽しむっていう文化の方が強いんです。
古川：フロントエンドエンジニアってちゃんと認知されたのが最近なので、社内でも社外でも活躍できる場を増やしたいなと思ってます。まだまだ多くないので難しいなと思ってますが、ぜひNode学園に来て発表してもらえたら（笑）。
内容は自由の社内制度！メンバーの交流を活発化する秘密とは
──会社の制度には結構それぞれのカラーが出そうですね。他に面白い制度や取り組みはありますか？
古川：社内の部活動として、OSS部っていうのを立ち上げたんですよ。OSSにコミットするランチとかを開催してます。部活にも予算がおりるので、最近はPepperを買いました。
清水：OSSが部活なんですか（笑）。すごいなあ。うちはマラソン部とかゴルフ部とか、アクティビティ系の部活は結構盛んです。
あとは年に1、2回、ワークショップの予算がつきます。何をするべきっていうのは一切決まってない。温泉行ってハッカソンしてもいいし、みんなで遊んでもいい。UIT室では、直近は富士山の麓に行ってBBQしてきました。あと川下りなんかもしましたね。
フロントエンドエンジニアはグローバル全体で70人くらいいるんですが、普段はお互い別のプロジェクトをやっていてなかなか話す機会がなくてもこういったイベントがあると自然と話す機会ができたりして、良い制度だなと思ってます。でも前に富士山に登って山頂で障害対応してるチームあったなあ（笑）。
古川：そういうときに限って障害が起きること、ありますよね（笑）。ベトナムのオフショア視察にいったときに大規模な障害が起きて、かなりやきもきしたことがありました。
▲障害対応の経験談で盛り上がる古川氏と清水氏。
「好奇心の強いエンジニア」を求めて
──使っている技術や文化にはちょっと違いが見えてきましたが、特にこういうエンジニアが欲しい、というような像はありますか。
清水：JavaScriptだとかフロントエンドの最新動向に関する知識があるっていうのは副次的で、実はそんなに重要視してないんですよね。フロントエンド技術に興味があって、ロジカルに考えることができる方が重要。
古川：そうですね。経験とかスキルはあるに越したことはないけど、行動力の方が重要視してます。「学びたいんです」っていうんじゃなくて「学びたいと思った結果こういうの作ってみました」とか自発的に勉強して作って、面接のときに見せてくれたりするとかなり評価が高いです。
清水：好奇心が強いのがいいですよね。学ぶこととアウトプットすることを楽しんでできる人は伸びしろがある。その分、楽しんで開発できる環境を作らないといけないのは我々の仕事ですけど。
古川：大変なテーマですよね。フロントエンドは賞味期限が短いので、すぐ新しい技術が出てくる。「新しい技術使ってみたい」と言われると、やってみなよって気持ちと、ちょっと攻めすぎじゃないか？って気持ちが半々くらい同居してて（笑）。
清水：そういうときにいかに良いアドバイスできるかが大事ですよね。
──対談、ありがとうございました。最後に今日の感想を。
古川：作っているサービスによって、アーキテクチャや起こる障害なんかに違いが出てくるのが面白かったです。もっと社を超えて交流していきたいですね。
清水：そうですね。割と似た環境や文化を持っていたり、共感できる部分が多くあり、とても面白かったです。OSS部を見習って、LINEももっと積極的に外に出ていきたいなと思いました。
【対談者プロフィール】
▲清水 大輔（しみず・だいすけ）氏
LINE株式会社 UIT室 副室長。COBOLを使ったメインフレーム上での開発に始まり、Perl、Java、Object Pascal など、主にサーバーサイドの開発に6年ほど関わったのち、フロントエンドエンジニアとしてネイバージャパンに入社。現在はLINEのフロントエンドエンジニアチームのマネージメントやJavaScript SDKの開発などに携わる。
▲古川 陽介（ふるかわ・ようすけ）氏
株式会社リクルートテクノロジーズ ITM統括部テクノロジープラットフォーム部アプリケーションソリューショングループ グループマネジャー兼シニアソフトウェアエンジニア。複合機メーカーにてサーバサイドエンジニアとして3年活動した後、フロントエンドのGUIを作りたくなり、独学でJavaScript/Node.jsを学ぶ。ソーシャルゲームサービスの開発に関わった後、リクルートテクノロジーズにジョイン。現在はリクルートテクノロジーズの次のウェブアプリケーションのあるべき姿を考えて組織作りとフレームワーク作りに従事しつつ、海外での発表やNode学園祭の主催などのコミュニティ作りにも精力的に貢献。
取材・執筆：dotstudio, inc. ちゃんとく
大学までは文系で法学を学んでいたが「モノを作れる人」に憧れて知識ゼロからWebエンジニアの道へ。転職し現在はIoT中心のエンジニア・テクニカルライターとして活動。Node.jsユーザグループ内の女性コミュニティ「Node Girls」を主催。Twitter: @tokutoku393 / dotstudio, inc.
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
