プログラムメモ
Category
React
graphqlクエリ
TypeScript
PHPプログラムメモ
PHPフレームワークLaravel
Stripe / Laravel Cashier
JavaScript
jQuery
Node.js / Bun
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
Ionic / Angular フロントエンド
postgreSQL
gulp(タスク自動化ツール)
デザイン関連(Photoshop・Illustrator)
Figma / Adobe XD / Sketch
フリー素材(写真、アイコン、フォント)
iPhone / iPad
WEBサービス / API
SQLite
エディタ・WEB開発環境 / Cursor / Web Storm / VS Code
Windows WEB開発(ASP.NET Core / C#)
Visual Studio for Mac (Xamarin.Mac)
WEBアクセシビリティ / Google Lighthouse / W3C Markup Validation
クラウド/VPS/レンタルサーバ/専用サーバ
リッチテキストエディタ / TinyMCE / Summer note
git
PHPフレームワークCodeIgniter
最近のメモ
eslint で 現在の設定値を確認する
Macに便利な node.js バージョン自動切り替え nodenv をインストールする
Redux のフック
RTK Query
ncu npm パッケージのアップグレードを楽にする
プロセスマネージャー pm2で next.js を動作させる
Centos7 で ssh の接続を IP で制限する
dynamic assetPrefix
unix の kill コマンドを操る
タスクランナー Laravel Envoy と git を使って本番環境へのデプロイを自動化する
dig コマンドで DNS,WWW,MX(メール)サーバを調べる
「あるポート」を使用している「プロセス」と「プロセスID」を調べる
MySQL ( MariaDB )の最低限のメモリチューニング
react で svg を import して扱う
次世代画像フォーマット avif に変換する / Finder右クリックで変換できる様にする
Pleskでサーバのホスト名を設定する
next.js standalone
Next.js Web Vitals
Next.js Web Vitals
supervisordでプロセス監視
nginx の 3つのロードバランス方法
ベンチマークコマンド siege wrk
Google Analytics で User-ID を収集する
Laravel で JPEG画像の最適化(ファイルサイズ減少)コマンド jpegoptim を使用する
バックアップコマンド rsync
検索
React
トップに戻る
新規投稿
tags
TypeScript
[1]
next.js
[1]
フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )
クイックリンク
eslint で 現在の設定値を確認する
RTK Query
react で svg を import して扱う
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
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 , 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 を動作させる
eslint で 現在の設定値を確認する
● eslint で 現在の設定値を確認する
npx eslint --print-config ファイル名
とすると、 設定一覧が出てきます。
No.2516
05/14 09:39
edit
edit
delete