React Hook FormはなぜReact Compilerのメモ化と噛み合わないのか

makotot — Thu, 09 Apr 2026 21:18:35 GMT

はじめに React Hook Form を利用したアプリケーションで React Compiler を有効にすると意図しない動作になることがあります。たとえばformリセット後の再送信でバリデーションエラー表示されないという問題が起こりえます。このReact Compilerを有効化する上での問題はReact Hook Formのリポジトリーでも以下のissueで報告されています。 https://github.com/react-hook-form/react-hook-form/issues/12298 ここではなぜこのような問題が起きるのかを整理してみたいと思います。 ! こ...

React AriaのTableの挙動をData Gridパターンから理解する

makotot — Wed, 10 Dec 2025 22:47:40 GMT

この記事は、カオナビ Advent Calendar 2025（シリーズ1）11日目です。 https://qiita.com/advent-calendar/2025/kaonavi はじめに React Ariaには、アクセシビリティに配慮した多くのコンポーネントが用意されていて、その1つにTableコンポーネントがあります。 https://react-spectrum.adobe.com/react-aria/Table.html Tableコンポーネントによって高機能な表形式のUIを実現できますが、HTMLが持つ要素や一般的なウェブアプリケーショ...

Next.js App RouterのコンポーネントをVS Codeでサーバー・クライアント別に可視化する

makotot — Mon, 09 Jun 2025 13:33:47 GMT

Next.js v13でサーバーコンポーネントが導入されて以降、App Routerを用いた開発では、あるコードがサーバー側・クライアント側のどちらで実行されるのかを意識する必要が出てきました。この境界が識別しづらいことは、開発者にとって新たな課題となっていると思います。実行される環境を見誤ると、クライアント専用のAPIをサーバーコンポーネントで呼び出してしまったり、反対にサーバーコンポーネントのみで行いたい処理をクライアントサイドへ露呈してまいセキュリティーリスクへ繋がったり、またバンドルサイズが気づいたら想定をはるかに上回る大きさへ膨れ上がっているかもしれません。この記事ではこの...

なぜReact Ariaコンポーネントをサーバーコンポーネントにおいて利用するとNext.jsでビルドエラーになるのか

makotot — Wed, 15 Jan 2025 14:21:48 GMT

React Ariaのコンポーネントをサーバーコンポーネントで利用すると、Next.jsではビルドエラーとなる。具体的には、 import { Link } from "react-aria-components"; export function FooLink() { return foo; } このようなコンポーネントがあるだけで以下のメッセージとともにビルドエラーとなる。 'client-only' cannot be imported from a Server Component module....

Redocly CLI Configurable rulesでOpenAPIドキュメントをLintする

makotot — Wed, 11 Dec 2024 12:44:49 GMT

この記事は、カオナビ Advent Calendar 2024（シリーズ1） 11日目です。 https://qiita.com/advent-calendar/2024/kaonavi はじめに OpenAPIを用いたスキーマ駆動開発では、OpenAPIドキュメントが「Single Source of Truth（唯一の信頼できる情報源）」として重要な役割を担うと思います。 APIの仕様やデータ構造がこのドキュメントに集約されることで、クライアントとサーバーは同じ情報を共有し、整合性を保ちながらの開発がしやすくなるでしょう。結果として、クライアント・サーバー双方の開発を非同期に進...

RenovateでVoltaを検知対象から除外したい場合

makotot — Thu, 24 Oct 2024 15:40:20 GMT

Renovateを用いてNode.jsプロジェクトの依存ライブラリー更新を行う場合、package.jsonに以下のようなVoltaの設定が含まれていると、更新対象として検知される。 package.json "volta": { "node": "20.11.1" } Node.jsのバージョンアップをRenovateの対象へ加えたい場合は特に問題ないけども、Node.jsに関してはRenovateの対象から除外して手動更新したいケースもある。そのようなケースでvoltaの設定フィールドをどのように扱えるか、というメモ。 ! ここで言及しているRenovateのバージョンは、...

デザインシステムのESLintプラグインから運用のヒントを学ぶ

makotot — Tue, 27 Feb 2024 16:55:03 GMT

はじめに 2021年のデザインシステムに関する調査によると、回答数があまり多くないものの、成功を収めているというデザインシステムは4割程度という結果が出ている。 But a majority of design systems ended up imploding. According to the 2021 Design Systems Survey, only 40% of the systems were successful. https://storybook.js.org/blog/why-most-design-systems-implode また、alexpate...

デザインシステムのUIプロトタイピング環境としてPlayroomを試す

makotot — Sat, 10 Feb 2024 04:09:32 GMT

はじめに Chakra UIやTailwind CSSなど、人気のあるUIフレームワークが持つブラウザー上のPlayground環境は、ユーザーがローカルに環境を用意することなくUIフレームワークを試すことができる。 https://play.chakra-ui.com/playground https://play.tailwindcss.com/ 自身でデザインシステムのコンポーネントライブラリーを開発する場合にこのようなPlayground環境があると、そのコンポーネントを用いたプロトタイピングが可能になり良いかなと思うけど、それを実現できるツールとしてPlayroomを試し...

eslint-plugin-jsx-a11yのimg-redundant-altが日本語に対応していないことについて

makotot — Mon, 22 Jan 2024 16:31:44 GMT

はじめに JSXにおけるアクセシビリティ観点のLintルールを持つESLintプラグインにeslint-plugin-jsx-a11yがある。直近のメンテナンスがあまり活発ではない印象があるものの、主にReactアプリケーションのアクセシビリティ対応を静的解析でチェックするために広く利用されているプラグインだと思う。このESLintプラグインの推奨設定であるrecommendedにはimg-redundant-altというルールが含まれているけど、このルールは現状日本語のようなマルチバイトの言語のJSXには対応していないと考えられるので、そのメモ。 ! ここで言及しているesli...

Tailwind CSSのクラス属性長くなりがちな問題について

makotot — Mon, 11 Dec 2023 12:05:05 GMT

この記事は、カオナビ Advent Calendar 2023（シリーズ1） 11日目です。 https://qiita.com/advent-calendar/2023/kaonavi はじめに Tailwind CSSというと、ユーティリティーファーストのCSSフレームワークとして非常に人気がありますが、一方で、批判的な意見を度々目にすることもあるフレームワークです。批判的な意見の中でもよく目にするのは、クラス属性に膨大な量のクラスが指定されることでHTMLが読みづらいという類の指摘だと思います。ここでは、Tailwind CSSを利用しているプロジェクトにおけるクラスが長す...

Edgeの3DビューでDOM要素の重なり順を可視化する

makotot — Thu, 03 Aug 2023 18:30:34 GMT

はじめに CSSを書いていると、DOM要素の数が多かったり、そのネスト構造が深かったり、画面の特性上どうしてもz-indexなどによる優先順位の管理に苦労するケースは多々あると思う。重なり方が意図通りではないとき、画面全体の要素の重なり順を可視化して調査する手段があると良いかなと思うけど、Edgeブラウザの3Dビューがそれに適していそう。 https://twitter.com/EdgeDevTools/status/1158485601798119424 3Dビュー自体は2020年ぐらいには正式な機能としてEdgeに入っているもの。もともとFirefoxに同じような機能があって、...

大規模コードベース向けASTツールのast-grepについて

makotot — Wed, 05 Jul 2023 15:08:54 GMT

大規模なコードベース向けの高速なASTツールとしてast-grepというものがある。これについての調査メモ。主に以下の公式ドキュメントを読み進めて、利用方法、パターンやルールの詳細などについて理解を深める。 https://ast-grep.github.io/ ast-grepとは公式ドキュメントでは、コードの検索からLint、codemodに至るまでASTツールとして網羅的にカバーできるツールであることが以下のように表現されている。 Think ast-grep as an hybrid of grep, eslint and codemod. 結果に精度が求められる場面...

TypeScriptのエラーメッセージの読み方について

makotot — Sat, 17 Jun 2023 17:59:28 GMT

TypeScriptのエラーメッセージは、型が複雑になればなるほどエラー発生時にその理解を難しくするエラーメッセージとなる傾向があると思うけど、どのようにエラーメッセージを読むと理解が捗るのか確認するメモ。 ! ここでのTypeScriptは5.1.3のバージョンを利用したもの。エラーメッセージはtscコマンドの実行結果で表示されるものを利用している。エラーメッセージ例えば、以下のような型エラーが起きるTypeScriptのコードがあった場合、 type Func = () => { foo: { bar: string; baz: number; ...

Atomic CSS-in-JSとは何か

makotot — Mon, 05 Jun 2023 14:54:41 GMT

はじめに Atomic CSSとCSS-in-JSの両方を取り入れた概念であろうものとして「Atomic CSS-in-JS」というワードがある。これが具体的に何を指しているのか不明瞭なので、整理してみる。 https://sebastienlorber.com/atomic-css-in-js Atomic CSSとは何か？まずはAtomic CSSが何かを整理する。 Atomic CSSとは何か。それはOOCSSやSMACSSといったCSSの設計手法の1つになるけど、CSS-TricksのAtomic CSSについての記事によると、以下のように Atomic CSS is...

Excess Property Checkingとは何か

makotot — Thu, 25 May 2023 15:42:01 GMT

はじめに Excess Property Checking（日本語だと「過剰な（ or 余計な）プロパティのチェック」だろうか？）というものが何か、理解が曖昧なので整理してみる。 ! Playgroundでの確認等は、これを書いている時点でのTypeScriptの最新バージョンである5.0.4で行っている。 Excess Property Checking 通常、構造的な型システムを採用するTypeScriptにおいて、必須のプロパティさえ満たされていればその他のプロパティについては問題とならない。ただし、オブジェクトリテラルを変数へ代入するときと関数の引数へ渡すときに限って...

ESLintのconfigがどのように変わり得るか（flat configとは何か）

makotot — Thu, 11 Aug 2022 16:46:49 GMT

はじめに https://eslint.org/blog/2022/08/new-config-system-part-2/ ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is...

jestにおけるアサーション数の制限について

makotot — Sun, 17 Jul 2022 16:09:59 GMT

jest/max-expects eslint-plugin-jestに、テスト毎にexpectの回数を制限するmax-expectsのルールを提案して、Pull Requestを出して、v26.6.0でリリースしてもらった。 https://github.com/jest-community/eslint-plugin-jest/releases/tag/v26.6.0 なのでeslint-plugin-jestのv26.6.0からjest/max-expectsをrulesに追加すると .eslintrc.json { ..., "rules": { .....

フロントエンドに関連するRustのOSSや学習リソース調査メモ

makotot — Mon, 27 Jun 2022 16:50:13 GMT

近年、フロントエンド関連のRustで実装されているOSSや学習する上での情報が増えてきている印象があって、そういうOSSおよび学習リソースのリンクを収集したメモ。フロントエンド開発に少しでも関連してそうなものは主観で判断してリストに入れているので、フロントエンドとは言えないのでは？というものも含まれていると思う。 ! 特に基準を明確に設けずにただリストアップしてカテゴリ分けしていることは明記しておく。 OSS 以下、OSSのGithubリポジトリへのリンク。内容を精査しているわけではなくて見つけたものをリストにひとまず追加し続けて、主観でカテゴリ分けしたもの。調査時点でRus...

React v17の破壊的変更について改めて確認

makotot — Tue, 21 Jun 2022 16:57:23 GMT

v17.0.0のリリースはもう2年近く前のことだし、v18もリリースされてv17はもう最新メジャーバージョンでもないので今更感が強いけども、改めてv17での破壊的変更を確認する。以下のReact公式の記事で破壊的変更について確認しつつ、必要に応じてStackBlitzで挙動をv16とv17で比較する。 https://ja.reactjs.org/blog/2020/10/20/react-v17.html https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html#other-breaking-changes なお、StackBl...

Storybookのテストランナー

makotot — Sun, 29 May 2022 06:31:19 GMT

はじめに Storybook test runner turns all of your stories into executable tests. https://github.com/storybookjs/test-runner Storybookの全てのStoryをテスト可能にする@storybook/test-runnerについてのメモ。 Storybookの公式ドキュメントではv6.5からテストランナーについてのページが設けられている。何をテストするものかテスト対象についてはplay関数の有無によって異なる。 For those without a pl...

makototさんのフィード