MENU

2023-09-01から1ヶ月間の記事一覧

express の基本を理解する

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

SQL メモ

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

MaterialUI + useForm

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

useForm の利用する目的や使い方の英文で理解

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

useForm まとめ

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

React ChildrenとPropsの違いを確認

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

useFormのバリデーションはライブラリを利用するケースが多そうだ

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

Next js で検証するときのメモ

バージョン 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>

primsma 1対多 多対多のケース

目的 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 + docker + prisma を実装してみる

できること 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…

docker マルチステージビルドをNext.js でやってみた

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