useMemoで大きな配列の処理を最適化
なんでuseMemoを使ったの？ データダッシュボードを作っていたとき、大きな配列をフィルタリング、ソート、集計して表示する機能を実装した。最初は素直に処理を書いたら、入力やソート条件が変わるた...
0
0
Comment0
50 search resultsShowing 1~20 results
Stocked
You need to log-in
Reactで出る『unique key』警告の原因と解決方法
初めに Reactで開発をしていると、ほぼ確実に目にするのが次の警告です。 Warning: Each child in a list should have a unique "key" pr...
1
0
Comment0
TypeScript型エラーでよく躓くパターンと反射的な対処法
なんでこの記事を書いた？ TypeScriptを使ったプロジェクトで何度も型エラーに悩まされてきた。特に、ReactやAPI連携をやっていると、型エラーが出て「なんでこれでダメなの？」と頭を抱え...
0
0
Comment0
git rebaseできれいな履歴を保つ
なぜ rebase をする？ 結論、履歴を直線にして読みやすくし、自分のコミットが「最新の親ブランチの上に載せ替え」られ、同じ内容でも別ハッシュの新コミット列として並び直る（履歴が書き換わる）。...
0
0
Comment0
TypeScriptのジェネリクスを使ってみた振り返り
やりたかったこと 目的: 異なるデータ型（ユーザー、商品、注文など）を扱う汎用的なデータ変換関数を作り、型安全に再利用。 要件: 複数のデータ型に対応（例：User, Product, Orde...
0
0
Comment0
S3署名付きURLでファイルビューワーを実装
背景 S3のプライベートバケットにあるファイル（主にPDFや画像）を手軽に確認できる機能が必要になった。最初はS3バケットのファイルを一覧表示するだけのシンプルな内容だったけど、ファイル名だけじ...
0
0
Comment0
ReactのuseRefの実務での使いどころ
背景 これまでReactで使うフックは useState や useEffect が多く、useRef に関しては「DOM にアクセスするためのフック」くらいの理解で止まってしまい、使いどころが...
1
0
Comment1
大量フォーム開発を react-jsonschema-formで効率化
背景 大量の入力フォームをフロントエンドに実装する機会がありました。 React でひとつひとつ <input> や <select> を書いていくのは正直つらい。しかも...
1
0
Comment0
useEffect の依存配列について
useEffect の依存配列は、「いつ useEffect の中の処理を実行するか」を React に伝えるための重要な仕組みです。 基本構文 useEffect(() => { // ...
1
2
Comment3
React.FragmentでDOMをクリーンに保つ
React では複数要素を返すときにラッパーが必要になる React でコンポーネントを作っていると、1つのコンポーネントは必ず「単一の要素」を返す必要がある、というルールに必ずぶつかります。 ...
1
0
Comment0
AWS SSOとCLIのハマりどころ
― credentialsとconfigの扱い、そしてAssumeRoleの動きについて ― プロジェクトで複数AWSアカウント（dev / stg）を切り替えながらCLI操作する必要があり、久...
0
0
Comment0
Reactで詰まった原因、実は「JavaScriptの構文」だった
実はJavaScriptで躓いていた Reactをより難しくさせていた原因は、「JavaScriptの構文」をしっかりと理解できていないことだと気づいたので、よく出る構文をまとめてみました。Ja...
6
11
Comment1
ショッピングサイトを例にしたuseMutationの使い方
例：ショッピングサイトでuseMutationが使われる場面 1. カートに商品を追加（POST） import { useMutation } from '@tanstack/react-qu...
0
0
Comment0
React × Mantineでテーブルを扱う方法
1. テーブルコンポーネントの種類 Reactテーブル関連コンポーネントとして、主に3種類が存在します。 1. Table (@mantine/core) 概要: Mantineのコアライブラリ...
0
0
Comment0
MantineのuseFormでReactフォームを管理する
基本の使い方 Mantine の useForm は、フォームのバリデーション、初期値設定、値の変更トラッキング、エラー管理を簡潔に実装できるフックです。 import { useForm } ...
2
0
Comment0
Reactの children を理解する
1. children とは何か？ children は、React コンポーネントに渡される特別な props のひとつです。 コンポーネントの 開始タグと終了タグのあいだに書かれた内容が、自...
3
2
Comment1
TanStack Queryでハマった落とし穴
1. queryKeyの設計が雑でキャッシュがバグる 問題：queryKey にオブジェクトや関数をそのまま使うとキャッシュが効かなくなる 例： useQuery({ queryKey: ['u...
0
0
Comment0
ReactのuseEffectについて
ReactのuseEffectは、副作用を扱うためのフックです。 「副作用」とは、データの取得・DOMの操作・イベントリスナーの登録・タイマーの設定など、Reactのレンダリングの外で起こる処理...
0
0
Comment0
AWS Amplifyでセッション情報を扱う「fetchAuthSession」
1.fetchAuthSessionとは？ fetchAuthSession()は、AWS Amplifyのauthモジュールに含まれている関数で、現在ログイン中のユーザーのセッション情報を取得...
0
0
Comment0
TypeScriptで判別可能ユニオンを活用する
1. 判別可能ユニオンとは？ 判別可能ユニオン とは、複数の異なる構造を持つ型をまとめて扱うためのパターンで、それぞれの型に共通の「判別子」プロパティを持たせることで、どの型かを一意に識別できる...
1
0
Comment0
50 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles