プログラムメモ
Category
React
Claude Code , Cursor , ChatGPT
AI
TypeScript
PHPプログラムメモ
PHPフレームワークLaravel
Stripe / Laravel Cashier
JavaScript
jQuery
Node.js / Bun / pnpm / npm
WEB制作（html, css)
cssスタイルシート
Tailwind CSS
Bootstrap
サーバ構築・管理
Mac / Linux / FreeBSD シェルコマンドメモ
KUSANAGI
Pleskサーバ管理
Amazon AWS クラウド
Mac OSX おすすめフリーソフト
Karabiner-Elements
Auto Hot Key
MySQL
SQL Server（MS-SQL）
React
Vue3
Next.js
Vue.js
postgreSQL
Go
gulp(タスク自動化ツール)
デザイン関連（Photoshop・Illustrator）
Figma / Adobe XD / Sketch
フリー素材（写真、アイコン、フォント）
iPhone / iPad
WEBサービス / API
SQLite
エディタ・WEB開発環境 / Cursor / Web Storm / VS Code
Windows WEB開発（ASP.NET Core / C#）
WEBアクセシビリティ / Google Lighthouse / W3C Markup Validation
クラウド/VPS/レンタルサーバ/専用サーバ
リッチテキストエディタ / TinyMCE / Summer note
git
PHPフレームワークCodeIgniter
最近のメモ
現在のgitブランチのリモート（アップストリーム upstream）を確認する。
last , lastb , utmpdump コマンド
未使用のパッケージや未使用のインポートを調査する knip
git worktree とは
ReactのuseReducer を理解しやすくする
3000番ポートを開放する
プロセスマネージャー pm2で next.js を動作させる
Plesk で メールサーバのDKIM設定, DMARC設定
AWS をコマンドから操作する AWS CLI
Googleのクラウドサーバ Google Compute Engine を利用する
RTK Query
Next.js で viewport を設定する
Firebase Cloud Messaging (FCM)で通知を送る
Google Looker Studio （名称変更 → Google Data Studio）
Google Search Console MCP
Goコードレビューでよく指摘されるやつ
RTK Query mutation の Error型を判別する
pnpm を使う
nvm で nodejs のバージョンを管理する
css によるコンテナクエリ
Visual Studio Code (vs code)の拡張機能を公開する
Claude Code便利コマンド
画像をSVGに変換するオンラインウェブアプリ
cssで改行コードをそのまま表示する
Promise で 成功したものだけ、最初に実行完了したものを取得する
検索
React
トップに戻る
新規投稿
tags
TypeScript
[1]
next.js
[1]
フロントエンド開発といえば。
react アプリの初期化( pnpm create vite@latest または npm init vite@latest ＜アプリ名＞ )
クイックリンク
RTK Query mutation の Error型を判別する
PlayWrightのベストプラクティス
playwright の parallel 実行について整理する。
biome より高速、設定が楽、oxlint , oxfmt
爆速 oxfmtをインストールする / VS Codeで利用できるようにする
何か外部の値（例えばwindow size）を取得する、useSyncExternalStore
react19 の useRef
nextjs / vite でも使用されている Node.js向けの軽量で美しいユーザーインターフェースのプロンプトライブラリ
biome
Playwright 並列実行を表現するディレクトリ
Tailwind css を依存に関係にもたないUIコンポーネント
RTK Query の infiniteQuery
React19 における React.ReactElement と React.JSX.Element の違い
npm install を 30 〜 50% 高速化する? 。flash-install
react i18n の break
Redux使うなら知っておいてほしい selector とは
RTK Query での効率的な初期データ管理とレンダリング最適化
reactでvideo.js
Redux の 作り方
Emotion から goober へ乗り換える
fetch と axios のざっくりとした違い
ts-auto-guardの使い方
webアプリ開発時のCORS対応に必ず登場する HAR の使い方
eslint で 現在の設定値を確認する
RTK Query
react で svg を import して扱う
husky+lint-staged からの引っ越し先 → lefthook
npm init vite@latest で 作成したreactアプリで purgecss したい
React hooksの概要 useContext による Provider
アプリが bun で 動いているのか node.js で動いているのかを判別する
react で i18n
Redux のフック
react + typescript で GoogleMap
React Hook Form で Input argument is not an HTMLInputElement エラーが出る場合
zodで最大文字数チェックの時に「現在 xx文字です」を表示させる
jest実行時に @/ のパスを解決する
zodで userName の値が正しい場合に、ユニークであるかをさらに検証する
Cypressより早いE2Eテストフレームワーク Playwright
jest で 描画されたコンポーネントをブラウザで確認する jest-preview
Drizzle ORM 次世代 データベース O/R マッパー
React で Signals を 軽量グローバルストアとして使用する
scaffdog
初期化変数の変更に追従する useState → useSyncedState
ビューポートの高さと特定の要素のビューポート上端からの相対的なY座標の両方を返すカスタムフックを作成する
マウント時には実行しない useUpdateEffect
shadcn コンポーネントを使用する
コンポーネント開発速度を加速させるStorybookをReact に 追加する
Reactなのに EventEmitter 使うパターン
React の jest で x秒待つ
mswでreactアプリのモック
ジェネレーター（自動生成）好きにぴったりのパッケージ hygen
new hooks in React 18
再レンダリングデバッグの時に有用なコンポーネント
zod の string または null または undefined 、 「number または NaN」定義
React Hook Form で使用できるコンポーネントを作成する
CSSだけのUI フレームワーク daisyui
graphql-codegen を使って、フックを自動生成し tanstack query + graphql クエリを実行する
React Hook Form + zod
react , graphql の Colocated Fragments
apollo client で graphqlからの query の戻り値に型をつける
vite-plugin-pwa を使って PWA 対応する
react で scss(sass) を使用する
Vite で react-app を初期化した後の eslint@8 , prettier インストール方法
フロントエンド側で画像圧縮する
Amazon S3 へ 署名付きURLを使ってブラウザのみでファイルアップロードする
tanstack query ( react query ) の使い方
firestore で 各ユーザー配下のサブコレクション を横断して検索する
typescript の jest を swc で高速化する
React Suspenseのシンプルな形
MUI の 複数行TextField 入力時に 「Command ( Control )」＋「Enter」のショートカットキーでフォーム送信をする
Firestoreで createdAt , upcatedAt を追加する
Firestoreのデータ作成方法 (addDoc , setDoc)
Firestoreのデータ取得方法まとめ
react や nextjs アプリを vscode .devcontainer（Docker） に対応にする
Remix
dayjs (day.js) + typescript で 日付を扱う
react で テストを jest or vitest で比較してみる
live templates for react
How to use async and await inside a React fc?
ReactNode や ReactChild の別の型との関係性
React jsx の if文、for文、console.log in JSX
Next.js で クライアントサイドfetch を サーバーサイドへ移す ( pages router / SSR )
Next.js で ホットリロードが聞かない時の変更箇所
Reactで各種lint ( eslint , stylelint , husky + lint-staged )
環境変数を dotenv-cli で変更する
mui
React Hook Form ( + Yup + schema-to-yup )で バリデーションの設定をjsonで書いてフォームを作成する
Recoil
Next.jsで作成したサイト に sitemap.xml を追加する
react で スマホ / pc を判別する react-device-detect
React で イベント実行関数（メソッド）に引数を渡す。間違えて渡す。
React で DOM オブジェクトを取得する
Next.js ( pages router ) で メソッドからページ移動する
ReactのuseReducer を理解しやすくする
Next.js で 静的サイトとしてエクスポートする（next export）
React で ページの先頭へスムーススクロール
react swiper を使用する
Next.js で 独自の 404エラーページを作成する
Next.js サイトに読み込みローディングバー（プログレスバー）を表示させる
Next.js で scss (sass) を使用する（サイト全体css / ページ単位css）
react-datepicker を使用する
JSONからTypeScriptの type を作成する
React のグリッド、データテーブル
React Bootstrap を TypeScript で使用する
Next.js での SEO施策
react-router の useRoutes() フックを使うミニマルな形 (TypeScript)
Reactの関数コンポーネントで親コンポーネントから子コンポーネントの関数を実行する
Next.js の ビルド先ディレクトリ「.next」を変更する / ビルド先ディレクトリをシェルから変更する
Next.js を nginx にデプロイする
Next.js で 任意のdivの高さを 100% にする （ height:100% ）
Next.js で GraphQL クライアント Apolloクライアントを使用する
ReactのJSX内で string の style を扱う
Next.js で YAMLファイルを使用する
VS Code の「F5」キーで Next.js のデバッグを行う
Next.js で import の相対パスのルートディレクトリを変更（固定）してルートからの絶対パスで記述する
React Hook Formでフォームを作成する ( + Yup )
React で登場する ... （3点リーダー）（ドット3つ）の使い方
Next.jsで改行コードを改行タグに変換（nl2br）する
Next.js で日付をフォーマットする
Next.js で font awesomeなどのアイコンフォントを使用する
Next.js で Axios , fetcher の非同期通信を便利にする SWR を使用する
React に Tailwind CSS を導入する
React hooksの概要 / useState / useEffect / useContext / useReducer / useMemo / useCallback / useRef
Next.js + Firebase で Googleログインのテスト
プロセスマネージャー pm2で next.js を動作させる
react で scss(sass) を使用する
npm i -D sass
App.tsx
import "./assets/scss/style.scss";
No.2288
03/07 18:18
edit
edit
delete