「ReactはJavaScriptのみでTypeScriptを使った書き方をやったことがない」「Reactフックは何の型名になるのかわからないから簡単な実装もエラーになってしまう」「学習教材やYoutubeで見かけるRe […]
Tips
React
Tips
最新版！Next.js14をインストールからルーティング(画面遷移)まで解説【[id],[[…slug]],not-found.tsx】
「Reactは習得できたからNext.jsを触ってみたい」「Next.jsを勉強しているけど古い記事だとコマンドやコードが違うため扱えない」「Next.jsを使いたいけどインストールの時点でよくわからないエラーに当たる」 […]
Tips
はじめて使うReactのHUGOの導入方法
「HUGOというキーワードをよく聞くけど実際に何をするためのものかは知らない」「Reactは使えるようになったけどバックエンド自体はこれから勉強しないといけない」「ブログをやってみたいけどサイト制作だけで時間がかかりそう […]
Tips
ReactRouterDomを使った画面の切り替えや別ページにデータを渡す方法まで解説【useParams, useNavigate, Link】
「Reactで簡単なプログラムは書けるようになったけど画面遷移のあるサイトを作りたい」「Reactでホームページを作っている例を見かけるけど、どういう仕組みで動いているのか気になる」「ReactRouterDomがバージ […]
Tips
ReactのuseContextの使い方、useStateとの違いなどをコンテキストから解説
「useContextって初学者向けの教材やスクールで習わないから使い方がまずわかりづらい」「useStateとuseContextの違いがよくわからず、useStateしか使ってこなかった」「useContextを調べ […]
Tips
ReactQueryの使い方と何がメリットなのか解説【useQuery, useMutation, キャッシュ, staleTime, QueryClient, useQueryClient, placeholderData】
「ReactQueryが流行っているらしいけど、いつ使えば良いのかわからず触ったことがない」「useStateやuseEffectなど基本のフックを使うだけじゃダメなの？」「ドキュメントやYoutubeを見たけど細かい設 […]
Tips
ReactのuseSearchParamsの使い方【useStateとの違いも解説】
ReactのuseSearchParamsフックは、Reactアプリケーションでクエリパラメータを操作するために非常に便利なツールです。 Reactを使った画面遷移を実装する際には、React-Routerというライブラ […]
Tips
Reactプロジェクトに最速でドラッグ＆ドロップ機能を実装する【react-beautiful-dnd】
Reactプロジェクトに簡単にドラッグ＆ドロップ機能を実装する方法をご紹介します。 近年ではスマホ、タブレットの普及によりドラッグ＆ドロップを使ったUIを実装する機会が増えています。 しかしながら０から実装するには座標の […]
Tips
TypeScriptとは？JavaScriptへの変換方法やReactへの導入を解説【tsconfig.json, コンパイル】
「JavaScriptはある程度使えるようになったけどTypeScriptも勉強しようか迷っている」「TypeScriptの基本は勉強したけど、結局何をしているかイメージしきれていない」「TypeScriptは玄人のエン […]
Tips
Reactでコンポーネントがレンダリングされない例を紹介【keyで解決できるよ】
「propsで違う値を渡しているはずなのにコンポーネントに更新が走らない」「Reactのレンダリングがイマイチ理解できていない状態で開発している」「mapでkeyを書き忘れると警告文が出ることがあるが、何のためにkeyが […]