Reach One|株式会社ビズリーチ(BizReach)【企業公式ブログ】

株式会社ビズリーチの公式ブログ「Reach One(リーチワン)」です。 Reach Oneでは、ビズリーチのメンバーやプロジェクトの紹介、社内外のイベントレポートなどを通じて、「ビズリーチのイマとこれから」をお伝えします。

REACH ONE

ビズリーチのイマとこれから

課題解決のための技術選定~4つの事業でフロントエンド開発に新技術を導入した話~

f:id:bizreach:20170719190244j:plain

こんにちは。エンジニア・デザイナーの新卒採用を担当しています、荒井です。
暑い日が続いていますが、皆様いかがお過ごしでしょうか。

先日、ビールが美味しいこの季節にピッタリのイベント「Frontend Beer Bash」がビズリーチのオフィスにて開催されました。
名前の通りフロントエンドの開発に特化したイベントで、「Angular vs React vs Vue.js」がサブテーマとして掲げられており、ビズリーチで実際に開発に携わっているメンバーによるLTやトークセッションが行われました。 www.bizreach.co.jp

ビズリーチでは、プログラミング言語やシステムのアーキテクチャにおいて様々な技術を採用しています。
そのほとんどは事業フェーズや事業の目的に合わせて、現場で開発に携わるメンバーが自ら技術選定を行います。また、お客様やユーザーの皆様に対してより大きな価値を提供できると判断した場合には、新しい技術も積極的に取り入れていきます。

そんなビズリーチの「現場の開発者が大きな裁量を持ってプロダクト開発を進めていくカルチャー」をより多くの方に知っていただきたいと思い、今回は「Frontend Beer Bash」に登壇した4名に、それぞれのプロジェクトにおける技術選定の背景や実際に導入してみて感じたことを聞いてきました。
ここからはビズリーチcareertrekHRMOS、社内向け新規サービスの4つの事例をご紹介します。

1. 即戦力人材と企業をつなぐ転職サイト「ビズリーチ」の場合

f:id:bizreach:20160823213758j:plain

ビズリーチ フロントエンドエンジニア

小枝 優駿 / Masatoshi Koeda


2014年にフロントエンドエンジニアとして入社。幼少よりマークアップに触れ、Qiitaでは一時トップ記事として「HTMLを15年書いてる僕が語ってみる」が掲載され、はてなブックマークの人気エントリにも。前職では大手広告代理店の業務を主とし、数千ページの実装を行ってきた経験を活かしてビズリーチのフロントエンドエンジニアリングを牽引。 趣味はテレビゲーム、スケートボード。

採用した技術と導入のポイント

  • Angularを採用
  • 「安全性」が最重要
  • サーバサイドのAPI化を進めるにあたり、フロントエンドにも新しい技術の導入が必要
  • ヒューマンエラーをなくし、かつ取り扱うデータの整合性を保つ解として、型安全であること
  • TypeScriptを用いて作られたフレームワークとして、Angularを採用
  • 結果として、対応できる案件が過去と比較すると増え、生産性が劇的に向上した

Q.導入の経緯を教えてください

「ビズリーチ」は、株式会社ビズリーチが運営しているプロダクトの中でも一番歴史が長く、システムとして改善が必要な部分も増えてきていました。
今までも課題感こそあったものの、多くのユーザー様に日々ご利用いただいているなかで新しい技術を導入したり、アーキテクチャレベルでシステムを作り変えるという選択になかなか踏み込むことができませんでした。

私は元々スタンバイというサービスの開発に携わっていたのですが、「ビズリーチ」事業に異動になったタイミングで「えだっち(社内で呼ばれているあだ名)が来るなら今までできなかったことをやろう!」と同じチームの仲間が言ってくれたことで、今回のAngular導入プロジェクトが動き出しました。
私自身、長年フロントエンドエンジニアとして数々のサービス開発に携わっており、自分の技術に対してある程度の自信や誇りを持っていました。このように周りから期待をしてもらったことが嬉しかったし、このプロジェクトを通じて今後の開発がスムーズになることで、よりお客様に「本質的な価値」を提供できる時間が増えることに対して、自分自身も大きな期待感を持てました。

このプロジェクトでの技術選定や、その時考えたことなどはデザイナーブログにまとめましたので、詳しくはこちらの記事をご覧ください。 design.bizreach.co.jp

Q. 実際に導入してみてどうですか?

結果としていいことばかりでした。

やはり大きな恩恵を受けたのは、安全な実装ができることです。人的ミスによる手戻りが劇的に減りました。Angularの導入にあたり、「ビズリーチ」の中で使用されているコンポーネントをいくつも作っておいたため、新規画面を作る時間も短くなりました。

また、若いメンバーの育成にも良い影響がありました。フロントエンドの開発者の中にはJavaScriptに慣れていないという人もいますが、勉強会や小さなタスクをこなしていくことを通じて段々とJavaScriptが書けるようになるメンバーもいました。

新しい技術を導入するためには、チームメンバーが学習するための時間がある程度必要でしたが、チームメンバーのモチベーションも高く、積極的に社内での勉強会を開催したことで、スムーズにメンバーの学習と、技術の啓蒙を進めることができました。

2. 戦略人事クラウド「HRMOS(ハーモス)」の場合

f:id:bizreach:20160823213758j:plain

HRMOS フロントエンドエンジニア

浅井 雅彦 / Masahiko Asai


大手のWeb企画・制作企業にて、ナショナルクライアントの大規模なWeb制作を手がける。その後、自社のサービス開発でのやりがいを求め2015年にビズリーチに参画。HRMOS事業部のフロントエンド開発を牽引している。

採用した技術と導入のポイント

  • Angularを採用
  • 元々AngularJS + TypeScriptの構成で稼働しているWebアプリケーションであった
  • 開発チームの人数が増え、今後さらに大規模なアプリケーションになっていくことが明白だった
  • AngularJSが抱えているパフォーマンスの課題が顕在化しつつあった
  • 現状の資産とメンバーが持っているスキルを最大限活用しながら、モダンな環境に移行していきたかった
  • 現在移行を進めている最中。機能単位で徐々に移行していくアプローチを採用

Q. 導入の経緯を教えてください

現在、HRMOSでは主にAngularJS + TypeScriptを用いて開発を行なっています。 機能拡充によりアプリケーションが大きくなっていく中で、昨年9月にAngular 2がリリースされ今後のAngularJSのロードマップが不透明になってきたことと、今年初めにはAngularJSにおけるパフォーマンスの課題が顕在化してきたため、新しいモダンなフレームワークへ移行を検討することになりました。

HRMOS自体まだ発展途上のプロダクトであることから、既存のコードベースで機能改善も行いつつ、新しい環境を構築していけることが導入の条件としてありました。

その中でAngularが第1候補に出てきたのは、現行の環境でもTypeScriptを既に導入していること、個人でAngularを触っていたメンバーが数名おり、触ってみた結果比較的ポジティブな感触であったことが大きかったです。

また、Angularは学習コストが比較的大きいフレームワークですが、その中でもポジティブな感触だったのは、従来のAngularJSとはコードの書き方が変わっているものの、アーキテクチャの考え方が類似している点があったからかもしれません。スムーズに移行できるであろうと判断し、最終的にはAngularを選定しました。

Q. 実際に導入してみてどうですか?

現在はAngular4への移行を進めている最中でまだ移行途中なため、最終的な所感はまだ判断できませんが、AngularJS時代に苦労していた部分が多数解消され、開発しやすくなった点は大きいと感じています。

またAngular CLIというCLIツールの出来が良く、Angularのベストプラクティスに沿って基盤が整備されているところも大きいです。 標準でユニットテストのコードが付いてくるため、現場全体でテストコードをもっと書いていこうという流れができつつあります。

Componentをどの粒度で分けるかは、開発メンバーの中で議論しながら試行錯誤を重ねている段階です。Vue.jsの話の中で日本語ドキュメントの充実具合について言及されている一方、Angularでは日本語のドキュメントが少なくて苦労することもありますが、メンバーが持ち回りでドキュメントを翻訳して、それをベースに勉強会を開催して知見を深めていくなどの工夫を行っています。

3. 20代のためのレコメンド型転職サイト「careertrek(キャリアトレック)」の場合

f:id:bizreach:20160823213758j:plain

careertrek エンジニア

西名 順平 / Junpei Nishina


iOS/Androidアプリ開発、フロントエンド開発、サーバサイド開発の経験を活かし、現在はキャリアトレック開発チームの新規技術導入を主に担当。 最近の興味の対象はドメイン駆動設計とReactNativeで、プロダクションに本格投入する機会を虎視眈々と狙っている。

採用した技術と導入のポイント

  • React/Reduxを採用
  • 事業拡大にあたりモノリシック→マイクロサービスに移行する必要
  • React or Vue.jsという2つの選択肢
  • 将来的にReact Nativeを利用したネイティブアプリ開発の可能性を考慮
  • 機能の見直しも同時に行ったこともあり、レスポンスタイムが大きく向上

Q. 導入の経緯を教えてください

キャリアトレックは2014年にグランドオープンしてから、順調にサービスを拡大してきました。今まではスピード重視で開発してきましたが、さらなる事業拡大に向けてアーキテクチャの見直しが必要なタイミングでした。
具体的にはモノリシックな作りからマイクロサービスにし、サーバサイドとフロントエンドの作業分担を円滑にするためREST APIとSPAというアーキテクチャを採用し、フロントエンドのフレームワークとしてはReact/Reduxを導入しました。

Angularは時期的に変化が激しいタイミングだったので追いかけきれない可能性を感じていました。また、一度Vue.jsでプロトタイプも作りましたが、どのフレームワークを選んでも結局そこそこ学習コストがかかるため、コミュニティの大きさやコンポーネント指向の書きやすさも考慮してReactを採用することにしました。さらに、その中で将来的にReact Nativeを利用したネイティブアプリ開発の可能性も考慮していました。学習コストはある程度かかるものだと考えていました。

Q. 実際に導入してみてどうですか?

今までの技術から新しい技術にジャンプしたこともあり、学習にはそれなりに時間がかかりました。
施策として「モダンjs勉強会」というものをチーム内で開催し、講師は持ち回りで、1年目のメンバーも積極的に協力してくれました。
導入にあたり苦労した点は「Componentって何?」という共通認識をチーム全体で合わせることでした。今回はサービスの中の一機能をリニューアルしたのですが、今後他の機能にも展開していくにあたり「どんな作りが最適なのか」を模索していました。様々な試行錯誤はしたものの、結果として無事Reactの導入に成功し、これからサービスを改善してくための足がかりを築くことができました。

コンポーネント単位で実装/テストが出来るようになったので、作業範囲が明確になり、複数人で同時に開発するときにブランチ同士のコンフリクトも起こりにくくなりました。Reactの導入と直接関係はありませんが、今回のリニューアルプロジェクトによりプログラムの処理を見直したことで、レスポンスタイムを劇的に向上させることができました。新しいことにチャレンジするときには必ず負荷がかかりますが、予期していなかった部分まで改善することができ、手応えを感じています。

4. 社内向け新サービスの場合

f:id:bizreach:20160823213758j:plain

ビズリーチ エンジニア

松岡 幸一郎 / Koichiro Matsuoka


早稲田大学卒業後、日本IBMを経て、2015年に株式会社ビズリーチに入社。 キャリアトレック事業部にて約2年間開発に従事し、現在は社内システムの新規開発プロジェクトにてアーキテクト兼スクラムマスターを担当。基本はサーバーサイドエンジニアだが、Vueを用いたSPAアーキテクチャを構築、開発中。サーバーサイドではドメイン駆動設計を全力推進中。 趣味はサバゲー、カート、ボードゲーム、筋トレ、植物栽培。

採用した技術と導入のポイント

  • Vue.jsを採用
  • 社内向けの新規サービスの開発
  • プロジェクト発足のタイミングではフロントエンドエンジニア不在
  • Angular、React、Vue.jsを使っているプロジェクトにヒアリングを行いVue.jsに決定
  • プロジェクトの目的を元にアーキテクチャとしての最適解を有識者と徹底的に議論
  • 手厚い日本語のサポートでスムーズに開発を進められている

Q. 導入の経緯を教えてください

新規サービスとして社内向けのATS(Applicant Tracking System)を、現在は5人のチームで開発しております。
フロントエンドのフレームワークを決定するにあたり選択肢として上がっていたのはBeer BashのディスカッションのテーマにもなったAngular、React、Vue.jsの3つでした。それぞれのフレームワークに関して社内での開発実績があるメンバーからヒアリングを行い、自分たちが作るサービスに対して最適解を模索していました。新しいサービスなのでスピード感を持って開発したいという思いがあったため、「学習用の日本語ドキュメントが充実している」「仕様がシンプルである」「ルーティングの仕組みやCLIも備わっている」という観点でVue.jsを採用することとなりました。

Q. 実際に導入してみてどうですか?

社内に有識者がいたため、プロジェクト初期はよりよい設計について細かく相談させてもらい、議論しながらチームのノウハウを溜めていきました。しかし、開発が軌道に乗ってきた後でも課題や疑問に思うことが何度も出てきます。Vue.jsには日本人のコミッターが在籍しているため、ドキュメントに加えslack上での公式サポートチャンネルなど、とにかく日本語で素早く情報収集できることがありがたかったです。抱えていた問題が10分で解決するということもありました。

その他の技術としてFlowによる型チェックを導入しています。細かなミスは防げる一方、TypeScriptと比較すると型づけの制約が弱い点があるため不安な面もあるのが今後の課題です。現在も継続的に学習を行っていますが、それぞれのフレームワークに関して有識者が集まっており、情報交換や品質向上のための相談などを気軽にできる環境はとてもありがたいです。

ビズリーチの開発チームが大切にしていること

今回4名の社員へのインタビューを終え、ビズリーチの開発チームが大切にしていることは、大きく3つあると感じました。

1. 課題解決のために、新しい技術も積極的に導入する

開発現場において、新しい技術を導入したりアーキテクチャを刷新することはコストと見られてしまうこともよくありますし、「大きな不具合を引き起こすのではないか」という心配はあります。しかし、私達が運営している数々のサービスは「作って終わり」ではなく、今後もサービスを長く育てていく必要があります。今までのシステムを使い続けることも選択肢の一つではありますが、長期的な目線でサービスの成長を考えた場合に、新しい技術を導入することでお客様への提供価値を最大化できるのであれば、積極的にチャレンジしていくという風土が根付いてます。開発者は新しい技術を使うこと対してはポジティブなケースが多いですが、それがただの自己満足ではなく「〇〇という課題を解決できるから」と、開発者がビジネス的な観点を持つという姿勢も大切だと再認識しました。

2. 技術選定の裁量は、ビジネス視点も兼ね備えた現場のエンジニアが持つ

サービス開発において、そのアーキテクチャが最適かどうかはビジネスの内容やプロダクトの規模感に応じて変わります。技術は分かるけど、ビジネス観点がない開発者ではその最適解を見つけることは非常に難しいはずです。ビズリーチの開発組織では、創業当初からCPOの竹内が「ビジネスも分かるエンジニアになってほしい」という言葉を投げかけてきました。実際エンジニアの仕事を見てみると、機能を実装するためにコードを書くだけではなく、ユーザーの行動分析から事業におけるボトルネックを見つけたり、サービスグロースのための新しい企画のMTGに顔を出したりと、ビジネス的な考え方を求められるシーンが多くあります。それらの業務を通じて「ただ単に言われた機能を開発する」ではなく「事業課題を解決するために開発する」という意識が浸透しています。ビジネス的な観点と技術力の双方があるからこそ、現場のエンジニアに安心して技術選定を任せることができるのだと思います。

3. 社内の技術共有がとても活発

今回のFrontend Beer Bashでも3つのフレームワークが登場しましたが、ビズリーチでは様々な技術を採用しています。現在複数のサービスを運営しているビズリーチとしては、各事業におけるノウハウの蓄積が会社としての大きな財産になります。今回の事例にもありますが、新規事業においてはそれぞれの技術における有識者にヒアリングをした上で最適な技術を選ぶことができます。どれくらいの開発メンバーなのか、ゴールは何なのか、気をつけなければ行けない点はなにか、などの情報を知った上で開発をスタートさせることができれば、大きなつまづきは確実に減らすことができるはずです。また、開発途中に躓くことがあっても、都度相談することで解決までの時間を大きく短縮することができます。

このように、技術共有が活発な文化や、困ったときに相談しやすい雰囲気がビズリーチの各プロダクトの成長を支えてくれているのだと思います。

次のFrontend Beer Bashは秋頃開催予定!

今回の記事ではビズリーチの開発チームがどのように技術選定を行っていくのか、アーキテクチャを考えていくのか、実際の事例を交えてお伝えさせていただきました。ビジネス課題も積極的に踏み込んでく4名の話を聞いて、本当に頼りになる開発チームだと改めて感じました。

さて、vol.1には多くの方にご参加いただいた「Frontend Beer Bash」ですが、次回vol.2の開催を秋頃に予定しております。
詳細が決まり次第情報を公開させていただきますので、楽しみにお待ち下さい!

ビズリーチではフロントエンドエンジニア・デザイナーを募集しています

www.bizreach.co.jp

ビズリーチではエンジニア・デザイナーが勉強会を実施しています

ぜひ一度お気軽にご参加ください! d-cube.connpass.com

f:id:bizreach:20160823213758j:plain

この記事を書いたメンバー

荒井 利晃 / Toshiaki Arai


電気通信大学大学院を卒業後、2014年に新卒1期生としてビズリーチに入社。エンジニアとしてニクリーチの立ち上げや、キャリアトレックの開発リーダーを経て、現在はエンジニア職・クリエイティブ職の新卒採用に従事。学生時代ライターとしての業務経験を持ち、密かにReach Oneの人気ライター枠を狙っている。