useEffect で API を叩くのを卒業しよう
はじめに 「useEffectでデータ取得するのはやめた方がいい」— こんな話を聞いたことはないだろうか。 でも自分はずっと、useEffect + fetch でAPIを叩いていた。中でtry-catchして、useStateにセットして、ローディングもエラーも自分で管理して。チュートリアルで覚えたそのパターンを、特に疑うこともなく使い続けていた。 「やめた方がいいのは分かった。じゃあ何を使えばいいの？」— この記事は、その疑問に対する自分なりの答えを、実際にTanStack Queryに置き換えてみた過程から書いている。 useEffect + fetch で書くとこうなる 例として、APIから投稿一覧を取得して表示するコンポーネントを考える。 const [posts, setPosts] = useState<Post[]>([]); const [isLoading, setIs
【感想】Next.js は手に余るから初心者に推奨できない - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前提 ※ ポエム記事なので、全て私個人の主観です🙏 ※ あと、すんません。ふざけて色々詰め込んだら結構長くなりました。ホンマすんません。。 結論と主旨 先に書いときます。 Next.js は非常に便利。とても良い技術で、慣れると最高 特に、AI 搭載サービス作るなら採用技術の最有力候補だと思っている Next.js はそんなに好きじゃないですが、今後も使います（市場が大きい内は） でも、初心者にはやっぱり「オススメ」ではない（＝初心者向けではない） Next.js 以外にも色んな技術使ってて、常に別の技術採用時にも対応できるようにはし
useEffectからfetchするときのベストプラクティス - Qiita
useEffectの中でfetch （取得系のリクエスト）しないでください。以上です。ご清聴ありがとうございました。いいねと高評価、チャンネル登録よろしくお願いします。 おまけ とはいえ、useEffectの中でデータ取得することを考えなければいけない場合もあります。例えば、React 16をまだ使っている場合とか。React 18以降ならSuspenseがあるので考えなくていいです。 ということで、筆者は最近React 16の世界でどうしてもuseEffectの中でfetchしなければならない場合を最近経験しました。その場合にもできる限りベストプラクティスに従いたいということで、考えたことを紹介します。 まだReact 16系に囚われている方は参考にしてください。また、新しいReactを使っている方はこの記事で紹介することをそのまま実践する必要はありませんが、useEffectのベストプ
実装例から見る Tanstack Table の使い方
はじめに 弊社では商業施設向けの Vertical SaaS を開発・運営しているのですが、日々大量のデータを扱う SaaS において ユーザーにとって見やすい形にデータを整形できる 複雑なデータ同士を照らし合わせて分析、比較を行える ユーザーがデータを自由に操作（フィルター・ソートなど）し、そこから次のアクションに移すためのアイデアが得られる ことは何よりも重要であり、それらを実現するために優れたデザインのテーブルは必要不可欠です。 そこで今回は、ヘッドレス UI ライブラリである「Tanstack Table」を用いてそのようなデータテーブルの設計パターンを実装法とあわせてご紹介しようと思います。 Tanstack Table の独特な使い方がなかなか理解できず、私自身非常に苦労したため、同じような悩みを抱えている方にとって参考になれば嬉しいです。 ぜひ最後までご覧ください。 前提 本
【図解解説】これ1本12分でReact Hooks 全20種を理解できる教科書 - Qiita
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
君たちはReactをどうやってRuby on Railsに載せるべきか？
下記の記事の内容をRuby Gemにしました！ react_router_rails_spa gem. 以下のコマンドを実行するだけで、Modern SPAをRuby on Railsに載せることができます。 # Railsのインストール rails new test_app cd test_app # gemのインストール bundle add react_router_rails_spa bundle install bin/rails generate react_router_rails_spa:install # サーバ立ち上げ bin/rails s bin/rails react_router:dev はじめに こんにちは！Ruby on Railsフロントエンドエンジニアを目指し、Hotwireを中心に活動しつつ、Next.jsもReactも勉強している加々美です！ 202
Sunsetting Create React App – React
Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. When we released Create Re
ReactでTanstack Table使っていろいろテーブルを操作してみる | DevelopersIO
ReactでTanstack Tableを使ってページネーション、ソート、フィルタリングを試してみましたので紹介します。StackBlitzでブラウザで動かせるサンプル付き。 Reactでテーブル表示をする際に、いろいろ考えないといけないことが多いです。 ページネーション（Pagination）したいとか、ソート（Sorting）したいとか、フィルタリング（Filtering）したいとか…、いろいろあります。 これら全部を自前で実装するのは大変ですが、Tanstack Tableを使うと簡単に実装できるそうです。 ドキュメント見てTanstack Tableすごそうだなーと思うものの、機能が多すぎてどんなことできるのかいまいちピンときてないんですよね。 なんで、Tanstack Tableをざっと使ってみて具体的にどんなことができるのかを見てみたいと思います。 このブログでは、最終的にこん
【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita
TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と()が大量に出現するため、可読性が低く、タイピングミスしたときのバグ探しが大変です 2025年、ReactとVue.jsどちらを選ぶべきか？ 2025年、フロントエンド開発者にとってReactとVue.jsは引き続き主要な選択肢となっています。 1. ReactとVue.jsの基本的な違い React 開発元: Meta（旧Facebook） アプローチ: ライブラリ（必要に応じて周辺ツールを追加） 学習曲線: 中
【React】アップロードした画像のプレビュー・リサイズ機能を実装する
やりたいこと input[type="file"]で選択した画像ファイルを表示したい 単一の画像ファイルを想定 プレビューする前に画像をリサイズしたい submit・POST云々の処理は実装せず、あくまでプレビューまで 1. 画像のバリデーション
【React】知らなかったReact Developer Tools、20分で手軽に８つReact コンポーネントのデバッグテクニックをマスターする - Qiita
前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、React Developer Toolsプラグインを体系的に理解することができます。本文では以下のことを学ぶことができます： コンポーネントの一時停止や遅延読み込みシナリオのシミュレーション。 コンポーネントに対応する実際のDOMを早く特定する方法。 props内の特定の関数がどこで作成されているかを早く特定する方法。 コード変更なしで、propsを介したコンポーネント変更をオンラインで検知する方法。 コンポーネントがどのファイルで作成されたかを
AG-Boostで使用している「@coreui/react」について - SO Technologies 開発者ブログ
こんにちは。AG-Boost事業部開発部の宇野です。AG-Boostのサービスはフロントエンドでreactを使って開発しています。その中で「@coreui/react」というライブラリを使用しているのですが、今回はその中でもよく使っているものを紹介したいと思います。 @coreui/reactについて 公式から React Admin Dashboard Template & UI Components Library Time is our most valuable asset, that's why we want to help you save it by creating simple, customizable, easy to learn React.js UI components and React.js Admin Templates which significan
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 使いじゃなくても知っておきたい教養としての React
TreeSelect - Ant Design
React-Select
useDebounceCallback
Reactでブラウザバック時にフォームデータを保持する最適な方法 | 株式会社一創
Introduction | TanStack Table Docs
Introduction
viteによるReact(TypeScript)環境作成 – Kakedori