CodeIQ MAGAZINECodeIQ MAGAZINE

LINE清水大輔×リクルートテクノロジーズ古川陽介が語る、フロントエンドエンジニアに求める姿とは

2017.11.01 Category:インタビュー Tag: , , , ,

  • 75
  • このエントリーをはてなブックマークに追加

「LINE」アプリを筆頭に大躍進を続ける、LINE社のフロントエンドを担う清水大輔氏。リクルートテクノロジーズ社で若手を育成しながら、自身もNode.js日本ユーザグループ代表として、国内外に活躍の場を広げる古川陽介氏。
両社のフロントエンドエンジニアのチャレンジを支える開発環境や文化はどうなっているのか、さらにどのようなエンジニアを求めているのかを直撃してきました!
by dotstudio

広がるフロントエンドエンジニアの領域

──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学園祭の主催などのコミュニティ作りにも精力的に貢献。

【PR】あなたの本当の評価がわかる!年収確約サービス「moffers」

登録した詳細な経験・スキル情報に基づき、企業が「年収」を明示した形でスカウトを行う、ITエンジニアのための転職サービス「moffers」がオープンしました!

あなたの本当の評価がわかる「moffers」に登録してみませんか?

【moffers参加企業】
日産自動車、富士通、本田技術研究所、三菱電機、サイバーエージェント、ソニーネットワークコミュニケーションズ、リクルートテクノロジーズ、アマゾン ウェブ サービス ジャパン(AWS)、ほか

WebからIoT、自動運転、AIまで幅広い業種・職種がラインナップしています。この機会にぜひご登録ください!

  • 75
  • このエントリーをはてなブックマークに追加

■関連記事

LINE CTO朴イビン氏に聞く──LINEはクラウドAIプラットフォーム「Clova」で何をするの... LINEとNAVERの技術を集大成である「Clova」と「WAVE」 LINEは2017年9月28日、渋谷のヒカリエホールで「LINE DEVELOPER DAY 2017」を開催した。 コミュニケーションアプリ「LINE」をはじめ、LINEのさまざまなサービスにおける技術領域でのチャレンジや社...
授業中にLINEチャットで教え合う自由教室「Mitchy」に男泣き!_... 「LINE BOT AWARDS」学生部門グランプリ「Mitcthy」チームに突撃! ※本企画はLINE株式会社の提供でお送りします。 「Mitcthy」チームと語り足りない2時間談義 CodeIQ馬場です(略してババQとか、BBQ)。 今回、若狭氏と男泣き紹介するのは、「LIN...
ハンディキャップを持つ人をLINE Beaconとchatbotでサポートする“アンドハンド”に男泣... 「LINE BOT AWARDS」グランプリのアンドハンドチームに突撃取材! ※本企画はLINE株式会社の提供でお送りします。 「大日本印刷」「東京メトロ」「LINE」と連携して事業化へ CodeIQ馬場です(略してババQとか、BBQ)。 前回の「LINE BOT AWARDSの...
3人の技術イベント主催者に聞いてみた!エンジニアがコミュニティ活動をする理由... DevRel Meetup in Tokyoを運営する中津川氏 DevRel Meetup in Tokyoは、エヴァンジェリスト、DevRel活動を行っている方が集まり、知見を共有したり情報交換をしたりするコミュニティ。中津川氏が代表取締役を務める株式会社MOONGIFTのビジネスは「DevRe...
ロバート・タージャン氏を直撃取材―IntertrustはLINEのセキュリティ技術に何をもたらすか?... LINEとIntertrust社が共同でセキュリティ・サミットを開催 LINEは、Intertrust Technologies Corporation(本社:カリフォルニア州、以下:Intertrust)と共催で、アプリケーションセキュリティおよびデータプライバシー強化ソリューションの促進を目的...
IT業界の坂本竜馬こと若狭氏、アツく語る!─LINE BOT AWARDSの立役者たちに男泣き!... LINE BOT AWARDS GEEK賞&CodeIQ賞の「シャクレ」とは? CodeIQ賞のお祝いにインタビュー飲みしました CodeIQ馬場です(略してBBQ)。 LINE BOT AWARDSではCodeIQ賞として、若狭氏のイベントなどで映写されてるスライドやイベントでの...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ