React習熟度シリーズ5回目です。前回の記事ではClaude Opus 4.7のReact習熟度を測り、これまでの首位だったGPT-5.4を抜いてベンチマーク首位に立ったことを示しました。これまでの記事はこちらです。https://zenn.dev/uhyo/articles/react-profession-bench-1https://zenn.dev/uhyo/articles/react-profession-bench-2https://zenn.dev/uhyo/articles/react-profession-bench-3https://zenn.dev/u...

皆さんこんにちは。以下の記事では、Async React時代の宣言的UIとして、デバウンスをuseDeferredValueで代替する方法を示しました。https://zenn.dev/uhyo/articles/async-react-debounce記事の末尾で「実際には、ネットワークアクセスをデバウンスしている場合とか応用形もあるのですが」と述べたので、今回はネットワークアクセスを含む場合について考えたいと思います。今回の記事に登場するコードは以下のStackBlitzで実際に動作を確認できます。 今回の要件前回の記事では、ユーザーが入力すると、フロントエンドで検索結...

React習熟度シリーズ4回目です。前回の記事で「自分で妙案が出てくるまでこのシリーズは一区切り」と書いたのですが、Claude Opus 4.7がリリースされたので早速測ってみました。これまでの記事はこちらです。https://zenn.dev/uhyo/articles/react-profession-bench-1https://zenn.dev/uhyo/articles/react-profession-bench-2https://zenn.dev/uhyo/articles/react-profession-bench-3ベンチマークの設定は前回までと同じ、13...

!これは筆者が業務の経験をもとに考察した内容であり、筆者が所属する会社の実際の方針や運用を示すものではありません。あくまで一考察としてお楽しみください。スキルとは、今や多くのコーディングAIエージェントに組み込まれた機能です。自然言語で示された条件を元にAIが自動的にスキルを起動することで、スキルとして設定されたプロンプトをAIが読み込み、それに従ってAIが動くというものです。また、いわゆるスラッシュコマンドとして、ユーザーが明示的にスキルの使用を指示することもできます。現在、スキルはAIを拡張し、カスタマイズする主要な手段として用いられています。つまり、良いスキルを用意してあげ...

React習熟度シリーズ3回目です。これまで、6つの仕様に対してLLMにReactアプリを実装させ、それを評価者LLMがスコア付けするという形で実験を行ってきました。対象は、Claude Codeの3モデル（Sonnet・Opus・Haiku）とGPT-5.4です。今回の記事では、仕様数を13に増やしてさらに詳細に習熟度を測り、知見を得ることを目的としています。https://zenn.dev/uhyo/articles/react-profession-bench-1https://zenn.dev/uhyo/articles/react-profession-bench-2...

以下の記事の続きです。前回の記事ではClaude Codeの3つのモデルに対してReactの習熟度を測るベンチマークを行いましたが、今回はGPT-4.1とGPT-5.4に対して同じ評価を行いました。なお、筆者はCodexを使っていないので、GitHub Copilot CLIを介してこれらのモデルを使用しています。ベンチマークの設定については前回の記事をご覧ください。https://zenn.dev/uhyo/articles/react-profession-bench-1 結果スペックSonnetOpusHaikuGPT-4.1GPT-5.400...

皆さんこんにちは。コーディングエージェントの発展により、プログラムの多くの部分をAiが書いてくれるようになりました。しかし、筆者が得意とするReactに関しては、動くものを作ることはできるにせよ、人間が十分に指図しなければ質のいいコードが書けないことも多いと感じています。そこで、今回は、Claude CodeのReact習熟度を測るための簡単なベンチマークを作ってみたので、その結果を共有します。 注意と予防線ベンチマークと名乗ると、粗探しをしたい方々が寄ってくる傾向があります。その前に、今回の設定が以下のとおりであることをご理解ください。あくまで筆者が考える「習熟度」を測っ...

宣言的UIとは何か、皆さんは答えられるでしょうか。「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだという考えが伝わってきます。上述のようなDOMの更新の話はその一例にすぎません。やりたいこと: ...

皆さんこんにちは。この記事では、筆者が最近開発した新しいReactフレームワークであるFUNSTACK Staticについて紹介します。https://github.com/uhyo/funstack-staticドキュメント FUNSTACK Staticの概要FUNSTACK Staticは、React用のサーバーを立てる必要がなく、静的なファイルサーバーにデプロイできる古き良きSPAを作ることに特化したフレームワークです。それでいて、React Server Components (RSC) による最適化をしっかり効かせることができるのが特徴です。以前の記事で説明した...

Reactでの、Suspense以後の設計に不慣れな方に向けて、Suspenseの活用法をjotaiを通じて解説します。

最近熱いWeb標準といえば、Navigation APIですね。これは、従来SPAを支えてきたHistory APIを置き換えるものです。Google Chrome 102、Firefox 147、Safari 26.2でサポートされており、（まだ安定版になっていないものも含めればですが）各ブラウザの最新版で利用可能なAPIです。Navigation APIは、SPA向けのルーターライブラリ（例えばReact Router）が裏で利用するようなAPIです。しかし、そのような既存のルーターはこれまでHistory APIを使ってきたため、過去の遺産を背負いながらNavigation AP...

AI生成記事についてこの記事は生成AI（Claude Code）が書いた記事です。前回のAI生成記事の試みから、さらに投稿者（人間）の文体を学習させ、投稿者の記事に近いスタイルになったので、その成果発表でもあります。前回同様、投稿者が自分で書いた記事に比べると至らない点はあるものの、技術記事としての妥当性については投稿者が責任を負うものです。ただし、筆者の経験（社内のダッシュボードアプリケーションとか）については完全にAIによる捏造である点はあらかじめご了承ください。皆さんこんにちは。最近、SPAアプリケーションでアクセストークンの定期更新を実装する際に、マルチタブ環境でのトー...

皆さんこんにちは。今回は、筆者が公開しているESlintプラグインeslint-plugin-import-accessの新バージョン (v3.1.0) で追加された新しいオプション packageDirectory を紹介します。このオプションにより、プラグインの活用の幅がかなり広がります。ぜひ試してみてください。 復習: eslint-plugin-import-accessとはまず、このプラグイン自体をご存じない方のために、基本的なところを解説します。次の画像はeslint-plugin-import-accessの機能を端的に説明するものです。eslint-plugi...

Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReac...

AI生成記事についてこの記事は、AIが生成した記事を無修正で公開しています。投稿者（人間）の普段の作風・意見と異なる点や内容の粗もありますが、技術記事として公開するに足るクオリティであるという投稿者の判断と責任により投稿するものです。ただし、記事に含まれる、経験に基づくエピソードは全てAIによる創造である点はご了承ください。ちなみに、記事の生成は事前に用意したスタイルガイドに基づき、人間が記事のアイデアと結論を与えてAI (Claude Code) が出力したものであり、出力結果に対する追加の修正依頼などは行わない一発撮りです。皆さんこんにちは。最近、データ再取得の実装パターン...

!この記事の前半は、AIが出力した記事を完全無修正でお送りします。なお、AIが出力した本来の記事タイトルは「AIに人間と区別できない技術記事を書かせる：9回の反復で到達した「完璧すぎる」という逆説」ですが、さすがに釣りタイトルになってしまうので少し変えています。 なぜこんなことを始めたのか結論から言うと、AIに技術記事を書かせて人間と区別できないレベルまで持っていけるか、というのを試してみたくなった。Claude Code（AnthropicのCLI）を使って、反復的に記事を生成→レビュー→スタイルガイド改善、というサイクルを回す仕組みを作りました。最初は「まあ、せいぜい7...

皆さんこんにちは。React、使っていますか？ Reactを″正しく”使うことは難しいと感じる方も多いのではないでしょうか。特に筆者はReactの正しい使い方に厳しく、こんな記事も出しています。熟練のReact使いでもなければ、この記事を読んで難しいと思うのも仕方がありません。https://zenn.dev/uhyo/articles/useeffect-taught-by-extremistuseEffectに関しては、React公式のドキュメントでも「そのエフェクトは不要かも」というページがあり、useEffectを使ってしまいがちだが、useEffectの使用が適していない...

皆さんこんにちは。先日、Biome v2がリリースされ話題となりました。Biome v2の新機能の一つに型推論があります。TypeScriptコードに対するlintにおいて型情報を使う (type-aware linting) 機能は、これまでのところTypeScript-ESLintによって提供されてきました。これは、実際のTypeScriptコンパイラを使って型情報を取得するので、重いという欠点がありました。TypeScript自体もGoへの移植などを通じてパフォーマンス改善に取り組んでいますが、Biomeはこの問題に対して別のアプローチをとっていました。それが、本家TypeScr...

.d.tsファイルとは、TypeScriptにおいて型定義ファイルと呼ばれるファイルのことです。残念なことに、.d.tsファイルは誤った使い方をされているのを見かけることがあります。そこで、この記事では、.d.tsファイルを正しく使うために必要な知識を解説します。 .d.tsファイルとは.d.tsファイルについては、とりあえずTypeScript公式による以下の説明を読んでください（Announcing TypeScript 5.5から引用）。Declaration files (a.k.a. .d.ts files) describe the shape of existin...

Reactにおいては、コンポーネントは純粋であるべきだとされています。これはReactのルールの一部であり、ルールを守らずに非純粋なコンポーネントを作った場合、さまざまな不都合が発生する恐れがあります。書いた通りの挙動にならない（ように見える）今はうまく動いていたとしても、関係ない箇所を修正すると急に壊れる最適化（React Compiler）によって挙動が変わり、バグの原因となるReactの新機能と互換性が無くなり、新機能の恩恵を受けられなくなるReactのアップデートで壊れてしまったり、破壊的変更の影響を受けたりする単純にコードの可読性が低下し、保守性が悪化するでは...