はじめに 1対1のリレーション データモデルの定義 1対多のリレーション データモデルの定義 リレーション関連のDB操作 事前準備 リレーション定義されたデータの取得 データの同時登録 Cascadeによるデータの削除 まとめ はじめに 前回はPrismaの基本を学ぶ記事を書きました。 今回はPrismaのDB...
はじめに Reactには開発を便利にするための様々なライブラリがあります。 今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。 長編です。 今回のゴール 以下のようなフォームを作成します。 バリデーションも設定します...
はじめに Webアプリをつくるにあたって、メインではないけれども重要な要素があります。 それが以下の2つです。 ローディング画面 →データ取得などに時間がかかるときに表示される。 エラー画面 →何らかの意図しない操作などがあったときに表示される。 今回はこれらの画面をササッと作る方法を確認します。 「ササッと」...
はじめに Reactにはさまざまなフックが用意されています。 その中でも、useMemo、useCallback、useEffectは第1引数に関数、第2引数に依存配列を指定するフックです。 依存配列の値が更新されたときに、関数の再実行が行われます。 業務で使っていてあまり違いが理解できなかったので、一つずつ役割...
今回は、技術書典16に参加した清水さんが作成したレポートの代筆投稿になります。 システム開発部のエンジニア・足立さん、吉田さんに引き続き、BabyTech事業部のエンジニア・清水さん、ご協力ありがとうございます😭✨ ※この記事は、技術書典運営事務局は関与していない非公式の情報です。 初めまして、関東でフロントエ...
はじめに 前提 環境 Prismaの導入 下準備 DB関連設定 テーブルの生成 データベースの操作 下準備 データの登録 データの取得 データの更新 データの削除 まとめ はじめに PrismaはNode.jsとTypeScriptのORMです。 業務で使っていますが、なんとなく使っていて基本を理解していなかった...
はじめに ReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。 結構複雑なので、私は苦手意識を持っています。 改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。 useReducerの基本構造 基本的には以下の形...
はじめに ReactでUIを構築するうえで、避けて通ることのできない最も重要なものがコンポーネントです。 コンポーネントを使わないReactはありえないと言っても過言ではないほどです。 そんなコンポーネントについて、概念や使い方を基礎からしっかり解説します。 コンポーネントの基礎 繰り返し使えるUIの必要性 以下...
はじめに 前回 に引き続き、普段Javaを書いているわたしがReactで学んだことを共有します。 今回はuseStateという情報を保持するための機能について確認します。 じゃんけんをしたい 唐突ですが、無性にじゃんけんがしたくなりました。 以下のような仕様をみたすじゃんけんプログラムを作ってみます。 ・グーチョ...
はじめに 初めまして、仙台でバックエンドエンジニアをしている吉田です。 簡単にまず自己紹介をすると、JOINT CREWには2023年の7月に入社し、入社当初からお客様のECサイトの開発に携わっています。 その前は別の会社で5年間主にSESで色々なシステムの開発・保守を行っていました。 最後の2年間は受託開発で建...