【MIIDAS Tech LIVE #7】を開催しました
こんにちはミイダス Tech Officeです。
ミイダス株式会社のテックチームが直近で開発した機能を現場のエンジニアから共有する「MIIDAS Tech LIVE」
第7回目の開催となる今回は3つのリリース情報をお届けしました。
採用マッチングサービス「ミイダス」は、独自の診断ツールで採用のミスマッチを減らす中途採用サービスです。メインの採用関連の機能に加え、診断や研修、組織サーベイの支援金の検索機能など、幅広い機能開発が行われています。
本記事ではそのイベントの内容を書き起こし記事としてご紹介させていただきます。ミイダスの最新開発情報をぜひご覧ください。
永留）皆さん、こんにちは。本日はご参加いただきまして、誠にありがとうございます。本日司会を務めます、ミイダス株式会社 開発部 Tech Officeの永留と申します。どうぞよろしくお願いいたします。
このイベントは「MIIDAS Tech LIVE」と銘打っており、ミイダスTechチームが直近で開発した機能について、現場のエンジニアがご紹介する内容となっております。年4回の開催を予定しており、今回で第7回目を迎えます。
本日のアジェンダをご紹介いたします。オープニングでは、ミイダス株式会社や本イベントの概要、ミイダステックチームの技術スタックやチーム編成についてご説明いたします。その後、リリースされた機能について、エンジニア3名から発表があり、最後に直近のミイダスのニュースをお伝えして、イベントをクローズいたします。全体で約1時間を予定しております。
それでは、早速オープニングに入りたいと思います。
Opening
永留）まず、ミイダス株式会社について少しご紹介いたします。ミイダスは、独自の診断ツールを活用して採用のミスマッチを減らす中途採用サービスを企画・開発・運営しています。コンピテンシー診断やバイアス診断ゲームなどを通じて、転職者の方には自分に合ったオファーを、企業には診断結果に基づいたフィッティング人材分析を提供し、企業において高いパフォーマンスを発揮できる人材の採用を支援しています。
サービスのローンチから9年目を迎え、現在は従業員数が600名弱、開発組織は100名弱の規模となっています。ユーザー数は100万人を超え、42万社以上の企業にご利用いただいております。採用マッチング機能を主軸に据えつつも、組織サーベイやタレントマネジメント機能の開発にも積極的に取り組んでおります。
次に、MIIDAS Tech LIVEについてご説明いたします。本イベントでは、ミイダスのTechチームが直近で開発した機能を、現場のエンジニアが皆様に直接ご紹介いたします。メインの採用関連機能に加えて、診断や研修、組織サーベイ、支援金検索機能など、幅広い機能についてもお話しいたします。本イベントの目的は、私たちの取り組みを定期的に発信することで、より多くの方にミイダスを深く知っていただくことにあります。
もし、このイベントを通じてミイダスの開発組織にご興味を持っていただけた方がいらっしゃれば、ぜひ何らかの形でご縁がいただければと思います。最後に採用に関するお知らせもございますので、ぜひご覧ください。
続いて、3つの主な技術スタックについてご説明いたします。フロントエンドでは、主にJavaScriptで現在Typescriptを導入中です。フレームワークはReactとNext.jsを使用しており、状態管理にはReduxを採用しています。バックエンドはGo言語で開発を行っています。その他の技術については、こちらのスライドをご覧ください。何かご質問がありましたら、Q&A機能でお気軽にお尋ねください。
続いて、ミイダスの開発組織の体制についてご説明いたします。開発部は大きく4つのグループに分かれています。プロダクト開発グループは、ミイダスの機能開発を行っており、エンジニアの大半が所属しています。運用グループは、ミイダスの運用や品質レポート、KPIレポートの作成や監視を担当しています。開発人事グループは、採用や技術広報、評価制度の設計を行っています。開発システムグループは、PCやネットワークツールの管理や、社内のセールスチーム向け営業支援システムの開発を行っています。
今回の発表のメインはプロダクト開発グループの活動です。プロダクト開発は、採用関連機能を開発するチーム、採用以外の機能を開発するチーム、そしてプロダクト全体の保守を担当するチームの3つに分かれています。採用以外の機能としては、組織サーベイやタレントマネジメント機能、企業向け支援金検索機能などを提供しています。
以上がミイダスの開発組織の概要となります。それでは早速、リリースされた機能のご紹介に移りたいと思います。最初にご紹介するのは、ユーザーホーム画面の改善施策についてです。担当の磯崎が説明いたします。磯崎さん、よろしくお願いします。
ユーザーホーム画面施策
磯崎） はい、よろしくお願いします。磯崎です。ポジションは「企画」になっていますが、もともとバックエンドのエンジニアもやっていました。今は企画的なポジションで、CTOも兼任しています。経歴としてはミイダスの立ち上げからずっと関わっていて、最近は企画を担当しているという位置づけです。
今回、ホーム画面の施策についてお話します。ミイダスのユーザー側の課題として、大きなものが３点ありました。
もっとたくさんの人にミイダスを使ってほしいけれど、ユーザー登録後にあまり使わない人が非常に多いです。ユーザーの何割かは「何のために登録したんだろう」と思うほど、利用していない人がたくさんいます。
「ポジションを色々と保存しているけれど、応募までのステップに進んでくれない」という点
ミイダスに訪問しても、同じような求人ばかりが表示される
これらを改善し、ユーザーにもっと多様な求人を見せることで、最終的にはミイダスをもっと使ってもらえるようになるのではないかという狙いがあります。
ゴールとしては、一般的なアプリでよく見られる下部のタブバーのメニューとホーム画面を実装することです。最近のアプリではほぼ9割方このタブバーが採用されています。加えて、ホーム画面を作ることで、サービスの改善活動がしやすくなるような仕組みを整えました。この点については後ほど説明します。
開発期間は4ヶ月で、この画面の企画自体はかなり前から進めていましたが、実際の開発は4月ごろに始まり、7月末にリリースしました。開発体制はスライドにある通りです。
ここに示しているのが、実際に作った画面のイメージです。左側がホーム画面で、お知らせが表示されていたり、条件から探したり、職種から探したり、簡単にポジションを検索できるようになっています。気になる求人がすぐに表示されるなど、他にもいくつか機能があります。
改善のしやすさについてですが、計測と改善のサイクルを回せるような作りにしました。単に画面を作るだけでなく、今後の変更に対しても工数をかけずに対応できるような設計を心掛けています。
以前は、サイトにアクセスすると、求人の一覧が表示されていました。これはこれで求人を見るために来たユーザーにとってはストレートで、コンバージョンも悪くはなかったのですが、いつも同じようなポジションが表示されるという課題がありました。また、表示されるポジションを変えたい時には、ロジックを変更する必要があり、その際に速度にも影響してしまうという問題もありました。
そこで、これを解決するために「テーマ」を定義しました。例えば、「残業ほぼなしの求人」「住んでいる地域で働ける求人」「新着の求人」といった切り口でポジションを表示する仕組みを作りました。ワンクリックでポジション一覧を開ける画面を複数用意し、どのテーマが支持されるかをPDCAで回していくという狙いです。
ここで注意が必要なのは、変更できる範囲を明確にしておくことです。すべてを自由に変更できるようにしたいという要望はありますが、範囲を定義しておかないと、用意したのに変更されないままになることがあります。これまでにもそういったことがミイダスでは起こったので、きちんと変更できる範囲を決めた上で進めました。
こういった仕組みを作ろうと思った背景には、開発コストが高いものと企画コストが高いものを明確にして、チーム内でのタスクのバランスを取れるようにしました。常に開発がボトルネックになっている状況を改善し、企画側でも改善を独自に進められるようにしたいという意図がありました。
リリースは7月末に行い、その後、すぐにテーマの追加を進めています。リリース時点では7つのテーマでしたが、今は10個に増え、さらに追加していく予定です。
そのテーマごとの流入数や、どのテーマが人気があるかをカウントし、今後のテーマ追加の参考にしています。
今後の課題としては、どのテーマが応募に結びついているかを評価するのが難しいという点があります。人気のポジションが含まれているテーマはクリックされやすいですが、それはテーマが優秀というより、そのポジションが優れているだけかもしれないので、このような点をどう評価して改善しようかと考えています。
矢印がリリースですので、その後、ポジションを閲覧した記録数も少し上がっているようです。お盆休みの影響もあり、劇的な変化ではありませんが、一人当たりの気になる数も1段階増えたように見えます。リリースによって良い効果があったのかなと思います。
応募数の増加は期待したほどではありませんが、少なくとも気になる数は増えましたし、マイナスの影響はなかったので、今後の改善に期待しています。劇的な数値変化はありませんが、今後の伸びしろが大きい画面になったと思います。
以上で発表を終わります。ありがとうございました。
磯崎さん、ありがとうございました。では次に進みます。従業員アプリの開発について、本田さんから発表をいただきます。今回の開発については、プロダクト開発グループのアプリチームが対応しました。
それでは、本田さん、よろしくお願いします。
従業員アプリの開発
本田） はい、よろしくお願いします。アプリエンジニアの本田と申します。アプリチームに所属しており、マネージャーを務めています。経歴としては、新卒でSESの会社に入り、その後ベンチャー企業で働きました。人数が少なかったこともあり、サーバー構築からAPI作成、ネイティブアプリでの実装まで、一通りの開発を担当して経験を積み、その後ミイダスに参画しました。
簡単に自己紹介ですが、私は熊本出身で、Slackのアイコンは「くまモン」を使っています。最初はそれほど興味がなかったのですが、見ているうちにだんだん可愛く感じるようになり、今では結構気に入っています。
今回の発表は、従業員アプリの開発についてです。ミイダスでは、サーベイ機能として各種診断や従業員の状態チェック機能を提供しています。これまではWeb受験ができましたが、Web受験だとメールでURLを探して、わざわざ開いて対応する手間がかかることが課題でした。そこで、アプリを作ってインストールしてもらい、直接受験できるようにした方が便利だろうということで、従業員アプリの開発に至りました。
課題としては、受験期限があるにもかかわらず、対応までの手間がかかってしまうことでした。これを解消し、できるだけ簡単に受験ができるようにという目的でアプリ開発に取り組みました。
アプリの概要について説明します。このアプリは、従業員リストに登録されているユーザーのみが使用可能です。ミイダスの企業向けサービスでは従業員名簿機能があり、そこで会社の従業員を登録し、従業員番号が割り当てられます。その従業員番号を使ってログインし、各種コンテンツの受験が可能になります。例えば、コンピテンシー診断や研修動画の閲覧、バイアスゲームなど、提供している各種サービスを体験できます。
開発期間は約1.5ヶ月で、今年の6月頃からデザイン確認や懸念点の洗い出し、仕様確認を行い、技術選定や実装に取り組みました。スパンとしては短めで開発を完了させたという印象です。
仕様決定の段階で気にした点としては、ユーザーアカウントの登録機能があるかどうかです。アプリレビューのレギュレーションによると、ユーザー作成機能がある場合は、削除機能も同時に実装する必要があります。ただし、従業員アプリの場合、企業に所属している従業員が使用する前提なので、ユーザーが自主的に退会やアカウント削除ができてしまうと不都合が生じます。そのため、リストに登録されているユーザーのみが使用できる仕組みとし、問題なく進めることができました。
デザイン的には、ユーザー登録に見えないように工夫しました。Web側でログインしたことのあるユーザーには通常のログイン画面を表示し、ログイン履歴がないユーザーにはパスワードリセットを促すことで、スムーズにログインできるように対応しました。
今回の開発で、ストーリーボードを使用せずに、ようやくSwiftUIを導入しました。これまでミイダスでは、iOSアプリを2つ開発していました。転職ユーザー向けのアプリと、企業ユーザーが応募者とやり取りするアプリです。前者は10年ほど前に作られ、メンテナンスを続けてきましたが、SwiftUIの導入のタイミングが難しく、後者も既存のWebページのデザインを踏襲していたため、SwiftUIを見送っていました。今回、新規でアプリを作ることになり、スタンダードな構成としてSwiftUIを採用しました。
ストーリーボードの課題点を挙げると、部品に制約をつけたり配置したりする際に、ビューが肥大化して重くなることや、複数人で作業しているときにストーリーボードでコンフリクトが発生した場合の解決が大変だったことです。さらに、コードレビューでも修正内容が判断しにくいことが多く、難儀していました。
一方、SwiftUIを使ってみて感じた課題としては、Webのデザインを踏襲する場合、ストーリーボードに比べて実装が難しかった点です。パーツの配置に慣れるまで時間がかかりました。また、プレビュー機能が重く、最終的にはあまり使えませんでした。WebViewのハンドリングにも苦戦しましたが、ビューモデルにインスタンスを渡すことで対応しました。今後、カスタマイズがしやすくなればさらに良いと思います。
現在、受験案内メールのフッターにストアのリンクを設置し、約400人弱のユーザーに利用してもらっています。今後も多くの方に便利に使ってもらえるように、改善を続けていきたいと考えています。
以上です。
本田さん、ありがとうございました。では、従業員アプリ開発に関する発表でした。これからも進化していくと思いますので、大きな変更があればまたこの場で皆さんにお知らせします。
続いて、3つ目の発表に移ります。ESLintプラグインについて、溝渕さんからの発表です。この内容は、プロダクト開発グループのフロントエンド保守チームによって実施された施策となっています。それでは、溝渕さん、よろしくお願いします。
ESLintプラグインに関して
溝渕）ミイダスのフロントエンドエンジニアの溝渕と申します。私は保守チームに所属しており、主にいくつかのプロダクトの保守を担当しています。経歴としては、SIreを経てミイダスに入社しました。一言はスライドに記載してある通りです。
今日は、ESLintのプラグインに関してお話します。これまでミイダスのコーディング規約には、文書に明記されていない暗黙の規約が多く存在していました。そのため、開発者は開発時に規約を意識しながら進める必要があり、レビューをする際にはレビュワーがその規約をチェックしなければならないという状況でした。さらに、レビューをすり抜けてしまう規約違反のコードも発生していました。
加えて、今後Typescriptを導入することになり、Typescript関連の新しい規約が増えることが予想されていました。そこで、開発者やレビュワーが規約を意識せずとも自動で違反を検出できる仕組みを導入しようということで、このプロジェクトを始めました。
まず、既に行っていたことを整理します。1つ目は、ESLintを使用して規約違反を静的解析し、コーディング規約の違反を検出していました。これはほとんどのプロジェクトで行っていることかと思います。
2つ目は、各エディターで、例えばVSCodeではESLintのプラグインを使用し、開発中にコーディング規約違反を見つけられるような仕組みが整っていました。
3つ目として、ESLintのチェックをCIでも実施しており、プルリクエストが作成された時にCIが通っていないとマージできないという制限をかけていました。そのため、レビュー前にESLintでチェックされたものは規約違反を検知できていました。
次に今回新しく始めたことですが、まずはコーディング規約を文書化することです。これまでは規約を文書に残す文化が定着していませんでしたが、少なくともこれから追加・変更される規約は必ず文書にするようにしました。
既存の規約については後々整理していく予定ですが、まずは新しい規約を文書に残す文化を作ることが重要だと考えて始めました。
次に、ESLintで独自の規約もチェックできるようにしようと考えました。ESLintには多くのルールがあり、さらにサードパーティーのルールも存在しますが、社内のコーディング規約にはそれらだけではチェックできないものもありました。そこで、ミイダスでは独自のコーディング規約をチェックするためのESLintのカスタムルールをいくつか作成したので、その一部をご紹介します。
まず1つ目のルールですが、ミイダスではNext.js.を使用しており、Next.jsのLinkコンポーネントというものがあります。これはHTMLでいうところのaタグに相当しますが、Linkタグを使うことで、物理遷移ではなく、仮想的なページ遷移が行えます。ただし、何でもかんでも仮想遷移にすれば良いというわけではなく、物理遷移が必要な場面も存在します。
例えば、ランディングページ（LP）からログインページに遷移する場合、LPにはアフィリエイトなどのサードパーティーのスクリプトが多く含まれているため、それをそのままログインページに持ち込んでしまうと、万が一サードパーティースクリプトの発行者が攻撃を受け、悪意あるスクリプトが埋め込まれてしまった場合、ユーザーネームやパスワードが外部サーバーに送信されるリスクがあります。そのため、重要な情報を入力するページは物理遷移にすべきだと判断し、特定のURLを物理遷移すべきかどうかチェックする機能を実装しました。
修正前のLinkコンポーネントを、修正後のaタグに変えることで、物理遷移が必要な場面では適切に処理できるようになりました。プロジェクトごとに物理遷移すべきURLは異なるため、その一覧をESLintルールのオプションとして渡せるようにしました。JSXのhref属性に、物理遷移すべきURLが含まれている場合、ESLintでエラーとして報告するようにしています。
2つ目のルールは、Reactの関数コンポーネント内でレンダー関数を定義することを禁止するものです。ミイダスでは、クラスコンポーネント時代の名残で、レンダー関数が多用されていました。関数コンポーネント内にレンダー関数が存在すると、useCallbackを使用すべきかどうかの判断が必要になったり、別のコンポーネントに切り出すべきかどうかを考慮する必要が出てきます。そのため、安易にレンダー関数を作れないよう制限を設けました。
このルールに従って修正すると、関数コンポーネントの外にレンダー関数を切り出すことになります。ESLintプラグインReactのユーティリティ関数を参考にして、関数コンポーネント内かどうかを判定し、関数名が「render」で始まる場合には規約違反として報告するようにしました。
3つ目のルールは、Immutable Recordのプロパティの取得方法を制限するものです。Immutable.jsはFacebook社が提供しているOSSで、オブジェクトを不変にするためのライブラリです。
RecordというのはImmutable.jsが提供するデータタイプで、このRecordのプロパティにアクセスする方法として、.get()と通常のドットアクセスがありますが、両方が混在しているとコードの可読性が低下します。そこで、ドットアクセスに統一することにしました。.get()を使用している箇所を規約違反として報告するようにしています。
このアプローチには、TypeScriptのコンパイラAPIを使用し、.get()が呼び出されているオブジェクトのシンボル名がレコードだった場合に規約違反として報告する仕組みです。
以上、ミイダスで作成した3つのカスタムルールを紹介しました。カスタムルールを運用して得られた成果と学びを共有します。1つ目に開発者やレビュワーがルールに従って自動でチェックされるため、意識せずとも規約違反を見つけられるようになり、負担が軽減されました。
2つ目に、社内用ルールであれば、擬陽性や擬陰性が発生してもメジャーなケースがカバーできていれば十分であり、完璧を求めつつも早期導入が効果的だと感じました。後で修正すれば良いと考えています。
3つ目は、ESLintのカスタムルール開発には、抽象構文木（AST）の知識が必要で、普段触れない部分なので学習が必要です。ただし、TypeScriptがあれば型情報を事前に把握できるため、開発がスムーズに進むという点でお勧めです。
4つ目として、やりたいことと似たルールが既に存在する場合は、そのルールのソースコードを参考にすることでヒントを得られることが多いです。
最後に、TypeScriptの型に関するESLintルールを作成するにはTypeScriptコンパイラAPIの知識が必要ですが、ドキュメントが少ないため、試行錯誤しながら進めることが多く、苦労する部分ではあります。
以上、ミイダスでのESLintプラグインの開発と運用についての発表でした。
溝渕さん、ありがとうございました。これでエンジニアからの発表は以上です。
MIIDAS NEWS
では最後に、「MIIDAS NEWS」として、ミイダスチームの最近の出来事についていくつかニュースをお知らせします。今回は6点ご紹介します。
まず1つ目は、「はたらく人ファーストアワード2024」が始動したというニュースです。昨年第1回を開催したイベントで、このアワードは、多様な働きがいを認め、働く人一人ひとりを大切にする企業を支援する企業表彰のイベントです。今年も朝日新聞社様と共同で第2回を開催します。これに伴い、現在、東京、名古屋、大阪の270カ所にシティスケープ型広告が展開中です。今年もこのイベントを盛り上げていきたいと思っています。
2つ目は、「ITreview Best Software in Japan」でミイダスがトップ50のうち45位に選ばれたというニュースです。この表彰は、ITレビューサービスのユーザー様が支持したSaaSソフトウェアやITサービスを選出するものです。ダイレクトリクルーティングの部門では、ミイダスが唯一の選出企業となっています。今後も良いサービス作りに励んでいきます。
3つ目は、テレビ東京の「円卓コンフィデンシャル」にミイダスHRサイエンス研究所の神長が出演したというニュースです。この研究所は、ミイダスの人材と企業のマッチングを科学するチームです。番組では「バイアス」をテーマに、MCのアンジャッシュ小島さんやクイズ王の伊沢さんがバイアス診断ゲームを体験し、神長がその解説を行いました。アーカイブもあるので、興味のある方はぜひご覧ください。
次に、ミイダスが「JSConf JP 2024」にプレミアムスポンサーとして参加するというニュースです。昨年に引き続き、現地会場で企業ブースを出展します。また、先ほど発表した溝渕がスポンサーセッションで登壇予定です。オンラインでも視聴可能ですが、会場にお越しいただけると嬉しいです。
5つ目は、「SER Kaigi」というイベントにシルバースポンサーとして参加するというニュースです。2025年1月に初開催となるこのイベントに、コミュニティへの貢献を目指して参加することにしました。今回はシルバースポンサーなので、ブースの出展やセッションの登壇はありませんが、興味のある方はぜひご参加ください。
続いて、前回のMIIDAS Tech LIVE以降にリリースした5つの記事をご紹介します。
1つ目は、「10年目のGoサービスの運用について」です。こちらは、Goカンファレンスで弊社のCTO磯崎が登壇したセッションの内容をまとめた記事です。
2つ目は、「Goカンファレンス2024へのゴールドスポンサー参加とスポンサーブースの成長の軌跡」で、ブース出展の準備や当日の様子をレポートしています。
3つ目は、「新しい挑戦を絶えず続けてきたーフロントエンドEM堀端さんの場合」というインタビュー記事です。フロントエンドチームのエンジニアリングマネージャー堀端へのインタビューを掲載しています。
4つ目は、「1000冊売り切れ！ 技術書典にゴールドスポンサーとして参加しました」というイベントレポートです。
最後、5つ目は、「和田卓人さんの勉強会から始まった読書会」という記事で、社内で行った勉強会と読書会の様子をまとめています。
また、採用中のポジションについてのお知らせです。現在、正社員のポジションとしてバックエンドエンジニア、フロントエンドエンジニア、データソリューションエンジニア、社内SEの4つのポジションがオープンしています。業務委託では、バックエンドエンジニアとシステム運用のポジションがオープンしています。フロントエンドの業務委託ポジションは現在オープンしていませんが、来年の初めごろに再度募集予定です。興味のある方はぜひご応募ください。
採用に関するページや、記事のURL、イベントアーカイブのYouTubeリンク、TwitterやConnpassの情報も後ほど共有しますので、ご覧ください。
これで第7回のミイダスTech LIVEは終了となります。ご視聴いただいた皆様、ありがとうございました。次回は12月に第8回を予定していますので、またご参加いただけると幸いです。それでは、本日はこれで終了となります。ありがとうございました。
アーカイブ動画はこちらをご覧ください。
ミイダス Techについて
ミイダスでは、定期的に技術イベントを開催しています。connpassやYouTubeチャンネルでミイダスのメンバーになった方には、最新の開催情報やアーカイブの公開情報が届きますのでぜひご登録をお願いいたします。
イベントページ：https://miidas-tech.connpass.com/
X(旧Twitter)：https://twitter.com/miidas_tech