背景 DB設計を担当する事が増えてきていて、 基本的なデータ型を考える基本すらないので調べてみました 理解したいこと ・データ型の基本情報 ・よく使う、テキストと数字はどちらを使えば良いのか？を基本に考える よく利用するデータ型と制約に絞る テキス…

目的 スプレッド演算子は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の基本的な特徴も把握し…

sessionに何がはいいているのか確認したい時 to_hashメソッドで行ける session.to_hash => {"session_id"=>"id id id id id id id id id"} 参考記事 qiita.com

事象 秒まで選択しなくてはいけなくなる やりたいこと 秒を消す 解決策 valueに分までの初期値を渡して上げる <%= form.datetime_field :record_at, value: Time.zone.now.strftime('%Y-%m-%dT') %> 参考記事 blog.aiandrox.com

datetime 初期値方法 下記のどちらかで行けるみたい t.datetime :created_at, default: DateTime.now t.datetime :created_at, default: -> { 'NOW()' } 注意点 確かpostgresじゃないと上手く行かないなどのDBに依存する様な気がしました。 参考記事 qiita.c…

やりたいこと テキストエリアにカーソル位置で文字を挿入する 実装に関しては参考記事とてもわかり易いので参考にしてください ポイント 下記の2つのメソッドの使い方を理解する必要がある - selectionStartメソッド - substrメソッド selectionStartメソッ…

Rails 時間の扱いについて 対象の読者 時間を扱うときに、毎回時間に時間に関して調べてしまう人向け 要点 下記の2点だけ理解しておけば今後は迷わなくなる 時間に関するデータ型は2つ、datetime（年日時間） date型（年日） 月日はDateクラスだけ 年月日時…

form_forのパスの予測変換 仕組み form_for model の modelが、persisted?かどうかで patchにするか postにするかを判定している様子 挙動を確認 formタグの method="post" の箇所がputなどになるのかと思ったら、 <input type="hidden" name="_method" value="patch"> のhiddenフィールドが入っていた。

時間表示を確認する zoneをつけると、現地の現在時刻を表示する ## 8時間ずれる [27] pry(main)> Time.now.to_s => "2021-03-22 02:26:49 +0000" ## 現在時刻 [28] pry(main)> Time.zone.now.to_s => "2021-03-22 11:26:53 +0900"

react hookの理解 正直、新しい書き方が多くてしんどい カウンターアプリを作成 createSlice 一括で、reducer、actionなどを作成できるらしい ## 定義 const counter = createSlice({ name: 'counter', initialState: 0, reducers: { incrementCount (state,…

参考記事 medium.com 導入 近年ではフロントエンドエンジニアが扱う技術が複雑になっているのでロードマップを書いたよ 学ぶべき事1 webがどう動いているのか？ インターネットってなにか？ インターネットはどうやって動いているか？ ブラウザーはどうやっ…