株式会社GENDA FE/BE開発部のshinnokiです。この記事はGENDA Advent Calendar 2025 シリーズ1 20日目の記事です。https://qiita.com/advent-calendar/2025/genda はじめにソフトウェア開発において、2025年は Cursor や Claude Code をはじめとしたAIツール/AIエージェントによって大きく環境が変わった1年だったかと思います。自分にとっては、新規開発のプロジェクトに関わる機会があり、React Server Components (RSC) および Next.js App R...

AIツールと攻めの技術選定

株式会社GENDA FE/BE開発部のshinnokiです。この記事は GENDA Advent Calendar 2025 シリーズ2 Day 12 の記事です。https://qiita.com/advent-calendar/2025/genda モチベーション最近 TypeScript で Hono と Drizzle ORM を用いてバックエンド開発をしています。最初のうちはシンプルでよかったものの、徐々に複雑になるにともなってレイヤーを整理してテストを書きやすくしたいよねという話が出てきました。こういったときは DI (Dependency Injection:...

TypeScript でライブラリを使わない DI 方法の比較

最初に結論プレビュー機能を設定した上で「ブランチの自動検出パターン」に pr-* を追加すると自動検出のアクセスコントロール設定がプレビュー環境にも適用されました！！ 背景 Amplify Hosting についてAWS Amplify Hosting は数クリックで GitHub などのリポジトリと連携して Next.js などの SSR を含むウェブフレームワークアプリケーションや SPA などをデプロイできるサービスです。要は Vercel の AWS 版のようなものですが、 Next.js の最新機能への追従などは Vercel に劣るものの既に AWS を使っ...

Amplify Hosting のプレビュー機能で Basic 認証を有効化する

背景先日 SNS で 「React 19 で Recoil が動かないので剥がしている」 という情報を目にしました。https://x.com/kiririLee/status/1866843717086437603私が関わっているプロジェクトで Recoil を使用しているものがあるのですが、React 19 で動かないというのはこの資料を見て初めて知ったので驚きました。実際に React 19 にアップグレードしてみたところ、確かに画面が真っ白になってしまい、コンソールを見ると Uncaught TypeError: Cannot destructure property...

Recoil が React 19 で動かないらしいので Jotai に移行した

はじめにこの記事は GENDA Advent Calendar 2024 5日目の記事です。https://qiita.com/advent-calendar/2024/genda株式会社GENDA FE/BEエンジニアの shinnoki です。GENDA ではテック組織一丸となって生成 AI を用いた開発生産の向上に取り組んでおり、GitHub Copilot や ChatGPT Team が業務で使えます。私はコードを書くときに GitHub Copilot によるサジェストは活用している[1]のですが、いまいちそれ以上に生成 AI を活用できいない感じがしていて、も...

ChatGPT に聞きながら React.FC を function に書き換えてみた

株式会社GENDA FE/BEエンジニアの shinnoki です。先日社内で GraphQL および Hasura の勉強会を開催したのですが、自分にとっても知識をまとめるいい機会となったため、その際のスクリプトを記事として公開いたします。とりとめのない記事ではございますが GraphQL や Hasura の導入検討にご利用いただければ嬉しいです。なお自分の知識をもとに十分な裏取りをせず書いた内容もございますので、誤った情報がございましたらコメントにてご指摘ください。 開催の背景GENDA グループはエンターテイメントという広い領域の中でさまざまな事業を展開しており、それ...

GraphQL / Hasura の社内勉強会を開催しました

背景2023年12月頃に alpha 版がリリース、その後 beta, RC と段階を踏んでいた Storybook 8 が、2024年3月13日に正式リリース[1]されました 🎉https://storybook.js.org/blog/storybook-8/シンプルなプロジェクトであれば npx storybook@latest upgrade でいい感じにアップグレードしてくれるのですが、少し複雑な修正が必要だとうまく行かないことも多く、今回もその例に漏れずエラーが出てしまったため、手動であれこれ対応しながら 7.6.6 から 8.x にアップグレードしました。[2]...

Storybook 8 がリリースされたので早速アップグレードしてみた (React/Next.js)

背景デジちゃいむ では Hasura を採用しており、セキュリティ対策として Allow List によって所定の GraphQL リクエストのみを許可するような設定をしています。この Allow List を生成するために GraphQL Code Generator の @graphql-codegen/hasura-allow-list プラグインを使用していますが、クライアント側で TypeScript のコード生成に使用している @graphql-codegen/typed-document-node と生成の微妙に挙動が異なり[1]、 Allow List と一致しな...

ソースコード内の GraphQL DocumentNode を解析するために ts-morph に入門してみた

遭遇したエラーReact のバージョンを上げようとした際 @types/react と @types/react-dom を ~18.0.0 から ~18.2.0 に上げたところ、以下ようなエラーが発生しビルドが失敗するようになってしまいました。Type 'React.ReactNode' is not assignable to type 'import(".../node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.  Type 'PromiseLikeOfReactNode' ...

@types/react をバージョンアップしようとしたら複数バージョン入ってエラーになった

はじめにこの記事は GENDA Advent Calendar 2023 13日目の記事です。https://qiita.com/advent-calendar/2023/genda株式会社GENDA FE/BEエンジニアの shinnoki です。今年は自分にとって色々と変化のあった年で、年初にはアーリーのスタートアップでCTOを務めておりましたが、ご縁があり8月にGENDAに入社いたしました。最近社員インタビューも公開されて入社の経緯なども触れていただいたため、興味があればぜひご覧ください。https://note.com/genda_jp/n/nb30025eda3a...

フロントエンドのキャッチアップ大変だよねという話 2023

はじめにExcel で受け取ったデータを JSON に変換したいと思ったこと、ありませんか？自分はしばしばあるのですが、普段は TypeScript を使って開発することが多いため使い慣れていない VBA を使うのも意外と大変なので、今までは Google スプレッドシートにコピーして GAS で出力していました。「excel json」などで検索すると Microsoft 公式の Office スクリプトに関するドキュメントが出てきて、そこには何やら TypeScript のサンプルコードが登場しているのですが、実際にやってみたという記事はあまりなく試しにやってみたところとて...

Office スクリプト(TypeScript) で Excel からシュッと JSON を出力する

ストレッチ専門店 Dr.stretch を運営する 株式会社nobitel にて業務委託をしている shinnoki です。https://doctorstretch.com/https://corporate.nobitel.jp/ストレッチとウェブ開発は一見すると遠い分野ですが、 nobitel では「健康 × スポーツ × IT」を掲げ、全国約200店舗（2023年7月現在）の Dr.stretch で使われるお客様・店舗向け業務アプリ「Ficks」を社内で開発しています。私は4月から業務委託として関わらせていただき、開発生産性および開発者体験の向上のためのいくつかの改善を...

Riot.js も Next.js 上で動かしちゃって React に移行している話

背景monorepo で TypeScript のプロジェクトを構成するとき、設定を共通化する方法として root ディレクトリに tsconfig.base.json ファイルを置き "extends": "../../tsconfig.base.json" のように指定する方法がよく使われます。ところが先日 Turborepo を導入したついでに Examples (以降、元ネタ) を眺めていたところ tsconfig や eslint-config-custom という専用のパッケージを切って管理していたのを見つけました。この方法をもとに、よりいい感じに管理するために少し...

monorepo (yarn workspace) で tsconfig や .eslintrc をいい感じに管理する

背景Vercel はフロントエンドのプロジェクトをデプロイ先として非常に簡単で使いやすいですが、 AWS のサービスで似たようなものとして AWS Amplify Hosting が存在します。Next.js のデプロイという観点でいうと同じ開発元のサービスである Vercel のほうが圧倒的に充実していますが、シンプルな静的サイトのデプロイ先として AWS Amplify Hosting は十分な機能を備えており、 AWS で一元管理できるメリットもあるので、簡単なサイトをひとつ移行しようとしていました。Web サイトを無停止で移行する際、証明書の扱いがネックになりますが、 ...

Vercelで使用しているドメインが、CAAレコードが原因でAWSで証明書発行できなかった

背景あるテーブル parent_table のレコードを挿入するとき、関連テーブル child_table にも同時にレコードを挿入したいことはよくあると思います。今回、後から機能追加により関連テーブルを追加したのですが、既存の parent_table に対してデフォルト値となる child_table を複数行挿入したいというシーンがあり、パッと方法が分からなかったため調べました。 VALUES リストを使う方法INSERT INTO ... SELECT ... を使ってレコードを挿入するのですが、 SELECT するデータとして parent_table と Pos...

PostgreSQLで関連テーブルに複数行のレコードを挿入する

はじめにTypeScript で使っている aws-sdk のバージョンを上げようと思って調べたところ、リポジトリの README に v3 のアナウンスが出ていることに気づきました。Version 3.x Now AvailableThe version 3.x of the AWS SDK for JavaScript is generally available. For more information see the Developer Guide or API Reference.https://github.com/aws/aws-sdk-jshttps:...

AWS SDK for JavaScript v3 にアップデートした

背景GraphQL Code Generator を使うと GraphQL のスキーマから TypeScript のコードを生成してくれ型安全や補完の恩恵を受けて快適に開発ができるのですが、生成されたコードに対する import が VSCode 上でなかなか反映されないという問題があります。生成したコードを開くか VSCode 自体をリロードすれば正しく認識してくれるためほんの数秒の手間なのでそこまで影響はないのですが、そのことについて README に書いたり新しく開発に関わるメンバーに「generated.ts 開いた？」という謎の初見殺しが発生してしまうことが問題でした。...

GraphQL Code Generator で生成したファイルが VSCode に反映されない問題

はじめに@testing-library/react で Material UI の TextField を取得する際、 label が設定されていても getByRole や getByLabelText で取得したときに label が正しく取得できません。調べると inputProps を使って data-test-id を使う方法も出てきますが、テストのために data-test-id を指定するのは極力避けたく、他の方法を調査していました。 結論label を設定する一見不要でも id を設定するgetByRole または getByLabelText...

React Testing Library で Material UI の TextField を取得する方法

はじめにNext.js でサービスを開発しており、エラー検知に使っている Sentry の SDKをアップデートしようとしたところ、以前に比べドキュメントが充実していて新しく @sentry/nextjs というパッケージが登場したことでかなり設定が楽になっていました。https://docs.sentry.io/platforms/javascript/guides/nextjs/Next.js のリポジトリ内にも設定のサンプルがあります。（examples 内のコードは他にもいろいろと充実していて参考になります）https://github.com/vercel/nex...

Next.js / Sentry / Vercel の連携が楽になっていた件

2021/12/14更新v2.1.0-beta.3 以降で arm64 ビルドが含まれるようになりました！🎉v2.1.0-beta.3 以降のバージョンを使用することでこの記事の内容は不要になります。 Docker Desktop の Apple Silicon 対応状況Docker Desktop for Mac は、2021/04/25に公開された v3.3.1 で Apple Silicon に正式対応しました。https://matsuand.github.io/docs.docker.jp.onthefly/desktop/mac/install/しかし実際に...

Docker on M1 MacでHasuraを動かす

Origin ヘッダー、 CORS とはブラウザから JavaScript で別ドメインの API 、画像、音声ファイルなどのリソースを利用するときはもろもろの脆弱性（詳しくは割愛）を防ぐため、 CORS という仕組みを使いリクエストの Origin ヘッダーを見てアク...

React NativeのWebSocketは接続先のホストがOriginに使われる

この記事は GraphQL Advent Calendar 2020 8日目の記事です。前回の記事は @mtsmfm さんの GraphQL アンチパターン - 孫煩悩 - でした。概要TypedDocumentNode は、 GraphQL Code Genera...

2021年にGraphQL Code Generatorを使うなら、TypedDocumentNodeを使おう

はじめにAWS CDK は TypeScript や Python などのプログラミング言語を使って AWS CloudFormation のテンプレートを定義できるツールです。 YAML や JSON で定義するのに比べると可読性が高く、 TypeScript を使っ...

AWS CDKでCognitoユーザープールを作るとメールアドレスが変更できない問題とその解決策

はじめに最近 Next.js の SSG (Static Site Generator: 静的サイト生成) の機能が強化されにわかに盛り上がっています。SSG の用途では今までは Gatsby.js や React から Vue に浮気して Nuxt.js を選択した...