注目のストーリー
開発
Prismaを使って、いろいろなDB操作をマスターしよう〜リレーション編〜
はじめに1対1のリレーションデータモデルの定義1対多のリレーションデータモデルの定義リレーション関連のDB操作事前準備リレーション定義されたデータの取得データの同時登録Cascadeによるデータの削除まとめはじめに前回はPrismaの基本を学ぶ記事を書きました。今回はPrismaのDB操作の応用編シリーズの第1回目として、リレーション関連について解説します。今後は複雑なクエリや、データ整合性・パフォーマンスについても順次説明していく予定です。なお、本記事は前回の記事と同じ環境で動かすことを想定しています。1対1のリレーションデータモデルの定義schema.prismaにUserとProf...
ゼロからPrismaを導入して、Prismaの基本をマスターしよう
はじめに前提環境Prismaの導入下準備DB関連設定テーブルの生成データベースの操作下準備データの登録データの取得データの更新データの削除まとめはじめにPrismaはNode.jsとTypeScriptのORMです。業務で使っていますが、なんとなく使っていて基本を理解していなかったので、自己理解の促進も兼ねて、Prismaの基本について徹底的にまとめてみました。長編になっていますが、一つ一つ確認していくことでPrismaの基本をマスターできるようになっているので、一緒にやっていきましょう。前提本記事では以下の環境が整っていることを前提に進めていきます。・Node.jsが導入されていること...
Reactでローディング、エラー画面をササッと作る
はじめにWebアプリをつくるにあたって、メインではないけれども重要な要素があります。それが以下の2つです。ローディング画面→データ取得などに時間がかかるときに表示される。エラー画面→何らかの意図しない操作などがあったときに表示される。今回はこれらの画面をササッと作る方法を確認します。「ササッと」とはいえ、今回も全ソースコードを載せているので全体の文量は長めです。今回のゴールプルダウンで選択したデータを読み込むときにローディング画面を表示させます。不正なデータを選択された場合にはエラー画面を表示させます。事前準備実行環境本記事においては以下を使用しています。React：18.2.0Type...
Reactのライブラリを駆使して、それっぽいアンケートフォームを作ろう
はじめにReactには開発を便利にするための様々なライブラリがあります。今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。長編です。今回のゴール以下のようなフォームを作成します。バリデーションも設定します。送信後にはメッセージも表示させます。一見すると複雑な処理が必要に思えますが、ライブラリを使うことでサクッと作ることができます。事前準備実行環境本記事においては以下を使用しています。React：18.2.0TypeScript：5.2.2Vite：5.2.2Node.js：18.20.2ライ...
useReducerって結局どうやって使えばいいの？という話
はじめにReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。結構複雑なので、私は苦手意識を持っています。改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。useReducerの基本構造基本的には以下の形で使用します。const [state, dispatch] = useReducer(reducer, initialArg, init?)戻り値state:現在の状態が入っています。useStateでのstateと同じです。dispatch:stateを更新するための関数です。この関数...
Reactのコンポーネントの基礎をマスターする
はじめにReactでUIを構築するうえで、避けて通ることのできない最も重要なものがコンポーネントです。コンポーネントを使わないReactはありえないと言っても過言ではないほどです。そんなコンポーネントについて、概念や使い方を基礎からしっかり解説します。コンポーネントの基礎繰り返し使えるUIの必要性以下のような画面があるとします。ソースコードは次のようになっています。const Main = () => { return ( <> <div style={{ margin: "5px" }}> <button>ボタン</button> </div>...
Reactを覚えるために、ブラウザ上でじゃんけんしてみた
はじめに前回に引き続き、普段Javaを書いているわたしがReactで学んだことを共有します。今回はuseStateという情報を保持するための機能について確認します。じゃんけんをしたい唐突ですが、無性にじゃんけんがしたくなりました。以下のような仕様をみたすじゃんけんプログラムを作ってみます。・グーチョキパーの中から自分の手を選択する・自分の手を選択したタイミングで、相手の手がランダムで出力される・勝敗を表示する以下は画面イメージです。（左：初期表示/右：結果表示）画面の見た目を作るだけならJSXを利用して実装することができそうです。問題は、どのようにボタンのクリックに応じて画面の結果を変え...
Reactを知るために、あえてReactを使わずに実装するとどうなるのかを考えてみた
はじめに初めまして、仙台でバックエンドエンジニアをしている吉田です。簡単にまず自己紹介をすると、JOINT CREWには2023年の7月に入社し、入社当初からお客様のECサイトの開発に携わっています。その前は別の会社で5年間主にSESで色々なシステムの開発・保守を行っていました。最後の2年間は受託開発で建設系のWebシステムの改修をフロントからバックエンドまで担当していたので、メインはJavaですが、ふわっとフロント周りも触れる、といった感じです。今回はJavaScriptについては若干の理解がある私がモダンなJavaScriptライブラリとされるReactについて学んだ内容を少しだけ紹...
大手SIerからベンチャーに転職！インフラからWeb開発エンジニアへ！
人事部の三輪です。皆さんいかがお過ごしでしょうか？今回の社員インタビューはゴリゴリのインフラエンジニアからWeb開発者に転身した中村さんに、スキルチェンジをした感想や現状、当社のことをどう思っているか等々、ざっくばらんに伺ってみたいと思います。 ・ ・ ・三輪：中村さん、本日はありがとう御座います。中村：いえいえ、よろしくお願いします。（写真）いつ見ても爽やかな笑顔の中村さんです。三輪：では早速なのですが、 中村さんのこれまでの経歴を教えてください。中村：新卒で上場している大手SIerに就職しました。メガバンクのインフラ基盤PJで保守や新規PJのPMO業務を中心に経験を積...
創業ストーリーと今後の展望について
皆さん、こんにちは（株）JOINT CREW人事部の三輪です。今回は創業ストーリーと今後の展望について、代表の村越に聞いてみたいと思います。少しでも当社のことを知って頂けますと幸いです。それでは、ざっくばらんに聞いてみたいと思います。創業ストーリーと今後の展望三輪：村越さん、お疲れ様です。村越：お〜三輪、お疲れ様〜。今日は何を話したら良いかな？（写真）JOINT CREWの代表の村越です。太ったり痩せたりと繰り返しています。三輪：ありのままで良いですよ、色々と質問させて頂くので教えて下さい。村越：了解！何でも聞いて下さい。三輪：では早速。創業に至った経緯を改めて教えてください！村越：もと...
