ミツカリ技術ブログ

https://tech-blog.mitsucari.com/

株式会社ミツカリの開発チームのブログです

フィード

記事のアイキャッチ画像
科学的根拠に基づく、アウトプットが大切な理由
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 我々IT界隈以外もそうだと思いますが、よく「アウトプットしろ」「学んだことを書け」と言われます。 これは理解できますし、実際に私自身もそこそこアウトプットはしている方だと思います。感覚的にも確かにアウトプットはスキルアップや記憶の定着に有効な気がします。 しかし、それはなぜなのでしょうか?感覚ではなく、科学的根拠に基づいて理解したいと思います。今回の記事では、著名な論文を引用しながら、アウトプットの重要性を論理的に整理していきます。 テックブログの趣旨からは逸れますが、なるべくITでの実務にも触れつつ整理していきたい…
4日前
記事のアイキャッチ画像
会議の音声を処理するWebアプリを作るための技術調査
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 近年、音声を処理するWebアプリが急速に増えています。たとえば会議の文字起こし・要約を行う Otter.ai や Fireflies.ai、日本語特化の Notta や Rimo Voice、商談解析の amptalk や MiiTelなど、音声×AIの領域は群雄割拠という状況です。 こうしたサービスを見ていると、自分でも会議中の発言を文字起こししたり、話者ごとの発言量や内容を分析するWebアプリを作りたくなります。そう考えたとき、まずぶつかるのが「そもそもブラウザでどうやって音声を扱うのか?」という問題です。 本記…
7日前
記事のアイキャッチ画像
生成AIに個人データを渡す前に知っておきたい個人情報保護法の実務知識
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 当社はHR Tech SaaSという特性上、個人情報・個人データを扱う機会が非常に多いです。 例えば顧客が従業員の氏名やメールアドレスをシステム上に登録します。そのほか、当社は生成AIをプロダクトに組み込み、自社のミツカリデータを踏まえて分析や相談ができるようなAIアシスタント機能を提供しています。 prtimes.jp この時、生成AIに個人データを与えることになります。 今回の記事では私が顧問弁護士に相談しながら数十時間以上検討や調査を行った、個人情報保護法に関する知識をまとめます。 なかなか骨が折れました。Pd…
14日前
記事のアイキャッチ画像
Elasticsearchでネットスーパーを題材にハイブリッド検索を試してみる
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日友人たちと新年会をしてきたのですが、そこで検索技術に関する話を少ししました。 私は門外漢なのですが、友人は大手企業で検索を専門にしているスペシャリストです。そこでキーワード検索とセマンティック検索のハイブリッド検索を行っているという話を聞きました。興味がある領域ですが、Elasticsearch等は触れる機会が少ないので、今回はハイブリッド検索に挑戦してみることにします。 今回の記事ではデータセットをElasticsearchに投入し、キーワード検索のみ、セマンティック検索のみ、ハイブリッド検索などの複数手法の精…
18日前
記事のアイキャッチ画像
Claude codeのAgent Teamで複数の機能開発を並列実行してみた
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 前回のこちらの記事ではGitButlerを使って並列開発をしてみました。 tech-blog.mitsucari.com 今回の記事ではClaude codeのAgent Teamで全く同じ並列作業をしてみようと思います。 前回はGitButlerのメリットを感じつつも、幾分不便さは残るような結果になりました。確かに複数ブランチをgit worktreeなしで並列に扱える点は良いですが、結局conflictは発生してしまいます。今回は果たしてどうなるのでしょうか。 結論 Agent Teamの導入方法 チーム作成 三…
21日前
記事のアイキャッチ画像
ミツカリ社の開発タスク優先度決定ロジックの歴史と悩み
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 今回の記事では当社(主に私)が今まで検討してきたタスクの優先度決定ロジックについて、その歴史や悩みについて紹介したいと思います。 優先順位付けに関して「うちはこうしています、こうすると良いですよ!」といったアドバイスがあれば、ぜひXなどで私まで教えてください! 結論 背景: 無駄なことはしたくない 優先順位付けの重要性 歴史 1. 感覚による優先順位付け 2. タスクの価値による優先順位付け 3. RICEスコア 4. 独自の重み付けスコアリング 5. CoDとWSJF 6. ICE + バジェットを分ける戦略 おわ…
24日前
記事のアイキャッチ画像
GitButler × Claude Codeで複数の機能開発を並列実行してみた
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 今回の記事ではGitHubの共同創業者が手がけた次世代Gitクライアント「GitButler」を試してみました。 Virtual Branch(仮想ブランチ)でClaude Codeを3つ同時に走らせて並行開発する、というのを実際にやってみたレポートです。よくある手法としてはgit worktreeを活用する方法やDevinなどの全く別の環境で並列させる方法がありますが、気に入らない部分がいくつかあったので、GitButlerを試してみました。 結論 GitButlerとは? 今回やること 準備 1. GitButl…
25日前
記事のアイキャッチ画像
Zero Runtime CSS in JSに乗り換えたのでパフォーマンス測定をしてみた
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 当社では今までCSSライブラリとしてEmotionを使用していました。 Emotionを選定したのは2022年8月頃で、その頃はまだTailwindよりも人気でした。他にMUIを利用することも決めており、MUIもEmotionを利用しているため、丁度よいという理由もありました。 CSS-in-JSライブラリであるため、開発体験としては気に入っていましたが、ランタイム時に(ブラウザでページアクセス時に)JSが動いてスタイルが計算され、styleタグが挿入されるため、パフォーマンスの問題があります。 以前のこちらの記事で…
1ヶ月前
記事のアイキャッチ画像
Next.jsプロジェクトにStyleXを導入してemotionと共存させるまでの道のり
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 皆さんは、emotionなどのCSS-in-JSライブラリを使っていて、ランタイムのスタイル生成オーバーヘッドが気になったことはありませんか? 昨今のエンドユーザの端末はスペックがどんどん高くなっているので、msレベルのオーバーヘッドであることが多く、人が検知できるレベルでパフォーマンスが悪いということはあまりないですが、LPのようなSEO評価のされるページだったりするとパフォーマンスの検査員は人ではなく機械なので、ページ読み込み時にJavaScriptでスタイルを生成・注入する処理が、評価に影響を与えることがあります。 最近のフロント…
1ヶ月前
記事のアイキャッチ画像
DBのプライマリーキーはUUIDか整数か?実際に検証してみた
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日、こんなツイートが少し話題になっていました。 結構数値派が多い。雑な投稿だったのでちゃんと書いてなかったが、PostgreSQL使ってUUID使うならv7、シャーディングする想定なし、モノリスという前提。この前提下だと数値は高速だが推測しやすいってのがデメリット。そのために外部に見せる用idを作ったりなんてのもあるがはてさて https://t.co/EuN00w8Mad— Keisuke Nishitani (@Keisuke69) 2026年1月28日 その昔、3000万ユーザー・10億APIヒット/日・米国…
1ヶ月前
記事のアイキャッチ画像
E2Eテスト:DatadogからPlaywrightへ移行した理由とPros/Cons
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 以前、以下のような記事を書きました。 tech-blog.mitsucari.com tech-blog.mitsucari.com 今まではE2EテストにDatadog Synthetic Browser Test(以下Datadog)を利用していましたが、チーム内で協議した結果、Playwrightに移行することになりました。 移行作業自体は他のメンバーが対応してくれたのでそこは関わっていないのですが、乗り換えた動機やPros/Consについてまとめてみようと思います。 なお、この記事で言うPlaywrightと…
1ヶ月前
記事のアイキャッチ画像
PdMツールの比較 (Centou, Dovetail, Flyle, Productboard, etc)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 私はCTOですが、スクラムにおいてはプロダクトオーナーの役割を担っており、同時に製品開発全般においてはプロダクトマネージャー(以下PdM)の役割も担っています(現状はCPO不在のため私が担当しています)。 今回はPdM目線の記事です。各種ツールを比較したときの話をしようと思います(情報は2026年1月時点のものです)。 概要 結論:Centouを採用 VOCやインタビューデータの活用を目的に、Productboard、Flyle、Jira Product Discovery、Dovetail、Centouの5つのPd…
1ヶ月前
記事のアイキャッチ画像
Automaによる自動化 - CSVを使った大量データ登録
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 みなさんはWebページを操作していて、こんなことを思ったことはありませんか? 「繰り返しが面倒だ。大量のデータを登録するのが大変だ。」 Webに限りませんが、こう言う問題は一般的によくあるため、これを解決する技術・領域としてRPA(Robotic Process Automation)というものがあります。 今回はそのRPAツールであるAutomaを使って、大量の操作を自動化するテクニックを共有したいと思います。 Automaとは AutomaはChromeの拡張です。 https://chromewebstore.…
3ヶ月前
記事のアイキャッチ画像
DNSに再入門: NS, AAAAレコードの必要性を整理する
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 DNSは昨今のWebを支える技術です。 前回はDNSサーバーをRoute53からCloudflareに移行したという記事を書きました。 tech-blog.mitsucari.com 今回は移行中に生じた疑問をベースに、各種レコードの認識が甘い部分を整理してみました。 概要 自ドメイン(自分のDNS)にもNSレコードは必要であり、権威を表明している AAAAレコードは通信高速化のためには必要だが、必須ではない 解説しないレコード 以下のレコードは今回の対象範囲からは除外します。 Aレコード ドメインとIPv4アドレス…
3ヶ月前
記事のアイキャッチ画像
DNSに再入門: DNSサーバーを移行し、結果と速度を検証する
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 DNSは昨今のWebを支える技術です。 前回の記事ではDNSのフルリゾルバについて調査・説明しました。 tech-blog.mitsucari.com 今回はDNSサーバーの移行作業および速度検証についてです。私はいくつかプライベートでドメインを持っていますが、そのドメインを管理するDNSサーバーをAWSからCloudflareに移転する作業を今回行いました。理解が曖昧だったり忘れている部分が多かったので、改めて再入門(復習)してみました。 概要 レジストラ(ドメイン)とDNSサーバーは別物なので、AWS(Route…
4ヶ月前
記事のアイキャッチ画像
DNSに再入門: DNSサーバー(フルリゾルバ)を実際の家庭や実例を交えて詳解する
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 前回の記事では弊社のインターンの井上さんがDNSの歴史について解説してくれました。 tech-blog.mitsucari.com 今回はDNSサーバーにフォーカスを当てて説明をしてみたいと思います。DNSサーバーと一言で言ってもフルリゾルバや権威サーバーがあったり、それ以外にもいくつか種類があったりします。書籍等で関係性や問い合わせが図示されていたりしますが、具体的にイメージするのは少し難しいです。そのあたりを詳しく説明してみます。 概要 大抵の家庭ではフルリゾルバはISPのDNSサーバーという理解で良いが、詳細は…
4ヶ月前
記事のアイキャッチ画像
DNS誕生までの歴史
ミツカリ技術ブログ
はじめに ミツカリインターンの井上です。今回、DNS誕生までの歴史について、IT初心者の方にもわかりやすいように、このブログ記事にまとめました。 現代のインターネットでは、Webサイトのアドレス(例:www.example.jp)を入力するだけで、目的のページにアクセスできます。 しかし、私たちが普段目にするURLやメールアドレスは、実際にはIPアドレスという数字の列に変換されて通信が行われています。 この変換を担うのがDNS(Domain Name System)です。 DNSは、人間にとって覚えやすいホスト名と、コンピュータが通信に使うIPアドレスを対応させることで、インターネット上の名前…
4ヶ月前
記事のアイキャッチ画像
Findy Team+ Award 2025で開発生産性の高い組織に選ばれました!
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 以前、弊社のつかびーさんからFindy Team+という生産性の可視化ツールの導入について記事を公開しました。 tech-blog.mitsucari.com そちらのツールを導入している企業のうち、特に生産性の高い企業を表彰するイベントが先日あり、見事ミツカリが選出されました! 記念トロフィー プレス記事やnoteも公開されておりますのでぜひそちらもご覧ください。 prtimes.jp note.com 受賞の喜びやツールの概要などはnoteなどに記載させていただいていますので、こちらでは詳細な取り組みについて書いていこうと思います。…
6ヶ月前
記事のアイキャッチ画像
rspecで特定のミドルウェアをSkipする方法
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 ミツカリではこれまではCommitteeのRequestValidationを有効化していましたが、組織のコーディングルールとしてValidationをFormに統一しようということになったので、現在Formへの移行作業が行われています。 なぜFormへ統一することになったのかの経緯については先日、弊社CTOのつかびーさんが以下の記事を公開しておりますのでそちらを御覧ください。 tech-blog.mitsucari.com 廃止する方針になったからといって、いきなりRequestValidationのミドルウェアを削除してしまうと、F…
6ヶ月前
記事のアイキャッチ画像
committeeのRequestValidationは便利だが使うのをやめた話
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 弊社では数年前からWeb API開発においてOpenAPIおよびスキーマファーストの開発スタイルをとっています。 今回の記事ではスキーマファーストの開発に interagent/committee を使っていましたが、その中の機能の一つである RequestValidation を廃止した話をします。 スキーマファースト スキーマファーストの利点 スキーマファーストを実現する interagent/committee committeeのRequestValidationをやめた話 Validationの責務の分散 …
7ヶ月前
記事のアイキャッチ画像
React + ViteのSPAをCloudflareのルーティングを理解しながら作る
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリではPaaSには専らAWSを利用しており、Cloudflareはほとんど利用していません。また、私自身もCloudflareを過去がっつり触ってきた経験はないため、Cloudflareに入門(学習)してみることにしました。 Cloudflare WorkersとPages Cloudflareは元々DNS(セキュリティ)屋でしたが、その後CDNのサービスを備えて有名になり始め一般利用者を増やし、近年ではホスティングやコンピューティングのサービスを提供する総合的なPaaSに進化してきました。 Cloudflar…
7ヶ月前
記事のアイキャッチ画像
Github Actions(ワークフロー)で無闇にSecretsを定義してはいけない話
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 Github ActionsでCI/CDを構築する際、ビルドやデプロイ時に秘匿情報を環境変数として渡す場面がありますよね。 例えば以下のような形です。 jobs: jobA: runs-on: ubuntu-latest steps: - uses: docker/build-push-action@v6.18.0 with: context: . build-args: | "SOME_SECRET=hogehoge" これだと秘匿情報がハードコーディングされてしまっていてgithubのソースコードが流出したら大問題です。 そこで、G…
7ヶ月前
記事のアイキャッチ画像
マーケティング出身のジュニアエンジニアが教える、Webエンジニアなら抑えておきたいデザインの4原則: ①近接編
ミツカリ技術ブログ
はじめに デザインとは? デザインの4原則とは? デザインの4原則① 「近接」 「近接」を使った事例と注意点 最後に はじめに こんにちは!ミツカリでジュニアエンジニアをしています。tt(髙橋)です。 この記事ではWebエンジニアなら抑えておきたい「デザインの4原則」とそれの活用事例を共有します。 私はWebディレクター歴がそこそこあり、ミツカリでもLPリニューアルなど大きい施策の時にはマーケティング業務に参加しています。 その掛け合わせのノウハウを今回はお伝えします。 30代半ばでジュニアエンジニア?と思われる方もいると思い、過去のブログで簡単に自己紹介させていただいています。 デザインとは…
8ヶ月前
記事のアイキャッチ画像
GithubActionsに標準搭載されていない複雑な実行トリガーを表現する
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 GithubActions、皆さん使っていますでしょうか? Pull request(PR)をトリガーにテストを実行したり、プッシュをトリガーにデプロイを実行したりしますね。 ほとんどの場面ではPRが作られたとき、プッシュされたとき、マージされたとき、などのGithubActionsが標準で用意してくれているトリガーで事足りるのですが、今回弊社で実行したいCIの理想的なトリガーの要件が複雑で、それを満たすのに少々苦労したのでその記録を残そうと思います。 要件 それぞれの要件となった背景は後述しますが、忙しい人のために先にどんな要件を満た…
9ヶ月前
記事のアイキャッチ画像
Playwright Component Testを用いた単体テストでJestで書けなかったテストを実現する
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 弊社で提供しているサービスの一部のアクションでドラッグアンドドロップで画面上の要素の並び替えをする機能があります。 この実装にはdnd-kitというライブラリを使っています。 dndkit.com ライブラリのおかげで実装自体はそう難しいものではありませんでしたが、意図しない変更やライブラリのアップデートによってドラッグアンドドロップの動作を壊してしまう可能性が今後つきまといます。 リリースのたびにそれをチェックするのは工数ももったいないです。 ドラッグアンドドロップが正常にできているかどうかをコードレベルで保証するために単体テストを書…
9ヶ月前
記事のアイキャッチ画像
時系列DBに入門しつつ、パフォーマンスを計測してみる(InfluxDB v2 vs PostgreSQL v15)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ITシステムにおけるデータベース(DB)には様々な種類が存在します。一般的によく使われるのはリレーショナルデータベース(RDB, RDBMS)であり、PostgreSQLやMySQLが有名です。これらとは別の種類に時系列DB(Time Series Database, TSDB)というものもあります。用途としては時系列データ(タイムスタンプを持つデータ)の保存および取得、リアルタイム集計です。今回はこの時系列DBに入門しつつパフォーマンスを測定してみたという記事です。 時系列DBとは 時系列DBのユースケース 時系列…
9ヶ月前
記事のアイキャッチ画像
Sentryのエラーをアーカイブするときの考え方(エラーバジェット)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 今回はエラーモニタリング(エラートラッキング)サービスであるSentryの扱い方についての記事です。 Sentryとは Sentryとはエラーモニタリングサービスであり、アプリケーション上で発生した例外を検知して通知することができるというものです。 今ではSentryも機能が増えてAPMなどの側面も持っており、エラーモニタリングだけではないのですが、今回はエラーモニタリング部分だけについて触れます。 類似の製品としてDatadogやAirbrakeなどがあります。 詳細な使い方は公式ドキュメントが豊富ですし、解説して…
10ヶ月前
記事のアイキャッチ画像
DevOpsDays Tokyo 2025 に初参加した感想
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日DevOpsDays Tokyo 2025というカンファレンスに参加しました。今回の記事はその感想レポートです。 DevOpsDays 詳細は以下のページを御覧ください。 www.devopsdaystokyo.org 過去に何度も開催されているイベントの2025年版です。 Past Events | devopsdaystokyo 若い頃は勉強会やカンファレンスは参加できていたのですが、最近は(というかスタートアップに入ってからは)忙しくなってしまい、めっきり参加数が減ってしまいました。こうなってしまうと仕事と…
10ヶ月前
記事のアイキャッチ画像
Bedrock AgentのDraft, Version, Aliasの構造とTerraform管理の難しさ
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日弊社は生成AIをプロダクトに組み込んだとある機能をリリースしました。 ミツカリもAIエージェントに!!AIアシスタント機能がリリースされました。早速使っていただき面接の動機づけや面談で対象の方のモチベーションUPなどに活かしていただいております。個人情報の対策もばっちりです!! pic.twitter.com/SqrM01Q0O7— おもて(株)ミツカリ代表/社会全体の適材適所を実現する! (@takanori52) 2025年3月25日 こちらの機能の生成AI基盤にはAWS Bedrockを利用しています。今回…
10ヶ月前
記事のアイキャッチ画像
ReactHookFormのuseFieldArrayを使った動的フィールドでの不具合解決
ミツカリ技術ブログ
はじめに ミツカリのたなしゅん(@tanashun_dev)です。 ReactHookForm、皆さん使っておりますでしょうか。 React開発においてかなりメジャーなFormライブラリですね。 ミツカリでも採用しています。 ReactHookFormにはuseFieldArrayという動的に入力項目を増減させる仕組みがあるのはご存知でしょうか。 以下が公式ガイドです。 react-hook-form.com これを使って実装をしていたところ、ハマってしまった部分があったのでそちらの解消方法を紹介します。 ハマってしまったこと 以下のコードを見てください。 ※スタイル用のコードは要点と関係ない…
1年前