Zenn uhyo
zenn.dev/uhyo
Reactのデータ再取得、タイムスタンプで管理すると宣言的になる話【AI生成】
この記事では、Reactにおけるデータ再取得の実装方法について、タイムスタンプを用いた宣言的なアプローチを提案しています。従来の命令的な方法では、ボタンを押してrefetch()を呼び出す流れが手続き的であり、Reactの宣言的なUI思想に反していると指摘しています。代わりに、タイムスタンプをstateとして持ち、これを更新することでデータを再取得する方法を示しています。このアプローチにより、UIのバージョンを管理し、Suspenseと組み合わせることで、より自然なデータ取得が可能になると述べています。 • Reactでのデータ再取得は通常命令的であり、宣言的なUI思想に反することがある。 • タイムスタンプをstateとして持つことで、データ再取得のトリガーを状態として表現できる。 • この方法により、UIのバージョンを管理し、データ取得を宣言的に行える。 • Suspenseと組み合わせることで、ローディング状態の管理が容易になる。 • 複数の更新トリガーを統一的に扱うことができる。
AIに技術記事を書かせる：9回の反復で到達した「完璧すぎる」という逆説
この記事では、AIに技術記事を書かせる試みについて述べられています。著者は、Claude Codeを使用して、記事生成、レビュー、スタイルガイドの改善を繰り返すシステムを構築しました。最初は品質が7〜8割程度と予想していましたが、9回の反復を経て9.0/10の評価に達しました。特に、完璧すぎる記事が逆にAIらしさを感じさせるという「完璧すぎる逆説」に直面しました。システムは3つのエージェント（Writer Agent、Reviewer Agent、Style Guide Updater）で構成され、各エージェントは独立して機能します。反復を重ねる中で、メタ認知的シフトや不完全さの重要性が明らかになり、最終的には人間らしい不完全さを取り入れることで、より自然な記事が生成されるようになりました。 • AIに技術記事を書かせる試みの目的は、人間と区別できないレベルの品質を目指すこと。 • Claude Codeを使用し、記事生成、レビュー、スタイルガイド改善のサイクルを構築。 • 反復を重ねる中で、品質が向上し、最終的に9.0/10の評価を得る。 • 完璧すぎる記事が逆にAIらしさを感じさせるという課題に直面。 • システムは3つのエージェント（Writer、Reviewer、Style Guide Updater）で構成され、各エージェントは独立して機能。 • メタ認知的シフトや不完全さの重要性が明らかになり、自然な記事生成に寄与。 • 不完全さを取り入れることで、より人間らしい記事が生成されるようになった。
小手先に見えるテクニックでも、実はReact的に考えられる
この記事では、ReactにおけるuseEffectの適切な使用法と、keyを使ったテクニックについて解説しています。特に、親コンポーネントから渡されるpropsが変更された際に、コンポーネントのステートをリセットする方法としてkeyを利用することが提案されています。従来の考え方では、useEffectを使ってステートを更新することが一般的でしたが、これはReactの宣言的UIの原則に反する可能性があります。keyを使うことで、コンポーネントが新しいインスタンスとして再生成され、ステートが初期化されることが明確に示されます。これにより、Reactの基本的な考え方に沿った形で、より効率的にコンポーネントを管理できるようになります。 • useEffectの不適切な使用法を避けるためのkeyを使ったテクニックの提案 • propsが変更された際にコンポーネントのステートをリセットする方法 • keyを使うことでコンポーネントが新しいインスタンスとして再生成される • Reactの宣言的UIの原則に基づいた理解の重要性 • keyの使用がReactの基本的な考え方に合致することの説明
Biome v2の型推論を試して限界を知る
この記事では、Biome v2の型推論機能について詳しく説明しています。Biome v2は、TypeScriptコードに対するlint機能を提供し、型情報を利用したlintingを行います。従来のTypeScript-ESLintはTypeScriptコンパイラに依存しており、パフォーマンスに課題がありましたが、Biomeは独自の型推論を実装しています。ただし、TypeScriptコンパイラの複雑さから、完全な再現は不可能であり、Biomeの型推論は75%のケースを検知できるとされています。具体的な例として、Promiseを返す関数に対するlintエラーの検知能力を試し、型注釈の有無による影響を検証しています。最終的に、型注釈を明示することで、Biomeの型推論が正しく機能することが示されています。 • Biome v2はTypeScriptコードに対するlint機能を提供する。 • 従来のTypeScript-ESLintはTypeScriptコンパイラに依存しており、パフォーマンスに課題があった。 • Biomeは独自の型推論を実装しているが、完全な再現は不可能。 • noFloatingPromisesルールを用いて、Promiseがawaitされていない場合の検知能力を試した。 • 型注釈を明示することで、Biomeの型推論が正しく機能することが確認された。
.d.tsファイルをちゃんと使うために必要な知識
この記事では、TypeScriptにおける.d.tsファイル（型定義ファイル）の正しい使い方について解説しています。.d.tsファイルは、既存のライブラリやモジュールの型シグネチャを記述するもので、実装の詳細は含まれません。TypeScriptのプロジェクトでは、手動で.d.tsファイルを書く必要はなく、--declarationオプションを使って自動生成することが推奨されています。また、.d.tsファイルは、対応する.jsファイルが存在する場合にのみ意味を持ち、誤った使い方として、TypeScriptプロジェクトで手動で.d.tsファイルを書くことが挙げられています。さらに、TypeScript 5.0以降では、.d.tsファイルをimport typeでインポートすることが可能になり、これが従来の理解と矛盾する点についても触れています。 • .d.tsファイルはTypeScriptにおける型定義ファイルであり、ライブラリの型シグネチャを記述するために使用される。 • 手動で.d.tsファイルを書くのではなく、--declarationオプションを使って自動生成することが推奨される。 • .d.tsファイルは対応する.jsファイルが存在する場合にのみ意味を持つ。 • 誤った使い方として、TypeScriptプロジェクトで手動で.d.tsファイルを書くことが挙げられる。 • TypeScript 5.0以降では、.d.tsファイルをimport typeでインポートすることが可能になった。
Reactコンポーネントが「純粋である」とはどういうことか？ 丁寧な解説
