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

はじめに少し前にユニーク制約を使用できない状況でデータの重複をどう防ぐかについて悩み、いろいろと検討したことがありました。「重複登録を防ぐ」という観点ではまとまった知見があまり見つからなかったので記事を書くことにしました。同じような境遇の方の参考になれば幸いです。Web アプリケーションにおいて、データの整合性を担保することは重要です。一般的にデータの一意性を保証するのに RDB のユニーク制約がよく使われています。ですが、ユニーク制約の作成が難しい場合があります。設計上どうしても難しかったり、機能のリリース後に一意性を保証する必要が生じたりなど、それなりの理由があると思います。...

普段の業務では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いきなりコ...

はじめにフロントエンドの有名なデザインパターンの1つにContainer/Presentationalパターンというものがあるのですが、いくつか記事を見ていると記事によって多少実装方法が異なってたり、hooksによるContainer/Presentationalパターンの置き換えなどもよく見かけるのでContainer/Presentationalパターンについて改めて整理してみました。 Container/PresentationalパターンとはContainer/Presentationalパターンとは、ロジックとUIを分けて実装することで関心の分離を図るフロントエンド...

はじめにGraphQLを使用している関係でファイルをダウンロードする際には署名付きURLの生成をBEにリクエスト受け取った署名付きURLを元にGCSのファイルにアクセスしてファイルを取得とい処理が必要になるのですが、署名付きURLを使用してGCS上のファイルをローカルに保存するまでにいくつか詰まったので参考までに紹介したいと思います。最終的なコードは下記にpushしてあります。https://github.com/KazukiHayase/gcs-signed-url-download-sample 前提React 17.0.2 (Next.js 12.0.9...

はじめにUIコンポーネントとしてMUIを使用して選択可能なテーブルを実装する際に、公式のサンプルが少しわかりずらかったので公式を参考にしつつ自前で実装したいと思います。また行の選択に関するステートやロジックはカスタムフックで抽出して、汎用的に使えるようにしていきます。https://mui.com/components/tables/#sorting-amp-selecting最終的なコードはGithubにpushしてあるので、参考にしてみてください！https://github.com/KazukiHayase/mui-selectable-table-sample ...