時空テクノロジーズ・ディップ・パーソルキャリア・ミイダス、4社の事例から「フロントエンド技術の活用」について学ぶ、オンライン勉強会

フロントエンドの開発をリードする方々に技術選定からその活用法、具体的な課題とその取り組みまで、様々なテーマを元に対談形式で実施しました。その内容の一部を本記事にて紹介させていただきます。

- 今使っている技術について、技術選定と技術戦略についてポイントがあれば教えてください

※ご登壇者の皆様の敬称につきましては省略させていただきます

時空テクノロジーズ 林：弊社のシステム、webサービス ※では、フロントエンドのメインはNext.jsを使っています。プラスwindowsアプリでは、エレクトロンですね。中はNext.jsではなく純粋なReactをベースで作っています。いずれもTypeScriptがベースの技術を使っているので、ほぼReactで揃えているという感じになります。

※...時空テクノロジーズ ログミーツ データの流れhttps://youtu.be/yuN4qAaIJlo?t=581

ミイダス 大谷：この選択経緯について、どういった親和性、メリットがあって選んだのでしょうか。

時空テクノロジーズ 林：当時は Angularのコミュニティに所属・参加していました。今でも運営チームにいますが、登壇などをしたりと結構Anglarを使っていました。その後、このサービスを作るにあたって、ベースとして音の扱いやリアルタイム性をかなり重視するようなコンテンツ、例えば今回の議事録のように認識された音声データをすぐに編集できるというのが一つテーマとしてありました。そういった背景もあり、選定した当時のAngularのパフォーマンスよりも、Reactとのほうが向いているだろういう判断しました。
あとは、基本的に弊社はリモートで運営しているので、ほぼ全員がバラバラの所で開発をしています。そういう意味でも、小さく分離ができて且つ、フリーランスの方にも機能ごとに開発をお願いしやすかった点、そして、当時の人気具合ですね。採用などを考える上で、Reactを使える人が多かったと言うのが一番の選定理由になったと思います。

ミイダス 大谷：すごくよく分かりました。その明確なメリットと、機能的なメリット、そして作業を分担できるというメリットがあって選ばれたのですね。

時空テクノロジーズ 林：そうですね。Angularをあえて選ばずにReactにしました。

ミイダス 大谷：私も林さんと言えば、Angularの人という認識があったので驚きました（笑）

時空テクノロジーズ 林：実際に作りたいサービスの要件を聞いたり、チームメンバーの構成などに合わせてフレームワークは選ぶべきだと、Angularのチームに居た時から言っていました。今回の技術選定では、それを実践した形になります。

ミイダス 大谷：ありがとうございます。続きまして、大場さんにお伺いします。技術選定や技術戦略についてのポイントを教えてください。

ディップ 大場：弊社の使っている技術は、先ほど会社紹介 ※ の時にお話しした通りです。スケルトンのソースコードは、フロントエンド開発者である私たちだけのものではなく、サーバー、バックエンドの開発チームも使ったりします。新しい技術を入れる場合には、バックエンド開発チームとも相談して決めることになります。

また、今林さんにお話いただいたように、開発フローやメンバー構成の観点から、組織やチームに導入可能な技術であるという前提はあります。しかし、他の観点から言うと、サービスの目的や、想定している利用者の使い方などに合わせて選定することも重要だと思っています。
技術選定をする時、世の中にどのような技術や特徴があるのかは知らないと選べません。鮮度の高い情報を選べる、そして集めていくというのは必要かなと思います。しかし、色々調べた上で、複数の選択肢があり、最終的な成果物として差がないという場合もあり得ると思います。そのような場合は、メンバーのスキルや、運用開始後に継続的に安心して使えるかどうかと言う観点も考えて技術選定をしていきます。

※...ディップの会社紹介/開発フロー  https://youtu.be/yuN4qAaIJlo?t=927

ミイダス 大谷：ありがとうございます。技術選定をする上でとても重要な視点だなと思いました。レガシーブラウザからアクセスされることも多いとお聞きしましたが、具体的にどこまでをサポートしていますか？

ディップ 大場：そうですね。実際のアクセスデータを見て、どれくらいのブラウザシェアになっているのかを調査します。例えばレガシーブラウザで言うと、Androidの4系などを使っている人からの応募もあります。そのような人たちの比率を調査し、もし完全に切るとしたらどれくらいのビジネスインパクトがあるのか、そこも技術選定の基準の一つにはなっています。

ミイダス 大谷：昔からよく言われていますが、法人のお客さんでIEの古いバージョンを使っているケースもあると思います。このIE対応で、取り組まれていることがあれば教えてください。

ディップ 大場：私たちのチームは管理画面のスケルトンを作って いますが、管理画面側とユーザーが実際に使う画面側では、それぞれ使われているブラウザだったり環境が違います。なので双方にに合わせた技術選定というのをしています。IE対応が必要なのはやはり管理画面が多いですが、しっかりサポートするために、テストの段階で動作確認をしています。ポリフィールなどを使ったりなど、そのような取り組みもしています。

ミイダス 大谷：お客さんの特性に合わせた上で技術選定をしているのですね。
ディップ 大場：はい、そこがすごく大変なところでもあったりします。

ミイダス 大谷：ありがとうございます。では、次に江口さんに技術選定と技術戦略のポイントについてお聞きします。先ほど「24サービス同時開発を目指す」※ と言われていましたが、サービス毎で技術的に色々なことに取り組まれていて、一見すると相反するような部分や、統一した方が量産できるような部分など様々だと思います。この辺りも含めて説明いただけると嬉しいです。

※...パーソルキャリア サービス開発部の開発体制  https://youtu.be/yuN4qAaIJlo?t=1519 

パーソルキャリア 江口：新しいサービスを大量に作るという組織が出来たのが、ちょうど私がパーソルキャリアに入社する少し前でして、その時は実際に、ReactでやるかVueでやるかの議論があったと聞いています。3年前というと、ちょうど日本でVueがすごい人気になってきたタイミングでした。採用面で有利になりそうだという観点でVueを選んだ経緯がある、と聞いています。
一方、現在ではVueでは技術負債が溜まるという議論を耳にするようになりました。実際、方針転換し、Reactを使い始めたプロジェクトも出てきました。このような経緯で、現在はVueとReactどちらも利用しています。Reactを扱えるメンバーが組織内に増えてきたことで、コストを掛けずにReactを使い始めることができたのも理由の１つです。

ミイダス 大谷：Vueは技術的負債が溜まりがちだ、と言う話について、具体的にどのような問題が起きたのか、実例があれば是非教えてください。

パーソルキャリア 江口：そうですね。先ほど林さんも触れられていましたが、外部に開発を依頼する時や外注の方に開発を対応してもらう時など、TypeScriptで書きたいというニーズが出てくることが多いです。VueだとStateの部分などで、anyになってしまい、実装とレビューのコストが高くなってしまうことがありました。Reactでは、品質の低いコードの混入がかなり抑えられている印象があります。

ミイダス 大谷：ありがとうございます。今後、24サービスを作っていくにあたり、フロントエンドとして工夫しているポイントや、共通化しているなど何か事例があれば是非教えてください。

パーソルキャリア 江口：これはまだ始めたばかりですが、管理画面を利用する全てのプロジェクトで共通のアトミックデザインで作っておくプロジェクトを有志で進めています。また、プロジェクトの知識がチーム内でサイロ化していることが多いので、先ほどのスライドで紹介したミニセッションや、勉強会などで知識の並列化を進めています。

ミイダス 大谷：ありがとうございます。ユーザーとすごく密に取り組まれている部分や、エンジニアもどんどん事業に寄り添っているというところは、すごく興味があったのでまた後で教えてください。
それでは最後に 眞下さんにお伺いします。これまで何度か技術変更を意思決定し、進めて来られたと思いますが、そのフェーズ毎の詳細や技術選定の意思決定のタイミング、Nextを選んだ背景などについて教えてください。

ミイダス 眞下：まず、技術選定のタイミングは、組織の状況によって変わってくると思います。基本的にサービスを作っている場合は、何かしらの課題があり、その課題を技術で解決しようとする時が、技術選定するタイミングの1つではないかな思っています。

ミイダスでは、さらに今置かれている事業や開発組織のステージ、そして今後進みたい方向性も技術選定をする上で大きな要因として含まれていたと思います。ReactやReduxを選定した背景もそのような側面が含まれています。正直、ビジネスからの要求や組織拡大がなければ、当初のモノリスの作りでもある程度運用を続けられたと思っています。しかし、その後既存の運用も対応しつつ、並列でいくつもの機能を改修/追加開発したい要望がビジネスサイから出てきました。その要望に応えるためには、開発組織を大きくしてく必要があり、そしてモノリスのやり方も限界という状況になりました。
そして、ReactやReduxを使ってSPAの構成にし、フロントエンドとバックエンドを疎結合のような状態にしておけば、組織拡大してエンジニアが増えても開発しやすい状態が作れると思いました。これらの観点とタイミングから技術選定をしました。

Nextを採用した背景については、先ほどのスライドで農耕民族の例え※ を出してお話しした通り、当時は安定した食物がある中でエンジニアの数がどんどん増えていきました。エンジニアが増えればある程度、開発速度は上りますが、必ずしも比例するわけではありません。この構図も、割と早く限界が来ると思っていました。管理コストの方がかなり増えてしまい、開発速度が上がらなくなると予測したからです。

※...ミイダス 技術スタックの変遷 https://youtu.be/yuN4qAaIJlo?t=2284 

生産性や効率の側面もきちんとと考えた上で、組織体制も一緒に考える必要があり、アーキテクチャーやコードベースもその組織の変更に伴うようにしなくてはいけません。これら様々な背景があって、Nextにしました。先ほどFuelPHPを使っているとお話ししましたが、SPAの構成になった今も実はずっとFuelを使っていました。
ミイダスの場合は、単純にHTTPリクエストに応えて、SPAのクライアントのレンダリングの起点となるノードを返すという役割だけでした。ずっと使い続けていたと言う意味では、本当の意味でバックエンドとフロントエンドが疎結合な状態ではありませんでした。そこで、Nextを入れることでバックエンドとフロントエンドの領域を明確に分ける意図もありました。
また、システム分割や機能分割など、今後発生しうる分割のしやすさを配慮して検討しました。

ミイダス 大谷：Next を導入することにより、FuelPHPの部分を置き換える/減らしていくというのが目的になるんですね。

ミイダス 眞下：そうですね。その目的はかなり大きいですね。当初、 FuelPHP はバックエンド領域が担当していましてが、SPA 化が進むにつれてフロントエンド領域の担当者はテンプレート部分だけ触る状態になっていました。結構どちらが対応するのか曖昧な感じだったので、強制的にフロントエンドの担当領域として明確にする意図はありましたね。

- 開発組織全体の人数とフロントエンドエンジニアの人数の割合について

ミイダス 大谷：では次に、組織全体の人数とフロントエンドエンジニアの人数の割合について伺いたいと思います。

時空テクノロジーズ 林：ログミーツの開発においての人数ですが、エンジニアだけだと1、2、3、4...ですね。システムを4人ですべて作っています。そして、フロントエンドの割合でいうと1です。
エレクトロン から web サービスデザイン設計、画面設計は僕1人ですべてやっています。あとはテストもですね。テストチームも一応別でありますが、概ねの実装等は全て僕1人でやってます。

ミイダス 大谷：ありがとうございます。全部1人でやられてるんですね。

時空テクノロジーズ 林：はい（笑）

ミイダス 大谷：すごい...

時空テクノロジーズ 林：もちろん人数や組織体制については、今に至った経緯はそれぞれあります。

ミイダス 大谷：続きまして大場さんに、開発組織の人数規模とフロントエンドエンジニアの人数の割合をお伺いしたいと思います。

ディップ 大場：開発組織全体で言うと社員数で約60人くらいです。ただ現状ではベンダーさんや業務委託の方に依存している部分も大きく、100人くらいの規模になります。今後内製化を進めていきたいので、社員を増やす動きも出ています。
フロントエンドエンジニアの人数は、社員が6人くらいです。あとは業務委託のエンジニアが社員と同じくらいの人数いるという状態です。

ミイダス 大谷：人数設計はどのようにしていますか？

ディップ 大場：業務量に合わせて設計しています。定常的に社員で補っていきつつ、不足している部分については業務の量に応じて、業務委託の方を増やしたり減らしたり調整かけているという感じです。

ミイダス 大谷：では次に、江口さんに組織の人数やフロントエンジニアの人数割合についてお伺いします。江口さんいかがでしょうか？

パーソルキャリア 江口：私の所属しているサービス開発部のメンバーは現在30人弱が所属していて、そのほとんどがフロントエンドエンジニアです。現状進行しているプロジェクトが5、6個あり、各プロジェクトは大体4、5人体制で開発しています。
フロントエンドへの理解が高いエンジニアが多いのですが、だからといってバックエンドを全く書かないということはないです。

ミイダス 大谷：採用時点でフロントエンドとバックエンドを分けて募集をするのではなく、どちらもできる方を募集しているのでしょうか？

パーソルキャリア 江口：一応、分けています。フロントエンドが得意なのか、バックエンドが得意なのかを応募者に明確にしてもらう意図です。プロジェクトの状態や組織のバランスによってニーズも変わってきます。
「今はフロントエンドは大丈夫だよね。バックエンド強い人を採りたいよね。」といった判断が行われることは正直あります。とはいえフロントエンドを全く書かないということはないので、バックエンドエンジニアとして採用してもフロントエンドも触ってもらいます。

ミイダス 大谷：臨機応変に対応できるような組織づくりをされているのですね。

パーソルキャリア 江口：メンバーの中に「自分はフロントエンド/バックエンドどちらかしかやりたくないです」と言う人はほとんどいないので、この方法で対応できています。一方、今後実際にサービスがグロースしていく中で、フロントエンドのスペシャリストが求められる可能性はあるかなとは考えています。

ミイダス 大谷：では最後に眞下さんに組織の人数やフロントエンジニアの人数割合についてお伺いします。

ミイダス 眞下：ミイダスではインフラ、アプリ、バックエンド、デザイナーを含め開発組織でいうと70名前後います。その中の20名くらいがフロントエンド開発者ですね。バックエンド開発者も恐らく同じくらいなので、フロントエンドとバックエンドが同じくらいの比率、インフラとアプリとデザイナーは割と少なめの人数体制になりますね。

ミイダス 大谷：ありがとうございます。ミイダスだとフロントエンドとバックエンドは完全に業務を分けていると思います。そこは組織設計をする時や役割分担を考えるときに考慮したポイントとかありました？

ミイダス 眞下：やはりサービス開発をする上で、優秀な方がいたらどんどん採用していきたいですね。その中でもフルスタックを希望する方は一定数います。サービスの開発体制としては、フロントエンドとバックエンドが業務として分かれているので、フルスタックを希望する人にとって働きやすい環境なのかどうかは、常々考えています。ただ、ミイダスは基本的に、フルスタックでやりたいのであれば、自らポジションを作って、道を切り開いていける可能性がある自由度の高い組織です。業務として今は分かれていますが、将来、組織体制としてフルスタックの人が活躍する場もあっていいと思っていますし、ミイダスにそういう優秀な方がいっぱい居るといいなと思っています。

ミイダス 大谷：今は組織のフェーズにおいてフロントエンドとバックエンドを分けていますが、フルスタックの方が活躍できるような可能性もある組織にしていきたいという感じですね。

ミイダス 眞下：そうですね、そもそもフロントエンドとバックエンドを何故分けているかという話に繋がると思います。今は、フロントエンドの領域に求められるものが多くなっているという話をよく聞きますよね。フロントエンド開発をやりたい人も、もちろんいると思いますが、結局はアプリケーション開発がやりたいということだと思っています。アプリケーション開発という意味では、バックエンドやインフラの知識なども必要になってきますよね。
でも、フロントエンドしか出来ない人も当然居てもいいし、活躍する場もあると思います。今の時代の流れを考えてもフルスタックのように「全般的にできます」という人が居ても然るべきかなというふうには考えています。

ミイダス 大谷：確かにそうですよね。5年前、10年前のフロントエンドエンジニアの定義と今のフロントエンジニアの求められる事、必要な能力なども変わってきていますよね。

ミイダス 眞下：そうですね、そろそろフロントエンドエンジニアという言い方も改めた方が良いんじゃないかな、という気持ちもありますね（笑）

ミイダス 大谷：ありがとうございます。色々な技術を見ていらっしゃる林さんに、フロントエンドエンジニアの技術やフロントエンドエンジニアの定義について考えを教えていただけますか？

時空テクノロジーズ 林：フロントエンドエンジニアの呼び方を改めた方が良いとか、定義が変わってきているという話は、往々にしてあるかなと思っています。フロントエンドが比重が大きくなっているというのは、単純にフロントエンドでやるべき仕事が増えてきているからというのが一つありますね。
それはSPAにするというのもそうですし、画面の重要度が昔より遥かに上がってきています。画面が使いづらいことに対してのユーザーの目線がすごくシビアになってきているのです。

高品質なものに皆さんに慣れてきているので、使いやすいのが当たり前、説明書がないのはや当たり前、という状態になっています。このような中でwebサービスを提供していくと、かけるべき熱量というのが、どうしてもフロント比重になってきているのが自然の流れかなと思ってます。
僕自身も「フロントエンドエンジニア」と今はプロフィールに書いてなくて、「UXエンジニア」と勝手に名乗っています。それは、やはり実装だけではなく、設計部分、ユーザーエクスペリエンスを作っていくエンジニアとしてやっていきたいという、その気持ちを肩書きに乗せているというのがあります。そういう意味では、フロントエンジニアとしてだけではなくて、どちらかというとデザインや設計、マーケティングなどもっと幅広く、そして顧客の方にさらに近づいていく、そういったポジションを考えて居ます。それはもはや、エンジニアと呼ぶのか分からないですけど、そういった流れもきていますし、キャリアもあると思っています。

ミイダス 大谷：ありがとうございます。

続きは、こちらのアーカイブ動画をぜひご覧ください。

各社の事例から学ぶフロントエンド技術の活用法
イベントページ：https://miidas-tech.connpass.com/event/219640/ 

登壇者紹介

時空テクノロジーズ
時空を超えた ライブコミュニケーションを創出する

私たち時空テクノロジーズは、リアルタイム3D技術、オンライン通信技術、VR/AR、アバター、AIなどを駆使して、コミュニケーションにまつわるソリューションを提供し、人々の仕事に活気を、生活に潤いを提供します
公式サイト：https://www.ziku-tech.com/

林　優一

ソーシャルゲーム・Web開発会社にてフロントエンドエンジニア、本部長、CTOを歴任 B2Bサービスにおいてプロダクトマネージャーとして自社プロダクトの企画から開発/テストまでを統括するなどした後、フリーランスに
2018年8月よりvmeetsの開発に携わった後、新会社設立に合わせて2019年9月より時空テクノロジーズに参画し現職 音声自動文字起こしアプリケーションのWeb及びWindows版のフロントエンド開発・デザイン業務を担当

ディップ 株式会社
「バイトル」「はたらこねっと」などの求人情報サービスをはじめ、人工知能専門メディア「AINOW」、RPA導入サポートの「コボットPlatform」といった幅広い分野のサービスを自社で開発・運営する、LaborForceSolutionCompany（労働力の総合商社）です。
公式サイト：https://www.dip-net.co.jp/

大場 崇至

専門学校の卒業後、少人数のSIerに入社し、受託でのシステム開発を担当。
求人系Webサイトや業務基幹システムのフロントエンド・DB設計・サーバーサイド開発等に従事。
その後、2014年5月にディップ株式会社に入社。
フロントエンド開発チームにてバイトル・バイトルPRO・はたらこねっとの画面開発を指揮している。

パーソルキャリア株式会社
パーソルキャリア株式会社は、－人々に「はたらく」を自分のものにする力を－をミッションとし、転職サービス「doda」やハイクラス人材のキャリア戦略プラットフォーム「iX」をはじめとした人材紹介、求人広告、新卒採用支援等のサービスを提供しています。グループの総力をあげて、これまで以上に個人の「はたらく」にフォーカスした社会価値の創出に努め、社会課題に正面から向き合い、べての「はたらく」が笑顔につながる社会の実現を目指します。
公式サイト：https://www.persol-career.co.jp/

江口 拓弥

2018年に東京から仙台に移住。Ruby on RailsとVue.jsを使用した受託開発業務を経験した後、パーソルキャリアにジョイン。Nuxt.jsとFirebaseを利用し、転職後アフターサービス「CAREER POCKET」を開発。その後は複数の新規サービスの開発に携わる。

ミイダス株式会社
転職アプリ「ミイダス 」の開発・運営を行っています。 「ミイダス」は職務経歴や経験・スキル情報から自分の市場価値を診断すると、企業から直接オファーが届く転職サービスです。
公式サイト：https://miidas.co.jp/

眞下 純平

2016年にフロントエンドエンジニアとしてミイダスにジョイン。現在はフロントエンドの実装方針や技術選定のほか、チーム運営やプロジェクト管理などを行っています。

ミイダス Tech について

ミイダスでは、様々な技術イベントを開催しています。connpassやYouTubeチャンネルでミイダスグループのメンバーになった方には、最新の開催情報やアーカイブの公開情報が届きますのでぜひご登録をお願いいたします。

イベントページ：https://miidas-tech.connpass.com/

Twitter：https://twitter.com/miidas_tech