ミツカリ技術ブログ
https://tech-blog.mitsucari.com/
株式会社ミツカリの開発チームのブログです
フィード

committeeのRequestValidationは便利だが使うのをやめた話
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 弊社では数年前からWeb API開発においてOpenAPIおよびスキーマファーストの開発スタイルをとっています。 今回の記事ではスキーマファーストの開発に interagent/committee を使っていましたが、その中の機能の一つである RequestValidation を廃止した話をします。 スキーマファースト スキーマファーストの利点 スキーマファーストを実現する interagent/committee committeeのRequestValidationをやめた話 Validationの責務の分散 …
5日前

React + ViteのSPAをCloudflareのルーティングを理解しながら作る
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリではPaaSには専らAWSを利用しており、Cloudflareはほとんど利用していません。また、私自身もCloudflareを過去がっつり触ってきた経験はないため、Cloudflareに入門(学習)してみることにしました。 Cloudflare WorkersとPages Cloudflareは元々DNS(セキュリティ)屋でしたが、その後CDNのサービスを備えて有名になり始め一般利用者を増やし、近年ではホスティングやコンピューティングのサービスを提供する総合的なPaaSに進化してきました。 Cloudflar…
22日前

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…
1ヶ月前

マーケティング出身のジュニアエンジニアが教える、Webエンジニアなら抑えておきたいデザインの4原則: ①近接編
ミツカリ技術ブログ
はじめに デザインとは? デザインの4原則とは? デザインの4原則① 「近接」 「近接」を使った事例と注意点 最後に はじめに こんにちは!ミツカリでジュニアエンジニアをしています。tt(髙橋)です。 この記事ではWebエンジニアなら抑えておきたい「デザインの4原則」とそれの活用事例を共有します。 私はWebディレクター歴がそこそこあり、ミツカリでもLPリニューアルなど大きい施策の時にはマーケティング業務に参加しています。 その掛け合わせのノウハウを今回はお伝えします。 30代半ばでジュニアエンジニア?と思われる方もいると思い、過去のブログで簡単に自己紹介させていただいています。 デザインとは…
2ヶ月前

GithubActionsに標準搭載されていない複雑な実行トリガーを表現する
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 GithubActions、皆さん使っていますでしょうか? Pull request(PR)をトリガーにテストを実行したり、プッシュをトリガーにデプロイを実行したりしますね。 ほとんどの場面ではPRが作られたとき、プッシュされたとき、マージされたとき、などのGithubActionsが標準で用意してくれているトリガーで事足りるのですが、今回弊社で実行したいCIの理想的なトリガーの要件が複雑で、それを満たすのに少々苦労したのでその記録を残そうと思います。 要件 それぞれの要件となった背景は後述しますが、忙しい人のために先にどんな要件を満た…
2ヶ月前

Playwright Component Testを用いた単体テストでJestで書けなかったテストを実現する
ミツカリ技術ブログ
ミツカリのたなしゅん(@tanashun_dev)です。 弊社で提供しているサービスの一部のアクションでドラッグアンドドロップで画面上の要素の並び替えをする機能があります。 この実装にはdnd-kitというライブラリを使っています。 dndkit.com ライブラリのおかげで実装自体はそう難しいものではありませんでしたが、意図しない変更やライブラリのアップデートによってドラッグアンドドロップの動作を壊してしまう可能性が今後つきまといます。 リリースのたびにそれをチェックするのは工数ももったいないです。 ドラッグアンドドロップが正常にできているかどうかをコードレベルで保証するために単体テストを書…
3ヶ月前

時系列DBに入門しつつ、パフォーマンスを計測してみる(InfluxDB v2 vs PostgreSQL v15)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ITシステムにおけるデータベース(DB)には様々な種類が存在します。一般的によく使われるのはリレーショナルデータベース(RDB, RDBMS)であり、PostgreSQLやMySQLが有名です。これらとは別の種類に時系列DB(Time Series Database, TSDB)というものもあります。用途としては時系列データ(タイムスタンプを持つデータ)の保存および取得、リアルタイム集計です。今回はこの時系列DBに入門しつつパフォーマンスを測定してみたという記事です。 時系列DBとは 時系列DBのユースケース 時系列…
3ヶ月前

Sentryのエラーをアーカイブするときの考え方(エラーバジェット)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 今回はエラーモニタリング(エラートラッキング)サービスであるSentryの扱い方についての記事です。 Sentryとは Sentryとはエラーモニタリングサービスであり、アプリケーション上で発生した例外を検知して通知することができるというものです。 今ではSentryも機能が増えてAPMなどの側面も持っており、エラーモニタリングだけではないのですが、今回はエラーモニタリング部分だけについて触れます。 類似の製品としてDatadogやAirbrakeなどがあります。 詳細な使い方は公式ドキュメントが豊富ですし、解説して…
3ヶ月前

DevOpsDays Tokyo 2025 に初参加した感想
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日DevOpsDays Tokyo 2025というカンファレンスに参加しました。今回の記事はその感想レポートです。 DevOpsDays 詳細は以下のページを御覧ください。 www.devopsdaystokyo.org 過去に何度も開催されているイベントの2025年版です。 Past Events | devopsdaystokyo 若い頃は勉強会やカンファレンスは参加できていたのですが、最近は(というかスタートアップに入ってからは)忙しくなってしまい、めっきり参加数が減ってしまいました。こうなってしまうと仕事と…
4ヶ月前

Bedrock AgentのDraft, Version, Aliasの構造とTerraform管理の難しさ
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 先日弊社は生成AIをプロダクトに組み込んだとある機能をリリースしました。 ミツカリもAIエージェントに!!AIアシスタント機能がリリースされました。早速使っていただき面接の動機づけや面談で対象の方のモチベーションUPなどに活かしていただいております。個人情報の対策もばっちりです!! pic.twitter.com/SqrM01Q0O7— おもて(株)ミツカリ代表/社会全体の適材適所を実現する! (@takanori52) 2025年3月25日 こちらの機能の生成AI基盤にはAWS Bedrockを利用しています。今回…
4ヶ月前

ReactHookFormのuseFieldArrayを使った動的フィールドでの不具合解決
ミツカリ技術ブログ
はじめに ミツカリのたなしゅん(@tanashun_dev)です。 ReactHookForm、皆さん使っておりますでしょうか。 React開発においてかなりメジャーなFormライブラリですね。 ミツカリでも採用しています。 ReactHookFormにはuseFieldArrayという動的に入力項目を増減させる仕組みがあるのはご存知でしょうか。 以下が公式ガイドです。 react-hook-form.com これを使って実装をしていたところ、ハマってしまった部分があったのでそちらの解消方法を紹介します。 ハマってしまったこと 以下のコードを見てください。 ※スタイル用のコードは要点と関係ない…
4ヶ月前

ChromaticのFlaky testへの対応、一部の文字(Font)差分問題解決
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリ開発部ではVisual Regression Testing(VRT)を行っています。VRTを実現するためのSaaSにChromaticというものがあり、これを利用しています。 Chromaticを使うとUI変更の差分を画像で出すことができ、PRによってどのような変更が発生したかを可視化し、視覚的にレビューすることができます。 今回はその運用中に発生したとあるFlakyなTestの問題について説明します。 Chromaticの実例 以下は弊社で導入しているChromatic(VRT)の一例です。 PRが作られ…
4ヶ月前

【全部解けるかな?】TypeScript型クイズ
ミツカリ技術ブログ
はじめに 今回はちょっとした面白企画です。 クイズ形式でTypeScriptの型への理解度をチェックしてみましょう! クイズ 以下クイズです。問題がコードで書かれています。 答えはアコーディオンで閉じていますので開いて確認してください。 なお、以下で書かれている「エラー」はコンパイルエラーを指します。実行時エラーではありません。 Q1 const q1: string = 1; // これはエラーになる? 答え Type 'number' is not assignable to type 'string'. stringにnumberは入れられないのでエラーです。直感的にもわかるレベルですね…
4ヶ月前

AWS認定DOP取得と苦戦した製品など
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 最近AWS資格のDOP(AWS Certified DevOps Engineer - Professional)を取得しました。 www.credly.com 今回はその話をしようと思います。 執筆者のバックグラウンド 修士卒 6年間の情報工学、コンピュータサイエンスの基礎知識あり ITエンジニア経験10年以上。システムエンジニア。フルスタック、ただしインフラはミドルエンジニアレベル AWSの利用は2015年から。ただし、インフラ担当が構築した環境を多少エンハンスしたり保守したり、アプリエンジニア視点で使う程度 趣…
4ヶ月前

YJIT3.4を導入してパフォーマンスの変化を測る
ミツカリ技術ブログ
はじめまして。ミツカリでエンジニア(ミドルくらい)をやっていますawagakubo(粟ヶ窪)といいます。 今回は弊社のバックエンド環境で採用しているRubyでYJITを有効化してパフォーマンスの向上を図った記録です。 背景 YJITについて やったこと 変化を確認 CPU使用量とメモリ使用量 パフォーマンスチューニングを分岐点としてみる レスポンスタイム 前4週間 後4週間 最後に 背景 これはふとしたタイミングなんですが、YJITを有効化しているか確認したときにされていないことが発覚し、 現在のYJITのバージョンが3.4で安定しているだろうということから有効化してみようということになりまし…
4ヶ月前

ミツカリにおける昔の開発生産性計測と今後(Findy Team+導入)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリでは2025年からFindy Team+というSaaSを利用しています。 このサービスはgitリポジトリ、GitHubを分析し統計情報から様々な情報を可視化、組織の開発生産性向上を行うようなサービスです。 今回の記事ではこのサービスを導入する以前の弊社の計測方法と、導入直後の運用や所感などを共有します。 ※この記事はタイアップでも広告でもなんでもありません 昔の開発生産性の計測 私はミツカリ社の創業メンバーではなく、創業4年目(2018年)からJoinしました。その頃は特に効率や生産性という言葉が今より頻繁に…
5ヶ月前

Slack Workflow Builder使った年休申請やリリース通知の例
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 突然ですが、みなさんはSlackのWorkflow(Builder)機能を使っていますか? slack.com 何らかの申請や処理フローなどをSlack上で構築できる機能です。マネージドとしてデフォルトで用意されているものもあれば、Workflow Builderで自作することもできます。 ミツカリでは創業当初からずっとSlackが使われてきており、フルリモートの会社ということもあってSlackが職場という状況です。日々の相談、たとえば年次有給休暇の取得相談などもSlackで行われており、そのような定型業務の際にWo…
5ヶ月前

OpenAIのWhisperを用いてSlackのhuddleの議事録をリアルタイムで取る試み
ミツカリ技術ブログ
こんにちは。ミツカリのたなしゅんです。 ミツカリはフルリモート環境のため、Slack上でのテキストコミュニケーションが基本です。 もちろん、さっと集まって話した方が早く済むこともありますし、リアルタイムでのディスカッションでしか得られない経験もあるので、通話コミュニケーションが行われないわけではありません。 しかし、通話によるコミュニケーションはテキストとは異なり、形に残りにくかったり、仮に録画を残していたとしても検索しにくかったり、見返す前提に立ったときにはテキストコミュニケーションに劣る部分があります。 通話のコミュニケーションをテキストとして残せれば色々解決できそうです。 もちろんこれを…
5ヶ月前

生成AI PRレビュー pr-agentからCodeRabbitへの乗り換え
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリではAIを積極活用して開発効率や生産性を高めようと日々改善をしています。今回は生成AIコードレビューツールに関する話をしようと思います。 コードレビューツールおよび歴史 2022年にChatGPTがリリースされ、その後2023年は生成AI元年となったように感じています。2023年と2024年に様々な生成AIツール、サービスが登場しました。AIによるコードレビューもそのうちの1つです。 生成AIのパフォーマンスが良いから、生成AIにコードのレビューをさせようというもので、話は単純ですが、このようなツールは新しい…
5ヶ月前

外部ライブラリを使う際の選定基準
ミツカリ技術ブログ
はじめに こんにちは、ミツカリのたなしゅんです。 皆さんはプログラミングの際に3rdPartyなライブラリを導入していますでしょうか? ミツカリではお客様へ価値を届けるまでのスピードを早めるため、積極的にライブラリは使わせていただいています。 ミツカリでは社内のコミュニケーションにSlackを利用しており、アプリからSlackへデータを投稿する機能も有しています。 backendのrubyからslackへ投稿する際にslack-ruby-clientというライブラリを使わせていただいています。 github.com slackのfiles_uploadのAPIのV1が2025/3/11をもって…
5ヶ月前

30代半ばのジュニアエンジニアが読んだ書籍レビュー(IT技術編)
ミツカリ技術ブログ
はじめに 書籍レビュー 『イラスト図解式 この一冊で全部わかるWeb技術の基本』 / NRIネットコム株式会社 (著), 小林 恭平 (著), 坂本 陽 (著), 佐々木 拓郎 (監修) / 2017/3/16 概要 おすすめ度 学べたこと・良かった点 微妙だった点 『図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書』 / 小笠原 種高 (著) / 2019/11/7 概要 おすすめ度 学べたこと・良かった点 微妙だった点 『Web API: The Good Parts』 / 水野 貴明 (著) / 2014/11/21 概要 おすすめ度 学べ…
5ヶ月前

Rails(puma)アプリケーションのパフォーマンスチューニング
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリはtoB向けのWebアプリケーションです。そのため、複数のユーザーが同時利用しますが、リクエスト数はtoCサービスやWeb広告、メディア、その他のtoB向けアプリケーションよりは非常に少ないです。 しかし、今回パフォーマンスをチューニング(レイテンシよりはスループット優先)する機会がありましたので、その取組について話します。 背景 ミツカリの利用者は主に企業に務める人事担当者や各部署のハイレイヤー、経営層などです。また、アプリケーション領域としてはHRです。そのため、常に利用されるようなサービスではなく、to…
5ヶ月前

Next.jsのプロジェクト(コード)を2つに分割して苦労した話
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリでは創業した2015年からRuby on Railsを使ってきましたが、近年ではRailsはRestful API(Backend)として位置づけており、FrontendにはNext.jsを利用しています。 創業時から2022年頃まではサービスサイト(LP)も利用者向けのWebアプリも同一のRailsアプリケーションとして構築してきました。FrontendにはERB, Sass, jQueryなどを使っていましたが、その後FrontendにNext.jsを採用して乗り換えたという感じです。 ただ、サービスサイ…
6ヶ月前

30代半ばのジュニアエンジニアが読んだ書籍レビュー(仕事への取り組み方編)
ミツカリ技術ブログ
はじめに 自己紹介 ざっくりキャリア なぜエンジニアに? 書籍レビュー 『リーダブルコード』 / Dustin Boswell (著), Trevor Foucher (著), 須藤 功平 (解説) / 2012/6/23 概要 おすすめ度 学べたこと・良かった点 微妙だった点 『コードが動かないので帰れません! 新人プログラマーのためのエラーが怖くなくなる本』/ 桜庭 洋之 (著), 望月 幸太郎 (著) / 2023/9/13 概要 おすすめ度 学べたこと・良かった点 微妙だった点 『世界一流エンジニアの思考法』 / 牛尾 剛 (著) / 2023/10/23 概要 おすすめ度 学べたこと…
6ヶ月前

Can't find variable: gmo の対応
ミツカリ技術ブログ
はじめに こんにちは。ミツカリのたなしゅんです。 ミツカリではサービスのエラー検知にSentryを利用しています。 Sentryから以下のエラーがページごとに通知されることがありました。 Can't find variable: gmo 本記事ではこのエラーについての解説と、Sentryでの対応例を紹介します。 そもそも何のエラー? エラーについて検索すると以下のIssueにたどり着きました。 github.com このスレッドのやり取りを読んでいくと、以下のリンクが貼ってありました。 issues.chromium.org どうやらiOSのGoogleChromeにおける不具合のようです。 …
6ヶ月前

ミツカリ社におけるDatadog SyntheticによるE2Eテストの取り組み(運用編)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 以下の前回の記事ではDatadog Syntheticを選定する過程の話を主に扱いました。 tech-blog.mitsucari.com 今回の記事では、より具体的な運用の話をしていきたいと思います。 テストケース設計: タイミングと対象環境 前回以下のようなことを考えると良いということを述べました。 実行タイミング CI/CDのプロセスでdev, stg等の環境にデプロイした後で実行する prd環境にデプロイする前に実行する prd環境にデプロイした後で実行する 2時間ごとなど、定期的に実行する 対象環境 専用の…
6ヶ月前

ミツカリ社におけるDatadog SyntheticによるE2Eテストの取り組み(検討編)
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 ミツカリではDeveloper Experienceに拘っており、日々改善を行っています。CIの一環として単体テスト、インテグレーションテストを行っていますが、2022年ごろからE2Eテストも行っています。これによってSTG環境で手動でテストしてからリリースする、というような行為を減らしていますし、リグレッションテストを実現しています。 この記事ではミツカリのE2EテストとDatadog Syntheticについて説明します。 E2Eテストとは circleci.com zenn.dev E2Eテストについては解説し…
6ヶ月前

RailsのRspecでN+1をエラー扱いにするまでの戦い
ミツカリ技術ブログ
はじめに こんにちは。ミツカリエンジニアのたなしゅんです。 Backendアプリケーションにおいて、N+1問題というのは基本のキでありながらパフォーマンス影響の大きい重要な問題です。 弊社ではBackendのAPIサーバにRuby on Railsを採用しています。 本記事ではRailsにおけるN+1問題を改善していく過程とその中で派生した問題について扱います。 検知用のgem bulletというN+1問題を検出してくれる有名なライブラリがあるのでそちらを使用しています。 github.com Bullet.raise = true 上記のように設定することで、Bulletによる検出があった場…
6ヶ月前

Feature FlagのSaaSを使うか、OpenFeatureベースでセルフホスティングするか
ミツカリ技術ブログ
こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。 Feature Flagという仕組みおよびテクニックがあるのですが、弊社ではこれを用いて開発を行っています。 この記事では Feature Flag自体の説明 Feature FlagのSaaSであるLaunchDarklyの説明 Feature Flagのその他の実現パターンであるOpenFeatureの説明 これらについて扱います。 なお、現状はまだ調査・検討をしたというだけで旧来通りのナイーブな実装(後述)で運用しています。現状ではまだこの部分に特にコストを割くべきではないという判断をしています。個人的には面白…
6ヶ月前

入社4ヶ月でPJ進捗を大幅改善した話
ミツカリ技術ブログ
はじめに はじめまして。『ミツカリ』でエンジニアリングマネージャーをしている『たなしゅん』です。現在、弊社には副業の業務委託含めて12名のエンジニアが在籍しており、私は自分以外に5名をメンバとして持つチームを運営しています。 私はミツカリに2024年8月からジョインしております。入社からまだ数ヶ月ですが、担当チームのタスク進捗を大幅に改善しましたので、私のこれまでの経験をふまえたそのメソッドを共有したいと思います。 エンジニアリングマネジメントの4領域 エンジニアリングマネジメントは「テクノロジー」「プロダクト」「プロジェクト」「ピープル」の4つの領域からなり立っています。これらはそれぞれの視…
7ヶ月前