プログラムメモ
Category
React
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
最近のメモ
Tailwind css を依存に関係にもたないUIコンポーネント
Laravel で 実際にデータベースを見に行った上でTypeScriptの型を生成するパッケージ
AWS をコマンドから操作する AWS CLI
tailwind を使わないUIコンポーネント Mantine をインストールする
PHP で nanoid を生成する
大文字と小文字の区別がデフォルトで判別しないになっていることがあるので注意
KUSANAGI9 の 初期設定とドメイン作成（プロビジョン）方法
deployer でのデプロイが便利すぎる
git log をカラフルにする git plog
Next.js に biome をインストールする
css で長いテキストを ... で表示する。マウスオーバーで全て表示する。
Laravel で ソースコードの自動整形を行う pint
husky+lint-staged からの引っ越し先 → lefthook
RTK Query
Laravelで一時的にメンテナンスモードに入る
● Laravel の 1対1リレーション
FTPソフト「Transmit」「Cyberduck」
laravel-ide-helper を使用してVS CodeやPhpStormでコード補完させる
LaravelでPest使う
Laravel11で最初にやっておいた方が良い初期設定
LaravelでPHPStanを使用する
Laravel で API の 入出力を自動的にキャメルケースに変換するミドルウェア。
Claude Code 便利集
Claude MCP のはじめ方 （Mac Claudeアプリ + mcp server ）
codeigniter でログを取得する
検索
React
トップに戻る
新規投稿
tags
TypeScript
[1]
next.js
[1]
フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest ＜アプリ名＞ )
クイックリンク
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 の使い方
Goのvs code でのデバッグ方法
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アプリのモック
style-dictionary の設定
ジェネレーター（自動生成）好きにぴったりのパッケージ 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 の戻り値に型をつける
React18 並列レンダリング Concurrent Rendering(Suspense) のまとめ
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 の別の型との関係性
MUI Autocomplete サンプル
Nextjs , TypeORM , MySQL
React jsx の if文、for文、console.log in JSX
jest
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で書いてフォームを作成する
Reactで有用なデコレーター
Recoil
Next.jsで作成したサイト に sitemap.xml を追加する
react で スマホ / pc を判別する react-device-detect
React で イベント実行関数（メソッド）に引数を渡す。間違えて渡す。
React で DOM オブジェクトを取得する
Next.js ( pages router ) で メソッドからページ移動する
React のステート管理「Redux」のミニマルな形
react で styled-components を使用する
useReducer を理解しやすくする
Next.js で 静的サイトとしてエクスポートする（next export）
React で ページの先頭へスムーススクロール
react swiper を使用する
Next.js で 独自の 404エラーページを作成する
Next.js サイトに読み込みローディングバー（プログレスバー）を表示させる
Next.js で scss (sass) を使用する（サイト全体css / ページ単位css）
react-datepicker を使用する
JSONからTypeScriptの type を作成する
MUIを使用する
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 を動作させる
Tailwind css を依存に関係にもたないUIコンポーネント
Tailwind CSSを依存しないReact UIコンポーネント
Chakra UI
Radix Primitives
Adobe React Aria
Material UI (MUI)
Mantine
React Bootstrap
Ant Design
React Suite
Tailwind CSSを依存するReact UIコンポーネント
Tailwind UI
Headless UI
daisyUI
Flowbite React
shadcn/ui
Tailblocks
TailGrids
Tail-kit
Untitled UI React
FlyonUI
No.2691
11/21 09:07
edit
edit
delete