Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに GitHub Copilotを使っている開発者の皆さん、.github/copilot-instructions.mdというファイルを作成していますか？ このファイル1つで、Copilotをあなたのプロジェクト専用にカスタマイズし、もっと賢く、便利に使いこなすことができます。 本記事では、その強力な機能と具体的な活用方法を紹介します。 copilot-instructions.mdの紹介 一言で言えば、GitHub Copilot版のCLAUDE.mdです。 つまり、GitHub Copilotに与える指示書です。 このファイ
TanStack DB ~状態管理の新しい考え方~
こちらの記事はReact Tokyo ミートアップ #8にて発表させていただいた内容をより深堀りした記事となっています。 登壇資料はこちらです。 TanStack DB ~状態管理の新しい考え方~ TanStack DBとは TanStack DBは、フロントエンドに 永続化層（DB） を設け、コンポーネントから直接クエリできる仕組みを提供します。 従来は、バックエンドのDBを正とし、フロントエンドはそれを定期的に問い合わせる形が一般的でした。 TanStack DBはこれを逆転させ、フロントエンドがデータの主導権を持つ 形にします。 つまり「DBをフロントエンドに持ってきた」感覚で使えるのが魅力です。 TanStack DBは何が嬉しいのか 楽観的更新の自動化 同じTanStackシリーズのTanStack QueryはデフォルトではUIの楽観的更新をしません。 つまり、失敗することを前
React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog
エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（
はじめに こんにちは、森茂です。 先日公開したmicroCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】に引き続き、今回は後編として前編で紹介させていただいた構成にあわせて、実際にどのような実装とチームへの浸透を行っていったかについて紹介いたします。 なお、記事内に記載している仕様、ソースコードは説明用として省略や変更、部分的な引用を行っています、実際のサービスとは異なる箇所もある点をあらかじめご了承ください。 前編より 前編ではmicroCMSのフロントエンドアーキテクチャをどういった背景、構成で採用したかを紹介しました。実装の段階に進むにあたっては、その中でもとくに責務（関心）の分離と負担なく開発を進めことができるかを意識することにしました。 また、前編でも紹介の通り、クリーンアーキテクチャという概念に振り回されないことも重要と考えています。完璧な設計を求めるこ
Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する - SWR・TanStack Query編
「Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する」シリーズの2記事目です。今回は「SWR・TanStack Queryを用いたデータフェッチ」について理解していきます。 イントロ+useEffectを用いたデータフェッチ SWR・TanStack Queryを用いたデータフェッチ ← 👀この記事 Pages Routerでのデータフェッチ+App Routerでのデータフェッチ+まとめ Repository 以下は今シリーズで用いたリポジトリです。 🔽クライアントサイドフェッチの調査に用いたリポジトリ：React+Vite（useEffect, SWR・TanStack Query） 🔽サーバーサイドフェッチの調査に用いたリポジトリ：Next.js Pages Router, App Router SWRを用いたクライアントサイドフェッチ SWRを用いてデー
Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query | TanStack Blog
Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query by Kyle Mathews and Sam Willis on July 30, 2025. Your React dashboard shouldn't grind to a halt just because one TODO turns from ☐ to ☑. Yet every optimistic update still kicks off a cascade of re-renders, filters, useMemos and spinner flashes. If you’ve ever muttered “why is this still so hard in 2025?”, same. TanStac
ReactQueryでキャッシュを最大限利用する
こんにちは、柴田（@shibe97）です。 久々に普通の技術記事です。 microCMSでは状態管理ライブラリとしてReact hooksベースのReactQueryを利用しています。 ReactQueryといえば、主にデータの取得時の状態管理の例が紹介されていることが多いです。 本家の例： function Example() { const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: '
自分内 SWR vs React Query のメモ
SWR と React Query どっち使ってるの 2021年12月の現状として、ついこの間まではSWRを使っていたが、最近React Queryに乗り換えた。 両方触ってみた感じ、たしかにReact Queryのほうが多機能（そのぶんバンドルサイズもデカいけど） ただ解決したい課題と解決手法は同じなので、APIはほとんど一緒。 腐敗防止層になる中継ファイルを作り、適切にAPIやOptionsを中継しておけば、乗り換えはそのファイル内の書き換えのみで済む。 機能比較ページ： https://react-query.tanstack.com/comparison React Queryの優位性（2021/12現在） キャッシュを参照しないオプション 乗り換えに至った直接的な理由。 あるリソース詳細を取得済みだったとしても、そのリソースの編集フォームではそのキャッシュを使いたくない。 なぜな
こんにちは。intdash グループ フロントエンドエンジニアの佐藤です。 Next.js を使った管理画面を作成するプロジェクトを担当する機会がありました。 管理画面は「頻繁にデータが更新されることがない」、「同時アクセスはあまり起きない」という前提の元に作成することが多いと考えています。 なのでサーバー、表示ともにパフォーマンス的に無駄なリクエストを投げたくはありません。 それを解決するため、プロジェクトにReact Query を導入しました。 今回はその導入事例をご紹介したいと思います。 SSRを使用してデータを表示する データを更新する まとめ SSRを使用してデータを表示する SSR については下記のリンクが参考になります。 nextjs.org まずサーバーサイドはgetServerSideProps でデータを取得します。 // index.tsx const USER_K
はじめに 昨年 10 月に Tanstack Query v5 が正式リリースされました。 破壊的な変更がいくつもあり非常に開発者泣かせのアップデートでしたが、同時に Suspense の正式対応といったアツい機能追加もありました。 今回はそんな v5 への移行作業をようやく終えましたので（先延ばしにしすぎた。..）苦労した点や移行して良かった点などについてつらつら書いていこうと思います。 興味ある方はぜひ最後までご覧ください。 TanStack Query について TanStack Query（旧 React Query）について知らない方もいらっしゃるかと思いますので、簡単に説明しておきます。 TanStack Query は Web 関連の OSS を開発している TanStack から提供されているライブラリの 1 つです。他の有名どころでいうと TanStack Router
Conclusion 以下の5つのメソッドについては最低限把握しておくとよさそう queryClient.setQueryData queryClient.cancelQueries queryClient.getQueryData queryClient.invalidateQueries queryClient.resetQueries Premise React 17.0.2 TypeScript 4.6.2 React Query(@tanstack/react-query) 4.3.4 Contents React Query を使用するにあたり、キャッシュ管理についての理解は必須だろうということで Query Client のメソッドについて調べました。 個人的に残しておきたい部分のみかつ記事執筆時点の情報になるので、最新情報は公式ドキュメント参照でお願いします。 QueryC
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub Copilotを使っている人は全員"copilot-instructions.md"を作成してください - Qiita
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【後編】
Next.js とReact Query でデータを表示したり更新する - aptpod Tech Blog
TanStack Query を v5 へ移行したので苦労した点についてまとめる
React Query: Query Client のメソッド備忘録