プログラムメモ
Category
React
graphqlクエリ
TypeScript
PHPプログラムメモ
PHPフレームワークLaravel
Stripe / Laravel Cashier
PHPフレームワークCodeIgniter
JavaScript
jQuery
node.js
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
Mac OSX用 VST AU RTAS プラグイン
フリー素材（写真、アイコン、フォント）
iPhone / iPad
WEBサービス / API
SQLite
エディタ・WEB開発環境 /VS Code / Sublime Text
Windows WEB開発（ASP.NET Core / C#）
Visual Studio for Mac (Xamarin.Mac)
WEBアクセシビリティ / Google Lighthouse / W3C Markup Validation
クラウド/VPS/レンタルサーバ/専用サーバ
リッチテキストエディタ / TinyMCE / Summer note
git
最近のメモ
ジェネレーター（自動生成）好きにぴったりのパッケージ hygen
作業中ブランチにいながら、派生元ブランチ（master）で行われた更新を取り込む（マージする）
あるドメイの ホストしているサーバーを調べる
css animation 終了状態で止める
css の min() max() minmax() clamp()
React Hook Formでフォームを作成する ( + Yup )
new hooks in React 18
React jsx の if文、for文、console.log in JSX
再レンダリングデバッグの時に有用なコンポーネント
display: none → block でアニメーション
React Hook Form で使用できるコンポーネントを作成する
横並びにしたdivを「1つだけ自動伸縮」にし「残りは固定」にして「全体も自動伸縮」にする
css で 親子、兄弟のセレクタ
React hooksの概要 / useState / useEffect / useContext / useReducer / useMemo / useCallback / useRef
zod の string または null または undefined 、 「number または NaN」定義
composer で PHPのバージョンを変えて composer install する
Webstorm , IntelliJ で git tag をつける
AWS をコマンドから操作する AWS CLI
KUSANAGI9 の 初期設定とドメイン作成（プロビジョン）方法
phpで画像ファイルの拡張子を判別する
mac のコマンドラインでLame エンコーダを使ってmp3を作成する
Vite で react-app を初期化した後の eslint , prettier インストール方法
Laravel で amazon S3 のファイル操作を行うメソッド一覧
● (Next.js App Router)のコンポーネントが 「サーバー」/「クライアント」どちらかのみで動作することを限定する
Next.js で css module を使用する
検索
React
トップに戻る
新規投稿
tags
TypeScript
[1]
next.js
[1]
フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest ＜アプリ名＞ )
クイックリンク
ジェネレーター（自動生成）好きにぴったりのパッケージ 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 を サーバーサイドへ移す
Next.js で ホットリロードが聞かない時の変更箇所
Reactで各種lint ( eslint , stylelint , husky + lint-staged )
環境変数を dotenv-cli で変更する
mui
frourio
React Hook Form ( + Yup + schema-to-yup )で バリデーションの設定をjsonで書いてフォームを作成する
Reactで有用なデコレーター
Recoil
Next.jsで作成したサイト に sitemap.xml を追加する
React で スマホ / pc 判別
React で イベント実行関数（メソッド）に引数を渡す。間違えて渡す。
React で DOM オブジェクトを取得する
Next.js で メソッドからページ移動する
React のステート管理「Redux」のミニマルな形
React で Firebase の Google Auth
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 を動作させる
ジェネレーター（自動生成）好きにぴったりのパッケージ hygen
● hygen
https://www.hygen.io/
https://qiita.com/yutteee/items/5f54729b4d723f72b710
No.2384
08/11 15:41
edit
edit
delete