初めてのdbt開発、あの時の自分に伝えたいこと

はじめに

株式会社PLEXでコーポレートエンジニアをしている石川です!
社内で使われている業務用システムの開発など、社内業務の改善に取り組んでいます。

この記事では、初めてdbtの開発を任された私が、どのようにアプローチしたか・つまずいたか・改善したかについて共有します。

対象読者

以下の項目に関心・該当する方におすすめの記事です!

  • 自社でdbtを導入予定で、dbt開発を任されたが何をすべきかわからない方

背景

社内業務の一貫として、社内のさまざまなデータソースに存在する企業情報を元に、BigQueryに企業テーブルを作成する必要性が生じました。

BIツール越しにSQLを書くことも考えましたが、下記の要件を満たすためにdbtを導入することになりました。

  • カオスなSQL爆誕を回避する
  • 今後の保守業務の負担の高さ
  • 他の社内ツールからも生成した企業テーブルを利用したい

課題

  • SQLは何となく書けるが、dbtは完全初見の私が1人で開発をする

実践、アプローチと改善について

1. ローカルでいじってみよう

dbtをまずはローカル環境で動かしてみることで、“触って学ぶ”アプローチが有効だった話です。
手を動かしながら概念を理解していくことが、自分にとって最も定着につながると実感しました。

良かったポイント

dbtで始めるデータパイプライン構築〜入門から実践〜を一番最初に読み、試したことです。

dbtとは? から始まり、dbtの概要をざっと理解できます。
ざっくりdbtについて記載すると、ELTのアプローチにおける「T」層の部分を担います。すなわち、データの変換が責務です。

当時の私もたまたまこの記事と巡り会い、ローカルで手を動かしたのはとても良い選択でした。
公式ドキュメントをもとに作成されたこの記事は、「dbtとは何か?」の手助けとなり初手やるべきこととしてベストだと思います。

今思うと改善できたポイント

dbtで始めるデータパイプライン構築〜入門から実践〜を一度試して、後半の紹介をさらっと目を通して終わらせてしまったことです。

後半部分のdbt向けPythonライブラリのご紹介にライブラリの紹介などが記載されています。
ブログ後半にも記載していますが、言わずもがなdbtでもライブラリ利用が開発効率性を大幅にあげます。

なのでdbtとは何か?のイメージを掴むだけで終わらせるのではなく、「〇〇できるライブラリあるんだー」と雰囲気を知るためにも、一度は目を通すべきでした。

2. dbtベストプラクティスに目を通そう

「公式が言っている正解」を先に知ることで、設計や命名での迷いがぐっと減ります。
やみくもに試すのではなく、ベストプラクティスを押さえた上で判断できるようになったのは大きな収穫でした。

良かったポイント

ローカルで手を動かした後、dbt公式のベストプラクティスガイドを読んだことです。
先ほどの記事を見たからと言って、dbtを全て理解できるわけではありません。

「staging・marts層のSQLファイル名は何がよくて、何が悪いのか?」であったり、「baseフォルダはいつ作るべきなのか?」など深掘り知識を付けるには、公式ドキュメントを読み込むしかないです。

特にフォルダ構成のあるべき姿を、最初のうちに見てイメージをさらに固められたのが良かったです。
また、staging層やmarts層に求められている責務や、joinはどの層でやるべきなども書いてあるため、初見のdbt開発でもレールに従って開発ができます。

今思うと改善できたポイント

dbtのフォルダ構成・命名規則に問題はないが(運用上支障は出てない)、ymlファイル周りのコードが膨れ上がった際にどういうアプローチを取れば良いか、事前に公式ドキュメントを読み込んでイメージを作っておくべきでした。

弊社のstaging層の一部抜粋ですが、_{source}__{entity}s.sql公式ルールに従って設計いたしました。

bqgcsでフォルダ分けしてますが、ファイル名にそもそもソース元を記載してるので、なくても良いのかなと運用してから気づきました。

models/staging
├── bq
│   ├── _bq__models.yml
│   ├── _bq__sources.yml
│   ├── stg_bq__dm_logs.sql
│   └── stg_bq__zip_codes.sql
│
│
└── gcs
    ├── _gcs__models.yml
    ├── _gcs__sources.yml
    ├── stg_gcs__companies.sql
    └── stg_gcs__geographical_coordinates.sql

一部抜粋なので、sqlファイルが少ないですが、本来は数倍以上あります。 実装当初の名残で各ymlファイルに全てメタ情報を詰め込んでいるため、800行近くあります。

とはいえ社内でのdbt知識に差があるため、1つの箇所に情報がある方がたどりやすいかと思い、当初の設計のままになっています。
いつかリファクタリングを行いたいと思ってます。

3. dbt Packagesの存在を知ろう

便利なライブラリを知らなかったせいで、手作業・重複コードが増えてしまった話です。
スター数が少ないからといって信用しないのはもったいないです。

良かったポイント

反省点多数。最低限dbt-utilsを導入していたのは良かったです。

今思うと改善できたポイント

当時の私は、dbt関連のライブラリのスター数が基本低いため(1000以下が多かった)、あまり利用しない方が良いのかと考えてました。

ですが、dbtの開発を進めていく中で、色々なブログでよく聞くpackage(dbt-external-tablesdbt-osmosis)も、スター数が少ないものが多く、無駄な重複するコードをたくさん量産してしまったのが失敗点です。

なので、一から始める場合は、下記のライブラリには最低限目を通して、導入するか検討すべきだったと思います。

  1. dbtモデル開発時の便利関数やテストが豊富
    dbt-utils

  2. expect_column_to_exist など、データ品質チェックに特化した豊富なGenericテストが多数
    dbt-expectations

  3. モデル定義(ymlなど)を自動生成・保守できるツール。手動管理の負担を大幅に軽減
    dbt-osmosis

  4. dbt Labsのベストプラクティスに基づいて、命名や構成をチェックし、ソースコードの品質を担保
    dbt-project-evaluator

  5. dbtプロジェクトのデータの可視化・アラート・監視などを可能に
    elementary-data/elementary

  6. GCS・S2など外部データをテーブルとして定義可能
    dbt-external-tables

4. メタデータを管理しよう

メタ情報の整備は地味だけど重要です。手動管理は非効率なので自動化できるとすごく楽になります。
ymlファイルの記述を毎回手でやっていた当初の自分に「自動生成できるぞ」と教えてあげたいです。

良かったポイント

手間ではあるが、sources,modelsのymlを毎回定義していたのはよかったです。

今思うと改善できたポイント

手間な作業をもっと効率的にできないか? の視点が抜けていたことです。
dbt開発当初、コピペの連続でymlファイルを定義してました。
ですがdbt-osmosisという、とても便利なライブラリがあります。(プロジェクト後半で存在を知りました。)

dbt-osmosisについての説明は記事が多く存在するため割愛します。
いくらdbtの設計が綺麗でも使われるテーブルを生成しなければビジネスに何も影響がありません。
利用者を増やすためにもメタデータの豊富さは必要不可欠です。

特にdbt LabsがSDF Labs を買収したことにより、dbt-osmosisの必要性は今以上に上がると考えます。
カラムリネームはもう怖くない!dbt‑osmosisを超えるSDFの挑戦 の記事が大変参考になります。

5. awesomeを見よう

他のdbtプロジェクトを見ると、自分たちの設計や実装に活かせるヒントが山ほどあります。
特にmacroの実装例やフォルダ構成は、ベストプラクティスと合わせて学ぶと設計の視野が広がります。

良かったポイント

dbt公式でjaffle-shopディレクトリ構成以外にも、他のdbtプロジェクトの事例がないか検索しawesome-public-dbt-projectsawesome-dbtに辿り着き、どのような実装を行っているのかを知れたのは良かったです。

dbt公式のベストプラクティスに基づいてないような場合もありますが、フォルダやファイル名の切り方など色々な角度から学習できます。
macro層や実装方法では、mattermost-data-warehouseの書き方を参考にしたりしました。

Jinja自体初見だったため、dbtの文法なのかJinjaの文法なのかわからず何も分からなかったので、helpers.sqlSQLコードを見たりして、書き方の一例としてインプットしてました。

今思うと改善できたポイント

特段ないです。良い視点で情報収集できたかと思います。

6. テストを書こう

dbtにも“制約に近い”テストが存在し、使うことでデータ品質を担保できます。
SingularテストとGenericテストの違いを理解しておくと、最小工数で最大の保守性を得られます。

良かったポイント

改善点多数あり。テストの認識を間違えていました。

今思うと改善できたポイント

Singularテストのような、一種のDB制約のようなものが機能として存在していたことを見落としていました。  

dbtのtestには大きく分けて、SingularテストGenericテストがあります。
Singularテストはtestsディレクトリ配下に定義する下記のようなものです。
一例ですが、法人番号(corporate_number)がnullのレコードが存在してると落ちるテストです。

## tests/test_companies_corporate_number_not_null.sql

select
  id,
  corporate_number
from {{ ref('companies')}
where 
  corporate_number is null

私がdbt開発を行ってる際、知識不足で「テスト = 上記のようなSQLを毎回書くもの」と勘違いしており、dbt自体開発が完成して、運用した後に書く判断をしてしまいました。 これは大きな反省点です。
本来ならば、作成したテーブルで確実にnullを許容しないカラムには絶対テストを書くべきでした。

ここでGenericテストが登場です。

  • unique
  • not_null
  • accepted_values
  • relationships

の4つがあり、「ymlの定義だけで」テストを実装できます。
先ほどのSingularテストを書き換えると下記のようになります。

version: 2

models:
  - name: companies
    columns:
      - name: corporate_number
        tests:
          - not_null
          - unique // 一意であることも確認したいなら

当時の実装では、テストを一切書いていなかったため、nullを許容すべきではない箇所にnullが入ったりと、開発以上に調査時間が増えてしまいました。
なので、最低限Genericテストは書きましょう。時間がなくても。

参考: dbt公式-テストについて

最後に

弊社では各事業部でエンジニアを募集しております! 気になるポジションあればお気軽にお問い合わせください。一緒に働きましょう。

弊社の各事業部でエンジニアを求めています!

SaaS

100兆円規模のインフラ産業の課題解決に挑戦|業務支援SaaSのテックリード - 株式会社プレックス

急成長する業務支援SaaSのソフトウェアエンジニア・リードエンジニア - 株式会社プレックス

PLEX JOB

インフラ産業の人材課題を解決 | フロントエンドの技術を牽引するテックリード - 株式会社プレックス

インフラ領域で日本を動かす仕組みを作るスタートアップのエンジニア - 株式会社プレックス

コーポレート

オペレーションの効率化によって事業成長に貢献するコーポレートエンジニア - 株式会社プレックス

Devin × Renovate 運用効率化の第一歩 : 一次レビューをAIに任せてみた話

はじめに

こんにちは。PLEXPLEX JOBの開発を行っている田中です。
前回は、同じ開発メンバーの小松さんが「DevinにE2Eテストさせてみる」という記事を執筆しましたが、今回はその続編として、Devin活用シリーズ第2弾をお届けします!

概要

Devinの導入を検討した背景としては、チーム内で開発効率を高める手段として、Devinを活用したいという声があったためです。
私の所属しているPLEX JOBチームでは、1スプリント(1週間)の中で約10%程度を技術的負債の解消に割り当てています。
また、弊社ではライブラリの依存関係の更新にRenovateを採用しており、対応もその一環になっています!

Renovateをマージする際には、一般的には以下のようなプロセスを踏む必要があります。

①自動更新対象のパッケージに関して、該当バージョンのリリースノートを確認し、破壊的変更が含まれていないかを確認する
②破壊的変更がある場合は、プロジェクトのコードに影響があるかどうかを調査する
③影響があると判断した場合には、既存の動作を維持するためにソースコードの修正や対応を行う

①の破壊的変更がなければ、それほど時間は掛からずにマージが可能と判断できますが、③まで作業を行った場合は、影響範囲によってはかなりの工数がかかることになります。
そこで今回、Devinに一次レビューを依頼し、「マージしても問題ないか」の判断材料を挙げてもらうことで、開発者の負担を軽減できるのではないかと考え、試してみることにしました。

対象読者

  • Devinを使ったことはないが、実際にどこまで使えるのか興味がある方
  • AIを活用して日々の業務の時短を行いたい方
  • Renovateをチーム開発に導入しているが、PRのレビュー対応が負担になっていると感じている方

DevinにPRレビューを任せてみた結果

プロンプトや具体的な指示の出し方については、以下の記事を参考にしつつ、今回の用途や対象となるリポジトリに合わせて、個別にカスタマイズを行いました。

developers.freee.co.jp

drbアップデートのRenovate対応
drbのマイナーアップデートになりますが、Devinの一次レビューをRenovateのPRにコメントさせてみました。 次の観点で、十分な精度のあるアウトプットが得られたと感じています。

  • 視覚的にレビュー内容が見やすい
  • テストの実行結果が対象の件数を明記した上で、全テストが成功していることが分かる
  • リリースノートやCHANGELOGの破壊的変更を確認し、分析した上でマージ可能なことが分かる

Devinでレビューさせる対象PRの選定基準

対象となるPRの条件

  • 比較的ボリュームの小さいライブラリかマイナーアップデートのライブラリを対象

対象のPRに対するDevinの役割

  • フロントエンド
    • 破壊的変更の調査
  • バックエンド
    • 破壊的変更の調査
    • アップデート後のローカル環境RSpecが通るかの確認
      • テストが通らない場合は、失敗しているテストケースと修正案まで提示

担当者の対応事項 / マージOKかの判断基準

プロンプト設定

Devinの回答精度を向上させるには、何よりプロンプトのチューニングが一番重要です。
DevinはOpenAIのGPT-4をベースに設計されています。
そのため、Open AIが出しているベストプラクティスをもとにプロンプトのチューニングを行いました。

どれも重要ですが、私が特に気を付けていたのは下記になります。

  • 構造を理解しやすいように、コンテキストを明確に区切る
  • 具体的なすべきことや例を提供する
  • 欲しい出力形式を明確にする

これらのポイントを意識することで、回答精度は大きく向上しました!

プロンプト定義

Devinに的確な一次レビューを行ってもらうため、以下のようなバックエンド用のプロンプトを用意しました。

## 対象PR

(URLを入力する)

## 注意事項

- 回答はすべて日本語で行う
- 実際の実装に影響がなければ破壊的変更への対応が不要な分、レポートは簡潔に表現する
- あらゆる一次情報源(コード、コミット履歴、変更履歴等)を参照する
- 全ての引用・参照には必ず元のURLを添付する
- コミットとマージは行わない
- 最後に「対象PR」のコメントとして、以下のようにまとめる
  - (Devinが過去に書いたコメントの中で見本となるリンクを追加)


## 依頼内容

- 「対象PR」の依存関係更新に問題がないかの確認を行う
- 「対象PR」のタイトルからでなく、ファイルの更新内容を元に調査を行う
- 現在のバージョンと更新後のバージョン間の破壊的変更(breaking changes)を確認する
- CIが失敗している場合は、CIを直すためにローカルで検証し、コミットは行わず修正案の提出だけをする
- バージョン更新後の動作確認を行う
- バージョン更新後docker compose run --rm web bundle exec rspecを実行してRSpecのテストが問題ないかの確認を行う

## 破壊的変更への対応
破壊的変更が見つかった場合:

- 具体的な実装パターンへの影響例(ある場合は実際のコード例)
- 互換性維持のための具体的なコード修正案
- プロジェクト全体への影響度合い
- ただし、ライブラリのバージョンアップデートだけで問題が解決する場合は修正案不要

## レビュー結果の提示

- 必ず単一のコメントにまとめて提供
- 結論を最初に明示(承認または修正必要)
- 調査に使用した全てのドキュメント・ソースへの直接リンク
- コード例はマークダウン形式で、行番号参照付きで
- 分析は事実に基づき、重要な問題に集中

## 調査結果 : 

- 下記の観点で最後にまとめる
    - 結論
    - 脆弱性の詳細
    - パッケージ更新の適切性評価
    - プロジェクトへの影響
    - 調査方法
    - 参考リンク
- 調査結果は「対象のPR」コメントする

フロントエンド側のプロンプトは、破壊的変更の調査のみに限定しているため、RSpecのテスト確認の一文を削除して使用しております。

Devinの2パターンの運用

  • Slackに直接プロンプトを入力して実行
  • Playbooksからマクロを呼び出して実行

Slackから実行

Slack上で「@Devin」を入力した上で「プロンプト定義」のプロンプトを入力します。
「対象PR」のURLだけはそれぞれのリンクを貼り付けて実行するようなイメージになります。

Playbooksから実行

Playbooksとは、繰り返し実行されるタスクのプロンプトを定義するための機能になります。
作成したPlaybooksには「プロンプト定義」のプロンプトと同じものを貼り付けします。

「対象PR」

{{ pr_url }}

「対象PR」のURLを貼り付けるところだけ動的にしますので、この部分だけ修正が必要です。

その上でPlaybooksから「Use Playbooks」ボタンを押下し、以下のような画面で入力を行うことで実行できます。

Playbooks実行画面

好みになりますが、Slackから実行する時の方が、直に貼っている分、プロンプトの内容をより網羅的に回答している印象です。 Playbooksはコピペのミスがなくなったり、入力のテキストが少ないという利点があるので、両方試してみて使い勝手が良い方法を導入して頂ければと思います。

コスト

Devinを使う上でACUでどれくらい一つのタスクで金額が消費されたかの目安を知ることが重要です。
ACUとは、Devinが作業を行う際に消費する計算リソースの単位になります。

実際にどれくらい使ったかはDevinのUsage Historyでセッションごとに確認することができます。
弊社ではTeamプランを契約しており、1ACUあたり2ドルかかります。
おおよそ軽いRenovateなら1〜2ACU(300円~600円)ぐらいに収まります。
この程度のコストであれば、試してみる価値は十分にあると感じています。

Devinは実務で使えるか

結論としては、範囲を限定的にすれば実務で使えるかなと思いました。
例えば画面のUIの確認はDevinの苦手な分野かなと考えています。
Material UIのメジャーアップデートでプレビュー環境でアイコンの表示崩れや画面の動作確認などもさせてみましたが、網羅性にはやや疑問が残る印象でした。
結果としてフロントエンドは、作業者が実際にリグレッションテストを行うべきかなと思い、破壊的変更のレビューのみに絞りました。

とはいえ、Devinの一次レビュー活用は、Renovateの対応工数を削減する選択肢としてはかなりアリかなと思いました!

今後の運用方針

今回は私が中心となって検証を行いましたが、来月からは運用ルールを整備し、Renovate対応に関してはDevinによる一次レビューを必須とする試験運用をPLEX JOBチーム内で開始する予定です。

具体的には、各メンバーに検証対象とするRenovateをアサインし、スプレッドシートにDevinの検証結果を記入してもらいます。
メンバーからの評価や所感を聞くことで更に改善できることも見えてくると思います。
後々はしっかり本格的な運用まで結びつけたいと考えています!

最後に

弊社では各事業部でエンジニアを募集しております! 気になるポジションあればお気軽にお問い合わせください。一緒に働きましょう。

弊社の各事業部でエンジニアを求めています!

SaaS

100兆円規模のインフラ産業の課題解決に挑戦|業務支援SaaSのテックリード - 株式会社プレックス

急成長する業務支援SaaSのソフトウェアエンジニア・リードエンジニア - 株式会社プレックス

PLEX JOB

インフラ産業の人材課題を解決 | フロントエンドの技術を牽引するテックリード - 株式会社プレックス

インフラ領域で日本を動かす仕組みを作るスタートアップのエンジニア - 株式会社プレックス

コーポレート

オペレーションの効率化によって事業成長に貢献するコーポレートエンジニア - 株式会社プレックス

DevinにE2Eテストさせてみる

はじめに

こんにちは。PLEXPLEX JOBの開発を行っている小松です。

E2E テストのつらさ

E2E テストってみなさまどのように行っているでしょうか。なんだかんだ人力に落ち着いた、というチームも少なくはないのかなとも思います。
E2E テストにおいて人力の優れている点は何と言っても UI への適応力です。既存のテストツールは UI の入力フォームに必須項目が一つ増えればたちまちテストシナリオが壊れてしまいますが、人は「ん?こんな入力項目あったけな?こんな感じでいい?」といい感じに入力してくれます。人ってすごい…。

今回の目論見

今回は弊社でも検証導入中の Devinくんにブラウザを操作してもらい、WEB アプリの E2E テスト(UI テスト)を行います。
今回の E2E テストの目的というか目論見は

  • E2E テストの工数を減らしたい(人間はサボる!)
  • E2E テストツールのメンテナンス工数を減らしたい

あたりになります。
また Devin というキーワードでいうと、割と初学者向けの話になるかなと思います。

  • Devin で何ができるか情報収集中の方
  • 導入したけど ACU が余っている

みたいな方ですと、何かの参考になるやもしれません…!

我々のDevin 開発環境について簡単に

Devin マシンもメンバーの開発環境とほぼ同じ

実行環境の構成

今回 Devinくんには弊社の PLEX JOB というサービスの E2E テストを行ってもらいます。

簡単に Devinくんの開発環境の構成は以下のような形です。

repos/
├── plexjob_api/   # Ruby on Rails の API
└── plexjob_web/   # Next.js のフロントエンド

API は Docker compose で立ち上げ、フロントエンドは Devin マシンの node.js に直接立てています。これは我々エンジニアの開発環境の構成と全く同じで、docker-compose.yml も社内のエンジニアたちが利用しているものをそのまま利用しています。
また、テスト結果を確認できるようにpostgresql-clientをインストールしています。

今回のテストはここで立ち上げたローカルホストに Devin の持っているブラウザからアクセスしてもらい、実際にブラウザを操作してもらって行います。

Devin実行環境の様子

実践、Devinくん に E2E テストはできるのか

結論

ジュニア以上(?!)にはやってくれる。
課題はありつつも(後述)、個人的には期待以上の働きを見せてもらいました。いや、むしろ、君、ジュニアってレベルじゃないんじゃない?

検証方法

テストシナリオ

今回テストシナリオは人にとっての読み易さと Git での管理のし易さからマークダウン形式で記述しました。
元々社内でリグレッション用に持っていたテストシナリオはスプレットシートだったのですが、それを ChatGPT くんにざっとマークダウンに直してもらい、最後は私の方で調整しました。

できたものの抜粋が以下。
何度か検証してみて、Devinくんは手前に置いた内容に重きを置いてくれそうだった為、最終提出物として欲しいエビデンスに関しては冒頭で述べる事にしています。ただし、今回のテストケースではエビデンスの指示はしたものの報告フォーマットの指示までは行っていません。

## 前提

http://localhost:3000/
へアクセスしてWEB画面を検証

## 会員登録+応募フロー(ドライバー)

### No.1 会員登録+応募(ドライバー)

#### 前提条件

- ログイン済の場合はログアウトしておく

#### エビデンス

テスト結果として以下を提出すること

- 今回の処理で登録されたusersレコードの内容
- 【期待結果】とされている画面のキャプチャ

#### 操作手順

1. **ドライバーの求人情報一覧(driver/)から任意の求人を選択する**
    -  選択「詳しくみる」ボタンをクリック
    - **期待結果:** 求人詳細画面へ遷移する

以下略

会員登録+応募を行い、「電話番号登録済みのエラーの確認」「応募完了の確認」と2つの結果を確認してもらいます。
今回はこちらをソースコードと同じリポジトリに同梱してテストを行います。

テスト開始

まず Devin くんには以下のような指示をしてみました。(今回 Slack のメンションをトリガーにテストを開始しています)

①plexjob_apiのブランチをfeature/data-maintenance-for-devinを変更して作業を始めて
②setup-pj-webの手順でplexjob_webのローカルホストを上げて
③docs/test_case/basics/01-01_job_entry.md
このファイルを確認してテストを実行してみてほしい。
③-1. まず一度テストケースを確認したら実行計画を教えて。(報告だけで承認は不要)
③-2. テストを実行して。

という指示を出します。
①でまず検証用のブランチに切り替えてもらいます。(Seedデータのメンテナンス、テストシナリオの配置を行いました)
②のsetup-pj-webはDevinのKnowledge機能に設定しているマクロです。ローカルマシンの立ち上げ方が記載されています。なくてもDevinくんはよしなにやってくれると思いますが、再現性の向上や消費ACU1の削減等が期待できます。
③テストシナリオファイルはGitでソースコードと一緒に置いて検証しました。

するとDevinくんからはまだできるか分からないけどとりあえずテストケースを読んでみるねという旨の返事がありました。

そしてテストケースを確認するとまあまあな確度でできるかも!と返事が来ました。
(私が「gogo」と茶々を入れてますが別に何も言わなくても続けてくれます)

この間WEBからはDevinくんの作業プロセスを除き見る事ができます。Devinくんのブラウザで実際にカーソルが動く姿を確認できます。
更に待つとテストが完了したようです。

画像からはカットしてしまいましたがテスト結果として求めているレコードの検索結果と期待した画面キャプチャを添付してくれました。
画面テストしての信頼性は申し分ないなと感じました。

課題点

今回完璧な仕事をしてくれたDevinくんですが課題点もなくはないです。

運用コストは組織の価値観次第かも

今回のテストシナリオは1つの求人に会員登録を伴った応募をするというものでしたが、これにかかったACUは2.5です。 現在PLEXではDevinをTeamプランで契約しており、その場合1ACUは2ドルで換算できます。なので応募テストにかかった費用はだいたい5ドル程度となります。
実運用で回すテストシナリオは簡易な求人応募シナリオに絞ってもこの5~6倍の規模になります。もちろん、会員登録を伴わないケースもあり費用が純粋に5~6倍になるわけではないですが、日常的にテストを回していく事を考えると費用対効果はもう少し検証が必要そうです。

逆に今回の検証では費用感以外は大きな課題も感じなかった為、ここが見合いそうな組織には現実的な選択肢になってくるかもしれません。

Tips

最後にこの検証で得られたTips的なものを共有します。
どれも人にテストを依頼したとしても通じるような話ばかりかもしれませんが。

ステップを踏んで実行させる、しかし実行許可は不要であることを明言

AIエージェントを使う際は共通することかもしれませんが、Devinくんもテストシナリオを読み込んだ後、実行計画を提出させた方がその後の実行制度が高くなるように感じます(大抵は言わなくても出てきますが)。
ただし、実行計画を提出した後、Devinくんが「この実行計画で実行して良いかな?」という許可待ち状態になることがある為、事前にユーザーの実行許可を待つ必要がない事を明言した方がよさそうでした。

テストする画面のURL、フォームの入力内容はなるべく具体的に指示をする

Devinくんの良さとしてファジーな指示でもテストシナリオが崩壊しないという点を冒頭で述べましたが、それでも指示はなるべく具体的な方がスムーズです。例えば「画面のフォームをすべて入力して」という指示でもどうにかなる時はなりますが、テストの精度やコストは具体値を指定した方が結果が良くなります。

エビデンスのデータフォーマットは具体的なSQLで指示する

画面テストを行う上でDevinくんにデータ構造を意識させるコストは勿体ないので、DBの登録値を提出させたい場合は提出用のSQLを用意すると期待値に近いテスト報告を受けることができそうでした。

複雑なHTML構造の操作は苦手

今回のテストで実行コストが嵩んでしまった要因であると感じているのですが、例えばラジオボタンやセレクトボックスを人間向けにカスタマイズしているような画面(素直なフォームと構造が異なる)の操作はDevinくんは若干苦手なのかなという印象でした。
逆にプレーンなフォームの入力、ボタンの押下などはあっさりこなしているように見えました。

最後に

弊社では各事業部でエンジニアを募集しております! 気になるポジションあればお気軽にお問い合わせください。一緒に働きましょう。

弊社の各事業部でエンジニアを求めています!

SaaS

100兆円規模のインフラ産業の課題解決に挑戦|業務支援SaaSのテックリード - 株式会社プレックス

急成長する業務支援SaaSのソフトウェアエンジニア・リードエンジニア - 株式会社プレックス

PLEX JOB

インフラ産業の人材課題を解決 | フロントエンドの技術を牽引するテックリード - 株式会社プレックス

インフラ領域で日本を動かす仕組みを作るスタートアップのエンジニア - 株式会社プレックス

コーポレート

オペレーションの効率化によって事業成長に貢献するコーポレートエンジニア - 株式会社プレックス


  1. ACU...(Agent Compute Unit)Devinの実行コストを数値的に表現した指標

【TSKaigi2025】TypeScriptが苦手な私を登壇へと導いた「たった1つの習慣」

はじめに

こんにちは。

株式会社PLEXでWebエンジニアをしている栃川です。

このたび、TSKaigi2025で「型推論の扉を開く―集合論と構造的型制約で理解する中級へのステップ」というタイトルで登壇いたしました。

この記事では、TypeScriptが苦手な私でも登壇者としてステージに立つことができた「たった1つの習慣」についてお伝えします。

※ 発表資料は記事の末尾にてご覧いただけます。

前提

私はTypeScriptに対する強い苦手意識があります。

というのも、これまで私はRuby(動的型付け言語)を得意としてきました。

TypeScriptは入社後に学び始めたものの、動的なJavaScriptの世界観に慣れた私には、TypeScriptはまるで異世界の言語に感じられました。

型エラーに遭遇するたびに調べものが増え、学習が停滞。小さなプロジェクトで何度もコンパイルエラーに泣かされ、「なぜ動かないのか」を腹落ちさせるまでに時間がかかり、自信を失う日々を過ごしていました。

その結果、TypeScriptの奥深さを知ることなくエラーを潰しては、そのまま業務をこなすだけ。 苦手意識ゆえにTypeScriptそのものが好きになれませんでした。

自分を変えた「たった1つの習慣」

では、どうしてプロポーザルを通し、ついには登壇できるようになったのか―― それは「日報をつける」というたった1つの習慣を継続したことです。

曽根さんの「強いエンジニアのなり方」という資料に出会い、私は日々の業務に自ら日報をつけることで、自分自身でフィードバックサイクルを回す習慣を取り入れました。

speakerdeck.com

この習慣を身につけてからというもの、ただエラーを潰すだけの日々から、そのエラーはなぜ起き、それが何を防ぎ、どんな思想に基づく設計なのかまで深掘りすることを、自然とできるようになりました。

毎日知識を消化せずにストックしていくことで、次第に「今の自分に何が足りないか」や「次もっとよくするために何ができるか」が見えてきて、自らフィードバックサイクルを回せるようになるのです。

参考: **強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day - Speaker Deck

結果として、単なる知識が経験に紐づいた知識へと変わり、自らの血肉になっていきました。

なお、今回通過したプロポーザルの内容も、まさに日報で蓄積した気づきや考察をまとめただけのものです。

日報を書き続けておけば、登壇のようなチャンスが来たときに、すでに整理された材料をもとに初動を素早く進められるのも大きなメリットです。

日報はどう書くのか?

私の日報はシンプルに「起きたこと」と「考察」を記すだけです。

ポイントは、形式にこだわらず思いの丈をとにかく吐き出すことが大切だと考えています。

例えば、以下のように書き連ねます。(社内でも初公開のため非常に恥ずかしい笑)

誰にも見られない前提なので、支離滅裂でも間違っていても問題ありません。 重要なのは、書くことで思考が整理され、自然に内省・Nextアクションへつながっていくことです。

また、毎日書くことにこだわりすぎないほうがいいです

毎日必ず深い学びが得られるわけではありませんし、あまりに「毎日書かねば」と意気込みすぎると、一度書けなかっただけで「もうダメだ…やめよう!」となりかねません。完璧を目指さず、まずは小さな一歩から始めて、自分のペースでゆるく継続していくことが大切だと私は思っています。

週報じゃダメか?

個人的にはおすすめしません。

(実際にやってみましたが)週報は進捗共有になりがちで、私のように忘れがちな人間には、大した内省につながらないことが多いです。

1日ごとに、その日の出来事や感じたことが鮮明なうちに日報を残すほうが、振り返りの精度は段違いに高まります。また、そうした振り返りを続けることで、成長のスピードが著しく上がるのもいうまでもありません。

さらに、日報という粒度の小さい記録のほうがサッと書きやすく、習慣化しやすいメリットがあります。週報だと情報量が多くなりがちで、書くハードルが一気に上がってしまいます。

こうした理由から、週報より日報のほうが継続しやすく、得られるメリットも大きいと言えます。

最後に

今回の登壇はわずか5分という短い時間でしたが、本当に楽しい経験でした。

Xで反応をいただいたり、元同僚から連絡をもらったり、「集合で捉えるという考え方を知らなかった!参考になった」と感想を聞けたことが嬉しかったです。

また登壇をきっかけに、休憩室で他社DevRelの方々から声をかけていただき、「技術広報のキャリア」や「他社のエンジニア採用事情」、さらには「ブログ運営のコツ」など、普段は聞けない貴重なお話を伺うことができました。こうした交流から新たな視点やインスピレーションを得られたのも、何よりの収穫です。

エンジニアイベントはやはり刺激と学びに溢れていますね!

次回はKaigi on Rails2025に参加しようよ思います!さらなる挑戦に向けて準備を進めいきます!

登壇資料

speakerdeck.com

宣伝💡

弊社では各事業部でエンジニアリングのポジションを募集しておりますので、気になる方はぜひ下記のポジション一覧をご覧ください。

私宛にでももちろんOKです!Xなどでぜひお声がけください!(転職を考えていない方でも歓迎します)

弊社の各事業部でエンジニアを求めています!

SaaS

100兆円規模のインフラ産業の課題解決に挑戦|業務支援SaaSのテックリード - 株式会社プレックス

急成長する業務支援SaaSのソフトウェアエンジニア・リードエンジニア - 株式会社プレックス

PlexJob

インフラ産業の人材課題を解決 | フロントエンドの技術を牽引するテックリード - 株式会社プレックス

インフラ領域で日本を動かす仕組みを作るスタートアップのエンジニア - 株式会社プレックス

コーポレート

オペレーションの効率化によって事業成長に貢献するコーポレートエンジニア - 株式会社プレックス

私の連絡先はこちら

https://x.com/Web_TochiTech

【入社エントリ】成長のレバレッジと人生の揺らぎを求めて by tetty

【入社エントリ】成長のレバレッジと人生の揺らぎを求めて by tetty

転職しました

はじめまして!こんにちはこんばんは!フロントエンドエンジニアのtettyです。

株式会社プレックスに転職してから半年と少しが経過したので入社エントリを公開します!

また、転職前に相談やお誘いいただいた皆様にはこの場を借りて改めて感謝申し上げます。

本当にありがとうございました!

株式会社プレックスについて

弊社は2018年に創業した現在8期目のスタートアップで、日本を動かす仕組み作るというミッションを掲げている企業となります。

事業においてはエッセンシャルワーカーの人材紹介や採用支援に加え、SaaS事業やM&A仲介事業など複数の新規事業を展開しています。

概要だけではよくわからないかもしれませんので、ほんの一部ですが弊社のすごいポイントを紹介させてください!!!

2024年度(7期目)の売上総利益(粗利)60億円突破!㊗️㊗️㊗️

2024年度の売上総利益60億突破

日本最大級の運送|建設|技術職の求人サイト「プレックスジョブ」 累計登録者数が100万人を突破

prtimes.jp

建設業に特化したクラウドサービス「サクミル」、リリース1年9ヶ月で正式利用企業数が1,000社を突破

prtimes.jp

M&A支援機構が成約事例・実績を初公開 ー 吉野家ホールディングス × キラメキノ未来の対談も掲載

prtimes.jp

"組織の壁"を越えて、気づいたら420人規模になっていたベンチャーが、秘かに大事にしていること

note.com

いいですか?この会社は8期目ですよ?8期目。

しかも、ファイナンスもノンエクイティのモデルを取っている上で毎年度、各事業部が、超超飛躍的に成長しています。 めちゃくちゃすごいです。

はて、ノンエクイティとは?という方はぜひ弊社代表の記事をご覧ください。

comemo.nikkei.com

経歴

弊社の紹介は置いて、簡単ですが私の経歴をご紹介します。

  • 2016年: 日本工学院八王子専門学校のITスペシャリスト科入学
  • 2017年: 開業し個人事業主としてWeb制作やWebサービスの受託開発を行う
  • 2018年: Kakedasの共同創業者兼CTOとしてプロダクト開発から開発組織の組成(現在MA済)
  • 2020年: 合同会社DMM.comに20新卒で入社
    • 動画事業全体のTechnicalSEOのディレクションと開発を担当
    • DMMTV フロントエンド領域の立ち上げメンバーとして参画
    • 上記プロダクトにおいてテレビ・ゲーム機向けのアプリの開発からローンチ、その後の改善・機能拡充をTech Leadとして従事(一部マネジメントを担当)
  • 2024年9月: 株式会社プレックスに転職

転職経緯

前職での葛藤

もっとハードな環境かつハイコミットなメンバーがたくさんいる高い基準値の環境で、いち技術者として事業開発を楽しみたいという思いが常にあったことが葛藤としてありました。

しかし、次なるキャリアとしてより大きなスケールでエンジニアリング領域を強くしていく必要性があり、自身がプレイヤーから離れた状態でスケーラブルなチームを組成をすることや開発メンバーに対して今以上のフィードバッグをすることが困難になっていくと感じていました。

現場への未練もあったのだと思います。

(※前職は良い仲間や仕事にも恵まれていたのでとても働きやすい良い環境でした!)

転職を決意

そんなこんなでプロジェクトが落ち着き、当時担っていたマネジメントやテックリードの委譲・引き継ぎが完了したタイミングで転職をしました。

理想的なリーダー像とは何か、事業の開発組織においてよい環境や自分にとってのマクロな楽しさとは何かを自身に問うためにも、人生で最も苦しみ楽しんだスタートアップという環境に戻ってきたというわけです。

戻ってきた企業がプレックスだったのですが、創業時からプロダクト開発のお手伝いをさせていただいておりました。

圧倒的な企業の成長と若手を中心とするハイコミットな仲間たち、そしてそれらが醸成される再現性の高い環境が生まれ大きくなっていくのを肌身に感じ、開発本部の立ち上げと新規事業への参画を機会に転職を決意しました。

プレックスでやっていること

主にサクミルのフロントエンドのリードおよび開発を行っております。

sakumiru.jp

サクミルとは

サクミルは建設業に特化したクラウドサービスとして、現場・管理・経営層が一体となって生産性の向上や負担を軽減を目的に開発されたサービスです。

このサービスは案件管理をはじめとしてスケジュール・日報の管理だけでなく、見積書や請求書の作成/原価管理・入金管理など、管理者と現場間で情報を分断することなく一元管理できます。

建設業に特化したクラウドサービス「サクミル」

私がこの半年で主に担当したものでいうと、フロントエンド領域を中心にサービス全体の権限管理機構やメンバーの予定を管理・閲覧するカレンダー機能(例えばGoogleカレンダーのような粒度をまるっと作るイメージ)、その他に開発基盤周りやDatadogRUMを用いたモニタリング環境の構築・改善などを行いました。

技術者としての面白ポイント

プレックスで半年働いた上で私が面白く魅力だと感じたポイントを一部紹介します。

その① オールインワンSaaSをつくっているよ!

世の中には様々な業務効率特化型のSaaSが生まれていますが、サクミルは特化型ではなくオールインワンSaaSを目指しています。

よって、開発する機能群が単体でサービスとしてマネタイズできるような機能となっており、機能開発のタスク1つ1つが非常にハードかつ技術者としても事業ドメインを作る人間としても成長やこだわり・やりきるためのディスカッションとチャレンジを求められるようになっています。

つまり、1つ1つが持ちうるスキルの切り売りではできないものばかりなのです。

その② 技術者として純粋なフィードバックを受けられるよ!

また、弊社が毎年度成長をしている大きな要因としてビジネスチームがめちゃくちゃ強いんですよ。

定量定性をやりきり事業と売上を毎年度大きく伸ばしているビジネスチームやマネージャーの存在によって、我々技術者の作ったものがそのまま定量定性の結果に現れるという純粋なフィードバックを得られることが我々をより成長させる確実な材料であると感じています。

その③ 打席がめちゃくちゃ多いよ!

弊社は各事業が圧倒的にスケールをしているだけではなく、新規事業もメガベンチャーにいた時とは非にならない頻度で生まれます。

技術者にとっては0から100までの機会があり打席があるということになるので、経験したことのないフェーズや練度を高めたいフェーズの開発に携わることのできる打席が比較的多くあります。

そのため、色々な景色をみて経験をしたいというモチベーションのある方は面白く感じるポイントだと感じますね。

これから転職を考えている人や今の環境に悩んでいる人へ

まずは数ある記事の中からここまで読んでくださりありがとうございます。

最後に、入社エントリではありますが私から1つお伝えたいことがあります。

皆さんは自身の成長要因はどのようなものだと考えているでしょうか。

実際、様々な要因がありますが私は一番の理由として”仕事をやりきった先に得られる成功失敗の体験が純粋な結果として示され、次のモチベーションや打席につながるプロセスを構築できること”が成長のレバレッジとして最も大きいと考えています。

これはサラリーマンとして企業で働く身としては個人で継続・完結することが非常に困難であるものです。 つまり、自身がどの環境でどういう基準値を持った仲間とどういうスタンスで働くかは非常に重要です。

人生において多くの時間を有する仕事という時間をより楽しく、より熱を持って、自身の基準値をアップデートしてもらえる確信が弊社にはあります。

安定こそすばらしいものですが、自身の成長にレバレッジをかけてみたいという方はぜひ弊社で揺らぎを感じてみませんか?

おわりに

弊社では各事業部でエンジニアリングのポジションを募集しておりますので、気になる方はぜひ下記のポジション一覧をご覧ください。

私宛にでももちろんOKです!WantedlyやXでぜひお声がけください!(転職を考えていない方でも歓迎します)

弊社の各事業部でエンジニアを求めています!

100兆円規模のインフラ産業の課題解決に挑戦|業務支援SaaSのテックリード - 株式会社プレックス

急成長する業務支援SaaSのソフトウェアエンジニア・リードエンジニア - 株式会社プレックス

インフラ産業の人材課題を解決 | フロントエンドの技術を牽引するテックリード - 株式会社プレックス

インフラ領域で日本を動かす仕組みを作るスタートアップのエンジニア - 株式会社プレックス

オペレーションの効率化によって事業成長に貢献するコーポレートエンジニア - 株式会社プレックス

私の連絡先はこちら

https://www.wantedly.com/id/tetty

https://x.com/tetty0217

勝手に語る、事業と組織の急成長期を支えるエンジニア組織と開発環境

入社してもうすぐ2年半経ちますが、一向に声がかからないので Claude 3.7 Sonnet にインタビュワーになってもらい、今回、勝手にインタビュー記事を作ることにしました。記事作成にあたっては本家のインタビュー記事の構成を参考にしています。インタビューには誠心誠意答えたので、最後まで読んでもらえると嬉しいです!

本家のインタビュー記事↓ plex.co.jp

注)本コンテンツの一部は Claude 3.7 Sonnet を使用して作成しました

バックエンドからフロントエンドまで幅広く担当し、ダイレクトリクルーティング事業の成長を技術面から支えてきた池川に、プレックスのエンジニア組織や開発環境の特徴、現状の課題や今後の展望について話を聞きました。

池川 隆紀(いけがわ たかのり) 開発本部 ソフトウェアエンジニア 2022年12月に株式会社プレックス(以下、プレックス)に入社。エッシェンシャルワーカー向け人材紹介・求人媒体サービス「プレックスジョブ」の開発に携わる。バックエンド、フロントエンドの両方の開発経験を持ち、2025年4月からプレックスジョブ開発チームのリーダーに就任。

1)異業種からエンジニアへ、そしてプレックスでの挑戦

ーまずは、エンジニアとして歩んできた経歴について教えてください。

新卒では地元の地方銀行に入行し、主に個人・法人営業を行っていました。その後、受託開発の企業にエンジニアとして転職し、弊社がエンジニアとして2社目です。

ー異業種からエンジニアへの転身について、きっかけがあれば教えてください。

エンジニアに転身した2019年はエンジニア転職のブームみたいなものが始まった頃だったと思います。もともとプログラミングに興味があったことに加えて、私自身、エンジニア転職する前にプログラミングスクールに通ったのですが、そのスクールの在校生が書いた note を見て自分でもいけるんじゃないかと勘違いしたのがきっかけでした。

ープログラミングスクールからエンジニアへの転身は、ご自身にとって大きな挑戦だったと思います。その後、プレックスに入社されるまではどのような経験を積まれたのでしょうか?

プログラミングスクール卒業後は地元で受託開発をメインで行っている企業に就職しました。そこではバックエンドエンジニアとして教育系の企業が扱っている授業支援システムの開発や地方公共団体向けの防災アプリの開発に従事しました。また、途中からは発注元の企業に出向してプロダクトマネージャーとして授業支援システムのリプレイスを行いました。

ープレックスに入社しようと思ったきっかけや、プレックスの何に魅力を感じたかを教えていただけますか?

正直、転職活動する前はプレックスのことは知りませんでした。エンジニア向けの転職サービスに登録したところ、スカウトをいただいたのがそもそものきっかけです。カジュアル面談や面接を行う中で、①がっつり開発ができる、②自社でプロダクトを持っている、③社会的に意義のあるサービスを展開している、ことに魅力に感じ入社しようと思いました。もちろん、面談や面接で話した社員の方々も魅力的でした。

ー入社後はどのようなことに取り組んできましたか?

入社後から今まで一貫して「プレックスジョブ」というエッシェンシャルワーカー向けの人材紹介・求人媒体サービスの開発を行っています。入社後、しばらくして求人サイトのデザインリニューアルをしたのは今でも覚えています。その他だとスカウトの改善や新規サービスのリリース、インフラ移行など、これまでに多くの開発に携わらせていただきました。新規サービスは最近クローズしてしまったのですが、実装から検証までのサイクルが早いのもプレックスの特徴だと思います。

また、開発だけでなく DevOps の改善やエンジニア採用にも取り組んでいます。開発との両立は難しい側面もありますが、両方とも個人的にやりたかったことなので日々試行錯誤しながら進めている感じです。

2)リーダーとしての役割と責任

ーリーダーに就任されてからの役割や、以前と比べて変わったことについて教えてください。

2025年の4月に正式に就任してまだ1ヶ月足らずなので、リーダーとしてそこまで多くのことはできていないのが現状です。ただ、半年ほど前から前任のリーダーから徐々に業務や権限を委譲してもらう形で進めてきました。リーダーにも色々な役割があると思いますが、私が行っているのは主に技術面のリードで、ピープルマネジメントの業務は前任のリーダーに引き続きお願いしています。

役割としては開発チームの成果物に責任を持つことになったのが、これまでとの大きな違いかと思います。これまでは自分が担当しているタスクを完了させることに注力していましたが、リーダーになることでその範囲が広がった感じです。あとは与えられた課題をこなすのではなく、自身で課題を見つけそれを、チームで解消していくことが必要になったと感じています。サービスやチームがスケールする中で、技術的負債も一定溜まっているので、それらをうまく解消しつつサービスの成長につながる開発も行っていく、といった感じでしょうか。

ーリーダーとしてチームの成果物に責任を持つようになり、課題を見つけて解消していく立場になったとのことですが、具体的にはどのような課題に取り組まれていますか?

今いるチームでは四半期ごとに OKR を定めて課題解決に取り組んでいます。ちょうど今月(2025年4月)から新しいクォーターが始まったのですが、今クォーターでは、① Next.jsの App Routerの移行、② クエリのパフォーマンス改善、③ Devin の活用の3つについて取り組んでいるところです。この取り組み自体は従来から行っていたのですが、前クォーターにチーム体制が変わったこともあって OKR の決め方や進め方などは試行錯誤しながら進めている最中です。

3)エッシェンシャルワーカー向け人材紹介・求人媒体サービスの開発における特徴

ープレックスジョブの開発において、特徴的な点や工夫していることはありますか?

開発にあたっては、アジャイル開発でスクラムを採用しています。スプリントは1週間で、他社に比べると短い期間でスプリントを回しているのではないかと思います。リリースについても特定の曜日に行うなど、決まったタイミングで行うのではなく都度行うことで、開発した機能をより早くユーザーに届けられる開発体制を作っています。また、スプリントの中で10~20%は技術的負債の解消に充てることをルールとしていることも特徴的な点かなと。

その他だとスプリントの振り返りのタイミングで、FourKeys の指標を使った振り返りを行っているのも特徴的かと思います。弊社では Redash を使ってデータ分析などを行っているのですが、Redash に DevOps 専用のダッシュボードを作ってデプロイ数の推移やリードタイムを見ながら振り返りを行っています。実際の数字を見て振り返りすることで、何が課題になっているのかより明確になったと感じています。

ー開発チームとビジネスサイドとのコミュニケーションはどのように行われていますか?

MTGだと定例で行っているのは、スプリントの中頃で実施する中間共有会とスプリントの終わりに実施するスプリントMTGです。それらのMTGではプロダクトマネージャーと開発の全メンバーが参加してコミュニケーションを図っています。あとプレックスはリモートと出社のハイブリット勤務を採用しているので、近くに座っているプロダクトマネージャーと直接話をすることも多いです。

また、弊社ではSlackを使っているのですが、実際にシステムを使っている社内ユーザーからの要望や問い合わせは Slack の専用チャンネルで受け付けています。要望はプロダクトマネージャーが一旦受けて、優先度をつけて開発のタスクに落とし込む流れです。システムの不具合などの問い合わせは、開発のメンバーで問い合わせの当番を決めて順番に対応している感じですね。

ープレックスジョブのターゲットユーザーであるエッシェンシャルワーカーの方々が使いやすいプロダクトにするために、特に意識していることはありますか?

エッシェンシャルワーカーの方は現場に出ていることも多いので、スマートフォンで使いやすいようなデザインを採用し実装することを意識しています。また、会員登録や応募画面では入力する項目を必要最低限のものに絞って、ユーザーの方の負担を極力減らすようにしています。プレックスジョブというサービスは転職者さまと企業さまの仲介の役割を担うものだと思っているので、求職者さまが入口でつまづかないようなプロダクトを作ることが大事だと思っています。

ー実際に現場の声を取り入れて改善された具体的な事例はありますか?

色々ありますが、以前、求職者さまへ対応を行っている弊社の担当者から、応募後にメッセージ画面を表示してほしいという要望がありました。というのも、プレックスにはメッセージ機能があるのですが、導線がわかりづらくメッセージを確認したり送ったりする際に支障が出ていたらしいのです。

当時は会員画面のメニューからメッセージページに遷移する必要があったのですが、これを改善するために、応募後に「メッセージを確認しましょう」というモーダルを表示し、そのモーダル内のボタンを押せばすぐにメッセージ画面に遷移できるようにしました。このシンプルな改善によって、ユーザーがスムーズに次のステップに進めるようになり、担当者からも良いフィードバックをもらえました。

上記は改善の一例ですが、実際に現場で起きている課題を細かく拾い上げ、ユーザー体験を少しずつ改善していくことが大切だと考えています。今後も現場の声に耳を傾けつつプロダクトの改善を行っていきたいです。

ーターゲットユーザーを意識した開発によって、どのような成果や効果が得られましたか?

この記事(「CLS不良ページを "0" にした パフォーマンス改善テクニック」でも取り上げたのですが、最近だとプレックスジョブの求人サイトではCLS不良ページを0にする取り組みを行いました。CLSはGoogleが定めるコアウェブバイタルの一つであり、SEOにも影響すると言われている指標の一つで、CLS を改善することでUXが向上するだけでなく、SEOの改善にもつながります。取り組んだ結果、CLS不良ページは0になり、ユーザー体験も良くなったと感じています。SEO にはすぐに反映されるものではないですが、今後効果があったか振り返りをきちんと行っていく予定です。

また、他にも多くの取り組みを行う中で、2024年10月にはプレックスジョブの累計登録者数が100万人を突破するという大きな節目を迎えることができました。多くのユーザーに利用いただけているということはユーザーに一定の価値を提供できているのかなと思っています。

ー他にもテクニカルな課題に対して取り組んでいることがあれば教えてください。

他にはAI活用についても取り組んでいます。過去、ChatGPT や Stable Diffusion を試しましたが、個人で活用するに留まっていました。AI エージェントについてはここ最近で目や耳にする日がないくらいで、今後、AIエージェントをいかに活用していくかが事業成長にもつながる大きなポイントだと考えています。開発だけでなく、定型業務の置き換えを行うなど、より本質的な仕事に集中できる仕組みづくりに取り組んでいる最中です。

4 )プレックスジョブの今後の展望とビジョン

ープレックスジョブの今後の展望について教えてください。

エッシェンシャルワーカーが転職を考えたときに「それならプレックスジョブだよね」となるのが目標です。そのために、対応する業種を増やしたり、求人のリッチ化やスカウトの改善を行ってきました。具体的な展望についてはこの場では言えないことも多いですが色々仕込んでいるので、公表ができるタイミングが来たらサービスサイトや開発ブログ上で発表したいですね。

5 )チームの成長と目指す方向性

ーチームとしてどのような文化や環境を作っていきたいと考えていますか?

尊敬するエンジニアとチームづくりの話をしたときに、攻殻機動隊のようなチームが理想との話があり私もそう思っています。それぞれがプロフェッショナルとして仕事をする中で、自分の得意領域だけでなく関連領域もカバーできるような人が集まった組織です。

プレックスジョブというサービスは求人サイトという特性上、SaaSと異なりそれ単体が収益を産むものではありません。ユーザーは社内外にいますしその属性も求職者さま、クライアント企業さま、社内ユーザーとさまざまで、そこから生まれる課題も多岐に渡ります。それらの課題をチームとして解決することで、エンジニアの立場から顧客の課題解決や事業成長に貢献できたらと考えています。

ー最後に、プレックスのエンジニア組織やダイレクトリクルーティング事業に興味を持つエンジニアの方にメッセージをお願いします。

私が入社するときに感じた「プレックスなら何か面白いことができそう」という感覚は今も同じです。事業成長に伴い社員数も450名を超えましたが、エンジニアはそのうち20名弱でありまだまだエンジニアもまだまだ募集している状況です。事業も人材、SaaSM&Aと多岐に渡りそれぞれが抱えている課題もさまざまなので、フィットするポジションが必ずあると思います。

この記事で話しきれなかったこともまだまだあるので、この記事を読んで興味を持ってくださった方がいらっしゃいましたらぜひカジュアル面談で話しましょう!

インタビューの内容は以上です。 Claude 3.7 Sonnet にインタビュワーになってもらった結果、想定以上にいい感じにまとまったのではと思っています。 これを読んだ会社の担当者から正式にインタビュー依頼が来るのが楽しみです!

インタビューの最後でも話しましたが、現在プレックスではソフトウェアエンジニア、フロントエンドエンジニア、UIデザイナーの募集もあります。 もしこの記事を読んで、一緒に熱く働いてみたいと思った方がいましたら是非ご連絡をお待ちしています!

dev.plex.co.jp

CLS不良ページを "0" にした パフォーマンス改善テクニック

こんにちは、Plex Job 開発チームの高岡です。
以前投稿した「Web パフォーマンス改善に向き合っていくお話」の記事の続編として、弊社のPlex Job サイトを対象に、Google Search Console で検知された CLS 不良ページの改善を行ったので、今回はその具体的な Tips をお話ししたいと思います。

product.plex.co.jp

対象読者

以下の項目に関心がある方におすすめの記事です 🙏

  • パフォーマンス改善が必要なページの検出方法
  • CLS スコアの改善方法

背景

普段の機能改修の影響で、Google Search Console で検知される CLS 不良ページが急激に増加したケースがありました。ただ既存の不良ページの修正が後回しになっていたため、どのページで発生したのかを突き止めるのが難しい課題がありました。
これらはユーザー体験の低下や SEO に良くない影響を与えるため、今後の改修で不良ページが検出された際に素早く対応できるように改善することにしました。

  1. Google Search Console でサイト全体のパフォーマンスの全体像を把握する
  2. より詳細な調査として Vercel Speed Insights でスコアが悪化しているページを絞り込む
  3. 該当ページで Google Chrome DevTools 上の Lighthouse を使用して具体的な原因を調査する
  4. 原因に合わせて最適な対応を行う

上記の流れで改善を行いましたので、順を追って説明していきたいと思います。

Google Search Console での不良ページの検出

パフォーマンス改善が必要なページの検出には、Google 検索結果におけるウェブサイトの掲載順位を監視、管理、改善するのに役立つ Google Search Console を使用しました。
その機能の一つであるウェブに関する主な指標レポートは、実際のユーザーデータに基づいてウェブページのパフォーマンスを評価し、「不良」「改善が必要」「良好」のステータスで示します。このレポートは、LCP(Largest Contentful Paint)INP(Interaction to Next Paint)CLS(Cumulative Layout Shift) という 3 つの主要な指標(Core Web Vitals)を用いており、モバイルとパソコンの両方で URL のグループごとのパフォーマンスを確認できます。

弊社では、CLS スコアに問題があるページが検出されました。

▼ 当時の不良ページ

ここで検出されたページは特定のページではなく、類似するユーザーエクスペリエンスを持つ URL がグループとして扱われます。上記の URL グループだけでは、動的ルートを使用していたり、近しいパスが多い場合などに、実際にどのページでスコアが悪化しているかを絞り込むことが難しい場合もあります。
その場合、次の節で説明する Vercel Speed Insights での絞り込みが有効です。

Vercel Speed Insights で特定のページを絞り込む

Plex Job サイトは Next.js のフレームワークを使用しており、クラウドプラットフォームである Vercelホスティングしています。
Vercel には Speed Insights という機能があり、ダッシュボードでウェブサイトのパフォーマンスに関する詳細な情報を確認できます。

上記のダッシュボードのように、パフォーマンスの指標ごとにどのルート・パスのスコアが悪いのかを特定することができます。
また、特定の期間での絞り込みや実際のリリース日がカレンダーに表示されるなど多くの情報を得ることができます。
(補足) Speed Insights 機能では、データの種類・評価の粒度・スコアの算出方法などが Google Search Console とは異なります。
https://vercel.com/docs/speed-insights/metrics

今回は、解決したい指標である CLS での絞り込みと具体的なパスで絞り込みを行いました。
継続的なモニタリングの面で、スコアが悪化した時に、カレンダーでどのリリースが影響しているのかを確認できる点はとても便利です。

そして、ページの特定ができた後は、実際にそのページを対象に Lighthouse を実行します。

Lighthouse を使用したパフォーマンス計測

Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。認証が必要なページを含むあらゆるページで実行可能で、パフォーマンス、アクセシビリティプログレッシブウェブアプリ(PWA)、SEO など、さまざまな側面を監査します。
Google Chrome DevTools 内での実行のみではなく、コマンドラインツール、Node.js モジュール、または Web UI(PageSpeed Insight)からも Lighthouse を実行できます。

Lighthouse での計測方法

Google Chrome DevTools 上の Lighthouse を使用する際は、ノイズが少なく精度の高い計測をするために以下のことに気をつけています。

  • ユーザー環境に合わせるために Network throttling を Slow 4G に設定する。
  • Chrome 拡張機能の影響を避けるため、シークレットモードで計測する。
  • 計測値は変動する可能性があるため、複数回計測する。

左上の+ボタンから新しいレポートを作成し、複数のレポート結果を比較することも可能です。

計測結果の解釈

Lighthouse レポートには、以下のセクションが含まれます。

  • パフォーマンススコア(Performance) : ページ全体のパフォーマンスを数値で示します。
  • メトリクス(Metrics) : FCP、LCP、TBT、CLS、SI などの指標が表示され、各指標の値を確認できます。
  • 改善提案(Diagnostics) : ページのパフォーマンスを向上させるための具体的なアクションが提示されます。

下記は当時の Plex Job サイト で実際に CLS が発生していたページを再現して、Lighthouse を実行した結果です。

特定のメトリクスのみを確認したい場合は、"Show audits relevant to:" の該当メトリクスをクリックすると絞り込めます。
改善提案には、具体的な修正方法が記載されています。CLS では原因となる要素(Element)部分のキャプチャを表示してくれます。
今回は 2 つレイアウトシフトが発生していることが分かりましたので、それぞれの改善提案の中身を確認していきます。

CLS の改善方法

CLS は、ウェブページの読み込み中に発生する予期しないレイアウトの変動を測定する指標で、視覚的な安定性を評価します。
前節で実行した Lighthouse の結果の詳細を確認して、それぞれの原因と改善方法の説明をしていきます。

1. CSR(クライアントサイドレンダリング)によるデータフェッチ

上記画像は、メインコンテンツ要素でレイアウトシフトが発生していることを示しています。
このページは CSR によるデータフェッチを行なっていたので、Header と Footer は先に表示されて、その 2 つの間にメインコンテンツ部分がデータフェッチ後に差し込まれることで、Footer が大きくずれてレイアウトシフトが発生していました。

対応策としては、

  • データが読み込まれるまでの間はスケルトンを使用する
  • データフェッチをクライアント側ではなく、サーバ側で行う
  • レイアウトシフトが発生しないような UI デザインに変更する

などがあるかと思います。
今回はクライアント側でデータフェッチを行う必要がなかったので、SSR (サーバサイドレンダリング)にすることで対応しました。
SPA(Single Page Application)や初期ロード時に必要なデータを最小限に抑えたいケースなど、CSR を選択せざるを得ない場合は、スケルトンを導入することをおすすめします。
画面全体や表示領域が決まっている要素にスケルトンを使用する場合は簡易に実装ができますが、データに依存して表示領域が決まる要素が複数ある場合は、実装とデザインを調整するなど慎重に設計する必要があります。

2. 画像タグのサイズ指定の不一致

こちらは<img>タグに設定した画像のwidthheightが、実際にレンダリング後のサイズと異なっていたため、微小なレイアウトシフトが発生していました。
このような小さなズレでも CLS スコアに積み重なり、全体のスコア悪化につながる可能性があります。

対応策としては、正しいwidthheightを設定することで解消できます。また、画像のアスペクト比を維持するためにaspect-ratioプロパティを活用することも有効です。
サイズの違いもありますが、そもそも指定し忘れていたケースなどもあります。Next.js の Image コンポーネントを使用している場合、widthheightは必須項目なのでそういったミスを事前に防げます。
https://nextjs.org/docs/app/api-reference/components/image

Plex Job サイトでは、上記 2 種類が CLS 発生原因でしたが、一般的には Web フォントの遅延適用などもよくある原因の 1 つです。

Lighthouse を使用した上で原因がわからない場合は...

今回の CLS 改善では Lighthouse の結果のみで原因を特定できましたが、改善提案だけでは原因が不明なケースもあります。その場合は、Lighthouse に加え、Performance タブや Network タブを併用して原因を突き止めます。

特に Performance タブの Insights 項目では、読み込みフレームと合わせて Core Web Vitals のスコア悪化の原因を詳細に確認できます。Screenshots のチェックボックスをオンにすると画面キャプチャも同時に取得でき、非常に分かりやすいです。
https://developer.chrome.com/docs/devtools/performance/reference#insights

実際に今回のページを対象に Performance タブの Insights 項目を確認すると、画面キャプチャと一緒にどのようにズレが発生していたかを明確に確認することができました。

CLS のみではなく、その他の Core Web Vitals も確認することができるのでとても便利な機能です。

Google Chrome DevTools は多機能で、新しい機能も次々と追加されています。すべてを把握するのは難しいですが、解決したい課題に関連する機能がないか公式サイトを確認するのがおすすめです。
https://developer.chrome.com/

結果

上記で説明した流れで CLS 不良ページの改善を地道に続けた結果、なんと見事不良ページ数が 0 になりました 🎉

まとめ

今回はパフォーマンス改善に関する具体的な手法について説明しました。
パフォーマンス改善は、ユーザー体験を向上させるために重要な取り組みです。特に CLS の改善は、視覚的な安定性を高め、ユーザーが快適にウェブサイトを利用できるようにするための鍵となります。
今回の取り組みでは、Google Search Console や Vercel Speed Insight、Lighthouse を活用し、具体的な原因を特定して改善を行いました。

今後も継続的にモニタリングを行い、必要に応じて改善を続けていく予定です。また、lighthouse-ci を導入することで、開発プロセスにおけるパフォーマンスの監視を自動化し、さらなる効率化を目指していきます。

参照

support.google.com support.google.com vercel.com developer.chrome.com developer.chrome.com

おわりに

現在プレックスではソフトウェアエンジニアフロントエンドエンジニアを募集しています。 この記事を見て一緒にパフォーマンス改善をガンガン行いたい方がいればお気軽にご連絡をお願いいたします!

dev.plex.co.jp