目的 スプレッド演算子はNext jsでデータを更新する時によく利用するので使い方まとめ オブジェクトを更新する際のポイント 元のデータをスプレッド演算子でコピー 更新したいキーを指定して、新しい、リテラル or 数字 or オブジェクト or 配列をスプレッド…

目次 expressとは何か？ポイントだけ抑える DB接続 with Prisma その他 expressのコード読むときに知っておきたいこと expressとは何か？ expressjs.com 「Express は、それ自体では最小限の機能を備えたルーティングとミドルウェアの Web フレームワークで…

基本的なDB構造のSQLまとめ 1対多の場合 user.todosみたいにデータを取りたい場合 schema model User { name: string; } model Todo { title: string; user_id: int; } ChatGptに質問したら、 下記のSQLを教えてくれたでも FROMに Todoを持ってくるのは理由…

背景 MaterialUiのinputのvalueと useFormの値の管理でかなり詰まったのでまとめ まとめ MaterialUiの値の操作は、基本的にvalueプロパティで変更可能 valueプロパティの値を stateで保持して、setStateで値を更新すれば操作可能 useFormとMateriUiのコンポ…

目的 基本的な useFormと material UIの利用がまとっまっているので、 都度確認しやすくする なんで useForm利用するのか？ ・シンプルにformの値が管理しやすい ・material ui などのUIライブラリや Typescriptなどの型利用が一般的になったので、 独自開発…

stateで独自管理と useFormを利用した場合の比較記事 reffect.co.jp 独自state カラム単位で、useState管理 onSubmitプロパティでhandleSubmitをする => handleSubmitは input type submitのクリックに反応する オブジェクトで stateを管理する場合 import '…

目的 PropsとChildrenの違いが曖昧だったので確認 結論 propsは値を渡すときに利用される 渡し仕方: コンポーネントに value={"value"} のような形で渡す childrenは React コンポーネントを渡す時に利用される 渡し仕方: コンポーネントの入れ子構造 検証コ…

背景 なんで yup 利用する必要があるのか疑問で少し調べた useFormとyupなどのライライブラリの役割 useFormはformのstateを管理する事にフォーカスしている様子 yupなどはバリデーションなどを簡単に設定できる yup ライブラリでもyupがメジャーっぽい Stri…

バージョン 13.4.19を利用 npx create-next-app@13.4.19 変更点 pages を自作 ルーティングはフォルダで作成 _app.tsxがなくなっているので自作しないといけない pages/_app.tsx export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; }</component>

目的 PrismaによるDB定義と、呼び出しの方法を 1対多、多対多で調べてみた 1対多 定義 model User { id Int @id @default(autoincrement()) name String posts Post[] } model Post { id Int @id @default(autoincrement()) title String content String use…

目的 テーブル設計する時にいつも忘れるので、ポイントをメモ 流れ エクセルなどで管理されていることが大半 表で書かれているものを分割していく 顧客ID 顧客名 担当者名 メールアドレス 商品 注文日 xxxx テスト会社 山田 xxxx@aaa.aa "商品A × 3 商品B × …

できること nest js, primsa, mysql をdockerで構築する 手順 nest をローカル環境に入れる dockerfile, docker-composeを作成 prismaを入れる 完成コード dockerfile FROM node:18 as base WORKDIR /app # * で lockもか COPY package*.json ./ RUN npm i C…

目的 最近では、AWSなどのインフラを設定するときに、 dockerがマストになってきていて、AWSはECSの利用、GCPの場合Cloud Runでコンテナを利用してdockerの扱いに慣れる必要があるなと思い取り組んでみました 必要性 dockerを利用した開発において、開発環境…

小要素が親の要素をはみ出すケース レイアウトを担うdivタグでは 上手くレイアウト組めているのに入れ子構造になると 小要素がはみ出す件 事象は青枠が親のグレーのボーダーををはみ出す 構造的にaクラスがアル場合に右側の要素と被ってしまう html <div class="parent"> <div class="container"> <div class="a"> <div class="box1"></div> <div class="box2"></div> </div> </div> <div class="container"> <div class="a"> </div></div></div>

スプレット演算子 新しいオブジェクトや配列を複製するときや、更新する時に便利 ## 更新 const params = { complete_date: { start: 'aa', end: 'bb'}, due_date: { start: 'aa', end: 'bb'} } const newParams = {...params, complete_date: { start: 'cc'…

setSateの理解の重要性 stateを更新すると再レンダリングが走る 再レンダリングが走ると、マウント、update（ライフサイクル）が走る useEffect内の処理が走るためその中にデータ取得の処理があればロジックの理解に大切 setState 丁寧な書き方 setStateは s…

Extractとは？ リテラル型で一部だけ利用したい場合に利用できるみたい 下記の様なリテラル型があったとする type KeySelect = 'user_type' | 'user_id' | 'start_date' | 'end_date'; どの中で、user_typeとuser_idだけ利用したい場合下記で型づけが可能 Ex…

Rrdisの状態確認を確認する方法を学ぶ 以前別の記事を作成して、Redisでバックグランド処理を実行する流れを検証していたけど、 実際に動いているのか確認したかったの方法を調べた blog.hatena.ne.jp 結論 cliコマンドを利用して確認する cliコマンド qiita…

内容 clearIntervalが何をしているのかわからなかった 結論 別画面に行く時にsetIntervalをクリアしてくれる コード これは6秒ごとに triggerGetData関数を実行していて、 別画面に行く時、つまりコンポーネントがアンマウントされた時に、 clearIntervalし…

知りたかったこと Redisを活用したバックグラウンド処理の管理 結論 下記のフローを理解してると良さそう キューにタスクを追加 (lpush): バックグラウンドプロセスでタスクをポーリング: タスクを処理する関数を呼び出す また、Redisの基本的な特徴も把握し…