はじめに私が現在開発中のアプリケーションでは、データの検索をElasticsearchを用いて実現しています。扱う検索データには色々ありますが、今回は少し特殊な検索要件を満たす必要がありました。親子関係のあるデータにおいて、検索対象は子データに限定し、結果は子データに紐づく親データのみがほしいといったものです。SQLならばJOINを使えば簡単だろうと思いましたが、Elasticsearchでどう実現しようか少し悩みました。そして、ElasticsearchのJoin field typeを用いて親子関係のあるデータの検索をうまく実現することができたので、今回はそれについて紹介し...

はじめにこんにちは！私は現在のプロジェクトでは、主にフロントエンドの開発に従事しています。私のチームでは日々システムの品質向上や運用改善に向けた取り組みをおこなっています。特にアラート・問い合わせの初動対応までの時間は目標を決めて達成するためにチームで改善に取り組んでいます。しかし、目標はあるものの定量的に計測できておらず、「このままだと目標を達成するのが厳しそうだから改善しよう」、「まだまだ余裕だから目標を引き上げよう」といった次のアクションがすぐにできないことが課題でした。そこで、ダッシュボード上に計測した数値を表示して、チームで共通の認識を持って次のアクションを決められ...

はじめに現在のプロジェクトでは、主にフロントエンドの開発に従事しています。このプロジェクトでは、Sentryを使用してエラートラッキングを行なっています。その中でもセッションリプレイはエラー前後のユーザーの行動を再現することができ、エラーの解析に非常に有用です。しかし、プランによっては無料枠があるものの、無料枠からはみ出した分は基本料金とは別の支払いとなります。以下は執筆時点（2024/06/10）でのセッションリプレイの料金体系です。プラン名支払い方式無料枠データ保持期間１セッションリプレイあたりの料金Team月払い500リプレイ90日約$0.0...

私は普段Goのテストを書く際に、テーブル駆動テスト(TDT)を用いることが多いです。しかし、チームで開発をしていると、メンバーによってテストの書き方が異なることがしばしばあり、それにより、テストを実装する際に書き方に迷ったり、レビューがしづらくなったりと、テストの実装において問題が生じていました。そこで、ジェネリクスを活用することで、汎用的に使えるテストケースの構造体を定義し、それをプロジェクト全体で共通で使用することで、テーブル駆動テストの書き方に統一性を持たせることができたので、今回はその方法を紹介したいと思います！ テーブル駆動テストとはテーブル駆動テストとは、複数のテス...

はじめに2024/06/05 追記こちらの記事の内容をベースにした内容でスライドも公開しています。よろしければご覧ください。https://speakerdeck.com/kmtym1998/duo-zhong-deng-lu-wofang-yu-surutamenonouhau少し前にユニーク制約を使用できない状況でデータの重複をどう防ぐかについて悩み、いろいろと検討したことがありました。「重複登録を防ぐ」という観点ではまとまった知見があまり見つからなかったので記事を書くことにしました。同じような境遇の方の参考になれば幸いです。Web アプリケーションにおいて、データの...

普段の業務ではApollo Clientを使用しているのですが、以前個人開発でRelayを使用したことがあります。その際に、RelayにはOperationやFragmentの命名規則を強制する機能があり、これが個人的にはかなり開発者体験が良かったです。そこで、Apollo Clientを使っている場合でも同じことをしたいと思い、GraphQLの命名規則を強制するESLintのカスタムルールを作成しました！今回はgraphql-eslintの使い方も踏まえて、作成したカスタムルールについて紹介したいと思います！ graphql-eslintについてgraphql-eslintと...

はじめに2022 年 3 月にリリースされた Go 1.18 からジェネリクスが使えるようになりました。ジェネリクスが使えるようになって嬉しかったことのひとつに、これまで for 文でゴリゴリ書いていた Filter/Find/Map のようなスライスの扱いをより簡潔に書けるようになったことがあります。samber/lo にはジェネリクスを使った汎用的なスライス操作が実装されており、その紹介記事も散見されます。https://github.com/samber/loFilter/Find/Map などの他にもジェネリクスを活用した便利なユーティリティーが samber/lo に...

最近フロントエンドでGraphQLのLintを行うためにgraphql-eslintを導入したのですが、直近でFlat Configに移行したこともあり、いくつか詰まる箇所があったので導入方法を紹介したいと思います。 graphql-eslintとはgraphql-eslintとはThe Guildによって公開されているESLintのプラグインで、GraphQLのスキーマやオペレーションに対してLintを実行することができます。https://the-guild.dev/graphql/eslint/docs 導入方法簡単な導入方法といくつかのオプションについて紹介します。...

自分は今新卒 3 年目なのですが、直近の 2 年間は毎月何かしらのアウトプットを継続して行ってきました。色々な記事[1][2][3]に書かれているように、アウトプットをすることはたくさんのメリットがあります。自分自身、それらのメリットを享受できていると感じているので、アウトプットして来てよかったと思っていますし、今後も継続して行きたいと思っています。（あくまで個人的に意識していることなので、全ての方に当てはまるものではないことをご了承ください）しかし、アウトプットに対してハードルを感じている方や、アウトプットをしてみたいと思っていても何から始めればいいかわからない方もたくさんいると...

先日 Apollo Client 3.8 がリリースされました。このバージョンは Apollo Client 史上最大のマイナーリリースで、待望の Suspense 対応や、他にも様々な機能が含まれています。今回は、リリースされた機能と、その使い方について紹介したいと思います！ Suspense 対応まずは一番の目玉である Suspense 対応です。Relay や urql が Suspense に対応している中、ついに Apollo Client も Suspense に対応しました！今回のリリースでは Suspense に対応した 3 つ hooks が追加されたので順番に...

自分は普段、1 日平均 20 個程の PR レビューをしており、基本的にはレビュー依頼が来たら即レビューをしています。しかし、MTG の最中などにレビュー依頼が来た場合は、即レビューができずどうしてもレビュー依頼が溜まってしまいます。レビュー依頼が溜まると、レビュー漏れが発生しやすくなったり、全ての PR を一々ブラウザで開くのが面倒臭く感じてました。そこで今回は、レビュー依頼されている PR をすべてブラウザで開く GitHub CLI の拡張機能を作成したので、その紹介をしたいと思います！作成した拡張機能のリポジトリは下記になります。https://github.com/Kaz...

現在のプロジェクトでMUIとReact Hook Form（以下RHF）を組み合わせてフォームを実装しています。しかし、フォームコンポーネントの設計に関して何もルールが整備されておらず、実装が複雑になっていました。そのため、メンテナンスがしづらかったり、汎用的に使いづらい状態でした。そこで、フォームコンポーネントの設計の見直しを行なった結果、いい感じの設計ができたので、今回はその設計と実装例を紹介したいと思います！ 制御コンポーネントと非制御コンポーネントReactには制御コンポーネントと非制御コンポーネントの2つのタイプが存在します。制御コンポーネントは、フォームの入力値や状態を...

はじめに業務で携わっているプロジェクトで、ユーザがアップロードした画像の容量をサーバサイドで小さくしたい要件がありました。あまり経験のないことで、調べるなかでいろいろ学びがあったので記事に残します。 画像の圧縮処理をするコードサンプル圧縮処理のサンプルコードは以下のとおりです。今回圧縮対象としたのは jpeg と png のみです。実装には Go 標準の image パッケージとそのサブパッケージである image/jpeg と image/png を使用しました。Go のバージョンは v1.20.3 です。nfnt/resize を紹介している記事がいくつか見つかりました...

はじめに最近のプロジェクトで GraphQL を積極的に採用しており、その設計思想として Fragment Colocation を取り入れています。今回はFragment Colocationを取り入れた際のクライアントキャッシュ戦略についてまとめたので、その戦略について紹介したいと思います！キャッシュ戦略については、Fragment Colocation を使っていなくても十分適用できると思うので、GraphQL を採用している方はぜひ参考にしてもらえればと思います！今回の内容に関してスライドも公開しているので、そちらも興味のある方はご覧ください！ Fragment...

はじめにはじめまして、玉利です。普段の業務はフロンエンドの実装やUIを作成しています。今回はFigma Widgetで多機能なメモをどのように作成した話をしようと思います。 Figma WidgetとはFigmaには以下のように書いてありました。Widgets are interactive objects that extend the functionality of design files and FigJam boards. Unlike plugins that run for a specific person, everyone can see and...

はじめにgqlgen を使って union や interface を実装した事例に関する情報があまりなかったので紹介します。union / interface は GraphQL における型の一種です。https://graphql.org/learn/schema/#interfaceshttps://www.apollographql.com/docs/apollo-server/schema/unions-interfaces/ gqlgen によって 生成される型GraphQL スキーマ上で union や interface を使った定義をしたときにどういっ...

はじめに自分のチームでは開発のフレームワークにスクラムを採用しており、Google が提唱したFour Keysを元に開発生産性の向上に取り組んでいます。その中でデプロイ頻度や変更のリードタイムを改善する目的として、PR の差分をチーム内で決めた行数以下にするというルールを導入しています。これによって PR の粒度が細かくなるので、レビューのコストが大幅に減ります。また、実装の方向性が間違っている場合も早期に気づけるので、手戻りの発生を未然に防ぐことができます。しかし、この変更差分を特定に行数以下に収めること自体は個人の努力義務になっています。そこで、このルールの促進と変更行...

!2023/11/03 追記こちらの記事は slog が Go1.21 で標準パッケージに取り込まれる前に書かれています。最新の情報と乖離している可能性があることをご了承ください。 はじめに最近 slog なるロガーパッケージがあることを知り、ちょっと使ってみたくなったので試しに API サーバの実装に組み込んでみました。自分は主に GCP 使うことが多いので Cloud Logging でログを見ることを前提に実装しました。 slog とはslog は構造化ログを出力するための Go の準標準パッケージです。Go で構造化ログを吐くためのライブラリだと uber-...

はじめにいろいろな言語のバージョン管理ツールとして頻繁に使われる「~env」的なものの Hasura CLI バージョンを作りました。https://github.com/kmtym1998/hasuraenv複数のバージョンの Hasura プロジェクトを触る機会のある方はぜひ使っていただければと思います。 開発経緯私の所属する会社で開発するプロダクトでは Hasura を全面的に採用し、Hasura を使ったプロダクトがいくつか存在します。それぞれのプロダクトごとに Hasura のバージョンが違うため、開発対象のプロダクトが変わるごとに hasura update-...

はじめにはじめて OSS へのコミットに挑戦してみました。なかなか達成感があったのでやったことを記事にして残しておくことにしました。対象は仕事でもプライベートでもお世話になっている Hasura を選びました。業務で遭遇したバグがあったこともきっかけのひとつになりました。Hasura を使っている・興味のある方、OSS へのコミットに興味のある方の参考になれば幸いです。 ウォーミングアップ全く自分と同じような境遇の記事をたまたま見つけたので目を通しました。https://qiita.com/sho-hata/items/9140710ad4e409e20854いきなりコ...