Goにおけるパッケージの利用可能範囲と共通化の自分ベストプラクティス なぜ調べたのか？ Goを使ったプロジェクトで以下のような問題に直面し、調査を行いました。 ディレクトリ間でのパッケージ利用時のエラー ディレクトリAで定義した機能をディレクトリB…

概要・ポイント 概要 変数定義について 基本的な変数定義 定数 ポイント varで変更可能な変数定義が可能 型推論機能がある 内容 変数定義 基本的な変数の定義は varで作成できる package main import "fmt" func main() { var name string= "tanaka" fmt.Pri…

概要・ポイント 概要 goでhello worldを標準出力してみる ポイント goはパッケージ単位でコードを管理することが可能 go run xx.goで実行が可能 go build xx.goでバイナリファイルを作成して実行も可能 内容 コード go はパッケージ単位(関数単位)で実行が出…

Reactでデータを更新するときにスプレッド演算子をよく使うことがあります。今回は、その使い方と理由、具体的な使いどころをまとめてみました。 スプレッド演算子の使い方 まずは基本的な使い方をおさらいします。スプレッド演算子（...）は、オブジェクト…

はじめに この記事では、ReactのuseStateフックを使わずに、JavaScriptでUIの状態管理を行う方法について説明します。useStateを使用することで状態管理が非常に簡単になりますが、初心者の方にとってその背後にある基本的な概念を理解することも重要です。…

背景 最近、UIライブラリのOSS開発者の方と話していて、「双方向バインディングは避けたほうが良い」と聞いて、ちょっと興味が湧きました。そこで、単一方向バインディングと双方向バインディングの違いやメリット・デメリットについてまとめてみました。 単…

背景 JavaScriptのreduceというメソッドは、存在は知っていても実際にどのような場面で使うのかがわかりにくいことがあります。私も以前はその一人でしたが、最近購入履歴のデータを加工してチャートに反映する機会があり、その時にreduceの便利さを実感しま…

初めに簡単な自己紹介 最初に自己紹介 こんにちは！私は営業として3年働いた後、2ヶ月程プログラミングスクールに通い、事業会社への転職に成功しました。現在では正社員として2社の事業会社と受託開発で3年半程、フリーランスとして2年半程の経験があります…

Ant Design Formでこれだけ抑えれば何とかなる知識をまとめました この記事では、Ant Designのフォームコンポーネントの基本的な使い方について、実際のコード例とともに解説します。基本的な観点としては以下のポイントに注目します。 入力された最終的なfo…

はじめに Ant DesignのTableコンポーネントを使えば、データの表示や管理が簡単にできます。今回は、todoリストのデータを表示するTableコンポーネントの基本的な使い方を紹介します。 ゴール 添付しているテーブルはよくあるものだと思います。実際にコード…

背景 仕事でAnt Design（antd）のフレームワークを使っていて、共通レイアウトをどう実装すべきか調べてみました。 結論 結論から言うと、layoutディレクトリに共通レイアウトのコンポーネントを作成し、childrenで変更したい内容を追加するのが良いと思いま…

Next.jsのディレクトリ構成についてまとめてみた はじめに Next.js バージョン: 12.0.0 以上 App Routerを利用していること 背景 いくつかのプロジェクトを通じて、ディレクトリ構成が作業スピードやバグの発生率に与える影響を実感しました。分かりやすく整…

React の Props と Children の違いをまとめてみた 今回は、React で頻繁に使われる props と children の違いについて、ざっくりまとめてみました。両方ともコンポーネント間でデータを渡すのに使われますが、それぞれの使い方やユースケースはちょっと違い…

Next.js での useContext の基本的な使い方 今回は、Next.js を使って useContext をどうやって活用するのか、そしてどんなときに使うべきなのかをまとめてみました！また、ディレクトリ構成にも触れていきます。 どんな時に使うか？ useContext は、コンポ…

何をしたか？ Next.jsでsetStateを使う際に、ステートを更新した直後にその値を参照しようとすると、期待した値が取得できないという問題について書きました。この問題の原因と、どのように解決できるかを具体的なコード例を交えて紹介します。 背景 Reactで…

debounce とは？ debounceは頻繁に実行する関数 関連技術 setTimeout どんな時に使うの？ このように検索フォームと、データの一覧があるとします コードはこんな感じで、実装概要は下記 1. axiosでAPIからデータを取得（ここでは jsonplaceholderを利用） 2…

背景 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を利用した開発において、開発環境…