新卒Tweetこんにちは。エンジニア・デザイナーの新卒採用を担当しています、荒井です。暑い日が続いていますが、皆様いかがお過ごしでしょうか。Bash」がビズリーチのオフィスにて開催されました。Vue.js」がサブテーマとして掲げられており、ビズリーチで実際に開発に携わっているメンバーによるLTやトークセッションが行われました。www.bizreach.co.jpビズリーチでは、プログラミング言語やシステムのアーキテクチャにおいて様々な技術を採用しています。そのほとんどは事業フェーズや事業の目的に合わせて、現場で開発に携わるメンバーが自ら技術選定を行います。お客様やユーザーの皆様に対してより大きな価値を提供できると判断した場合には、新しい技術も積極的に取り入れていきます。Bash」に登壇した4名に、それぞれのプロジェクトにおける技術選定の背景や実際に導入してみて感じたことを聞いてきました。ここからはビズリーチ、careertrek、HRMOS、社内向け新規サービスの4つの事例をご紹介します。Koeda2014年にフロントエンドエンジニアとして入社。幼少よりマークアップに触れ、Qiitaでは一時トップ記事として「HTMLを15年書いてる僕が語ってみる」が掲載され、はてなブックマークの人気エントリにも。前職では大手広告代理店の業務を主とし、数千ページの実装を行ってきた経験を活かしてビズリーチのフロントエンドエンジニアリングを牽引。趣味はテレビゲーム、スケートボード。結果として、対応できる案件が過去と比較すると増え、生産性が劇的に向上したQ.導入の経緯を教えてください「ビズリーチ」は、株式会社ビズリーチが運営しているプロダクトの中でも一番歴史が長く、システムとして改善が必要な部分も増えてきていました。今までも課題感こそあったものの、多くのユーザー様に日々ご利用いただいているなかで新しい技術を導入したり、アーキテクチャレベルでシステムを作り変えるという選択になかなか踏み込むことができませんでした。私は元々スタンバイというサービスの開発に携わっていたのですが、「ビズリーチ」事業に異動になったタイミングで「えだっち(社内で呼ばれているあだ名)が来るなら今までできなかったことをやろう!」と同じチームの仲間が言ってくれたことで、今回のAngular導入プロジェクトが動き出しました。私自身、長年フロントエンドエンジニアとして数々のサービス開発に携わっており、自分の技術に対してある程度の自信や誇りを持っていました。このように周りから期待をしてもらったことが嬉しかったし、このプロジェクトを通じて今後の開発がスムーズになることで、よりお客様に「本質的な価値」を提供できる時間が増えることに対して、自分自身も大きな期待感を持てました。このプロジェクトでの技術選定や、その時考えたことなどはデザイナーブログにまとめましたので、詳しくはこちらの記事をご覧ください。実際に導入してみてどうですか?結果としていいことばかりでした。大きな恩恵を受けたのは、安全な実装ができることです。人的ミスによる手戻りが劇的に減りました。Angularの導入にあたり、「ビズリーチ」の中で使用されているコンポーネントをいくつも作っておいたため、新規画面を作る時間も短くなりました。若いメンバーの育成にも良い影響がありました。フロントエンドの開発者の中にはJavaScriptに慣れていないという人もいますが、勉強会や小さなタスクをこなしていくことを通じて段々とJavaScriptが書けるようになるメンバーもいました。新しい技術を導入するためには、チームメンバーが学習するための時間がある程度必要でしたが、チームメンバーのモチベーションも高く、積極的に社内での勉強会を開催したことで、スムーズにメンバーの学習と、技術の啓蒙を進めることができました。Asai大手のWeb企画・制作企業にて、ナショナルクライアントの大規模なWeb制作を手がける。その後、自社のサービス開発でのやりがいを求め2015年にビズリーチに参画。HRMOS事業部のフロントエンド開発を牽引している。TypeScriptの構成で稼働しているWebアプリケーションであった開発チームの人数が増え、今後さらに大規模なアプリケーションになっていくことが明白だったAngularJSが抱えているパフォーマンスの課題が顕在化しつつあった現状の資産とメンバーが持っているスキルを最大限活用しながら、モダンな環境に移行していきたかった現在移行を進めている最中。TypeScriptを用いて開発を行なっています。2がリリースされ今後のAngularJSのロードマップが不透明になってきたことと、今年初めにはAngularJSにおけるパフォーマンスの課題が顕在化してきたため、新しいモダンなフレームワークへ移行を検討することになりました。HRMOS自体まだ発展途上のプロダクトであることから、既存のコードベースで機能改善も行いつつ、新しい環境を構築していけることが導入の条件としてありました。その中でAngularが第1候補に出てきたのは、現行の環境でもTypeScriptを既に導入していること、個人でAngularを触っていたメンバーが数名おり、触ってみた結果比較的ポジティブな感触であったことが大きかったです。Angularは学習コストが比較的大きいフレームワークですが、その中でもポジティブな感触だったのは、従来のAngularJSとはコードの書き方が変わっているものの、アーキテクチャの考え方が類似している点があったからかもしれません。スムーズに移行できるであろうと判断し、最終的にはAngularを選定しました。実際に導入してみてどうですか?現在はAngular4への移行を進めている最中でまだ移行途中なため、最終的な所感はまだ判断できませんが、AngularJS時代に苦労していた部分が多数解消され、開発しやすくなった点は大きいと感じています。CLIというCLIツールの出来が良く、Angularのベストプラクティスに沿って基盤が整備されているところも大きいです。標準でユニットテストのコードが付いてくるため、現場全体でテストコードをもっと書いていこうという流れができつつあります。Componentをどの粒度で分けるかは、開発メンバーの中で議論しながら試行錯誤を重ねている段階です。Vue.jsの話の中で日本語ドキュメントの充実具合について言及されている一方、Angularでは日本語のドキュメントが少なくて苦労することもありますが、メンバーが持ち回りでドキュメントを翻訳して、それをベースに勉強会を開催して知見を深めていくなどの工夫を行っています。NishinaiOS/Androidアプリ開発、フロントエンド開発、サーバサイド開発の経験を活かし、現在はキャリトレ開発チームの新規技術導入を主に担当。最近の興味の対象はドメイン駆動設計とReactNativeで、プロダクションに本格投入する機会を虎視眈々と狙っている。導入の経緯を教えてくださいキャリトレは2014年にグランドオープンしてから、順調にサービスを拡大してきました。今まではスピード重視で開発してきましたが、さらなる事業拡大に向けてアーキテクチャの見直しが必要なタイミングでした。APIとSPAというアーキテクチャを採用し、フロントエンドのフレームワークとしてはReact/Reduxを導入しました。Angularは時期的に変化が激しいタイミングだったので追いかけきれない可能性を感じていました。一度Vue.jsでプロトタイプも作りましたが、どのフレームワークを選んでも結局そこそこ学習コストがかかるため、コミュニティの大きさやコンポーネント指向の書きやすさも考慮してReactを採用することにしました。Nativeを利用したネイティブアプリ開発の可能性も考慮していました。学習コストはある程度かかるものだと考えていました。実際に導入してみてどうですか?今までの技術から新しい技術にジャンプしたこともあり、学習にはそれなりに時間がかかりました。施策として「モダンjs勉強会」というものをチーム内で開催し、講師は持ち回りで、1年目のメンバーも積極的に協力してくれました。導入にあたり苦労した点は「Componentって何?」という共通認識をチーム全体で合わせることでした。今回はサービスの中の一機能をリニューアルしたのですが、今後他の機能にも展開していくにあたり「どんな作りが最適なのか」を模索していました。様々な試行錯誤はしたものの、結果として無事Reactの導入に成功し、これからサービスを改善してくための足がかりを築くことができました。コンポーネント単位で実装/テストが出来るようになったので、作業範囲が明確になり、複数人で同時に開発するときにブランチ同士のコンフリクトも起こりにくくなりました。Reactの導入と直接関係はありませんが、今回のリニューアルプロジェクトによりプログラムの処理を見直したことで、レスポンスタイムを劇的に向上させることができました。新しいことにチャレンジするときには必ず負荷がかかりますが、予期していなかった部分まで改善することができ、手応えを感じています。※2018年4月25日に「キャリアトレック」は正式名称を「キャリトレ」に変更しました。IBMを経て、2015年に株式会社ビズリーチに入社。キャリトレ事業部にて約2年間開発に従事し、現在は社内システムの新規開発プロジェクトにてアーキテクト兼スクラムマスターを担当。基本はサーバーサイドエンジニアだが、Vueを用いたSPAアーキテクチャを構築、開発中。サーバーサイドではドメイン駆動設計を全力推進中。趣味はサバゲー、カート、ボードゲーム、筋トレ、植物栽培。System)を、現在は5人のチームで開発しております。BashのディスカッションのテーマにもなったAngular、React、Vue.jsの3つでした。それぞれのフレームワークに関して社内での開発実績があるメンバーからヒアリングを行い、自分たちが作るサービスに対して最適解を模索していました。新しいサービスなのでスピード感を持って開発したいという思いがあったため、「学習用の日本語ドキュメントが充実している」「仕様がシンプルである」「ルーティングの仕組みやCLIも備わっている」という観点でVue.jsを採用することとなりました。実際に導入してみてどうですか?社内に有識者がいたため、プロジェクト初期はよりよい設計について細かく相談させてもらい、議論しながらチームのノウハウを溜めていきました。開発が軌道に乗ってきた後でも課題や疑問に思うことが何度も出てきます。Vue.jsには日本人のコミッターが在籍しているため、ドキュメントに加えslack上での公式サポートチャンネルなど、とにかく日本語で素早く情報収集できることがありがたかったです。抱えていた問題が10分で解決するということもありました。その他の技術としてFlowによる型チェックを導入しています。細かなミスは防げる一方、TypeScriptと比較すると型づけの制約が弱い点があるため不安な面もあるのが今後の課題です。現在も継続的に学習を行っていますが、それぞれのフレームワークに関して有識者が集まっており、情報交換や品質向上のための相談などを気軽にできる環境はとてもありがたいです。ビズリーチの開発チームが大切にしていること今回4名の社員へのインタビューを終え、ビズリーチの開発チームが大切にしていることは、大きく3つあると感じました。課題解決のために、新しい技術も積極的に導入する開発現場において、新しい技術を導入したりアーキテクチャを刷新することはコストと見られてしまうこともよくありますし、「大きな不具合を引き起こすのではないか」という心配はあります。私達が運営している数々のサービスは「作って終わり」ではなく、今後もサービスを長く育てていく必要があります。今までのシステムを使い続けることも選択肢の一つではありますが、長期的な目線でサービスの成長を考えた場合に、新しい技術を導入することでお客様への提供価値を最大化できるのであれば、積極的にチャレンジしていくという風土が根付いてます。開発者は新しい技術を使うこと対してはポジティブなケースが多いですが、それがただの自己満足ではなく「〇〇という課題を解決できるから」と、開発者がビジネス的な観点を持つという姿勢も大切だと再認識しました。技術選定の裁量は、ビジネス視点も兼ね備えた現場のエンジニアが持つサービス開発において、そのアーキテクチャが最適かどうかはビジネスの内容やプロダクトの規模感に応じて変わります。技術は分かるけど、ビジネス観点がない開発者ではその最適解を見つけることは非常に難しいはずです。ビズリーチの開発組織では、創業当初からCPOの竹内が「ビジネスも分かるエンジニアになってほしい」という言葉を投げかけてきました。実際エンジニアの仕事を見てみると、機能を実装するためにコードを書くだけではなく、ユーザーの行動分析から事業におけるボトルネックを見つけたり、サービスグロースのための新しい企画のMTGに顔を出したりと、ビジネス的な考え方を求められるシーンが多くあります。それらの業務を通じて「ただ単に言われた機能を開発する」ではなく「事業課題を解決するために開発する」という意識が浸透しています。ビジネス的な観点と技術力の双方があるからこそ、現場のエンジニアに安心して技術選定を任せることができるのだと思います。Bashでも3つのフレームワークが登場しましたが、ビズリーチでは様々な技術を採用しています。現在複数のサービスを運営しているビズリーチとしては、各事業におけるノウハウの蓄積が会社としての大きな財産になります。今回の事例にもありますが、新規事業においてはそれぞれの技術における有識者にヒアリングをした上で最適な技術を選ぶことができます。どれくらいの開発メンバーなのか、ゴールは何なのか、気をつけなければ行けない点はなにか、などの情報を知った上で開発をスタートさせることができれば、大きなつまづきは確実に減らすことができるはずです。開発途中に躓くことがあっても、都度相談することで解決までの時間を大きく短縮することができます。このように、技術共有が活発な文化や、困ったときに相談しやすい雰囲気がビズリーチの各プロダクトの成長を支えてくれているのだと思います。Bashは秋頃開催予定!今回の記事ではビズリーチの開発チームがどのように技術選定を行っていくのか、アーキテクチャを考えていくのか、実際の事例を交えてお伝えさせていただきました。ビジネス課題も積極的に踏み込んでく4名の話を聞いて、本当に頼りになる開発チームだと改めて感じました。Bash」ですが、次回vol.2の開催を秋頃に予定しております。卒業後、2014年に新卒1期生としてビズリーチに入社。エンジニアとしてニクリーチの立ち上げや、キャリトレの開発リーダーを経て、現在はエンジニア職・クリエイティブ職の新卒採用に従事。Oneの人気ライター枠を狙っている。仕事も子育ても全力で。関連記事ビズリーチのエンジニア、デザイナーは日々何を大切に考え、仕事に向き合っているか。エンジニアの10月入社式を同時開催!東京に世界中の大学からトップエンジニア37名が集結。Blogスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。