技術ブログ

Posts in 2024

useMemo、useCallback、useEffectの違いを理解する

はじめに Reactにはさまざまなフックが用意されています。その中でも、useMemo、useCallback、useEffectは第1引数に関数、第2引数に依存配列を指定するフックです。依存配列の値が更新されたときに、関数の再実行が行われます。業務で使っていてあまり違いが理解できなかったので、一つずつ役割...

Reactでローディング、エラー画面をササッと作る

はじめに Webアプリをつくるにあたって、メインではないけれども重要な要素があります。それが以下の2つです。ローディング画面 →データ取得などに時間がかかるときに表示される。エラー画面 →何らかの意図しない操作などがあったときに表示される。今回はこれらの画面をササッと作る方法を確認します。「ササッと」...

Reactのライブラリを駆使して、それっぽいアンケートフォームを作ろう

はじめに Reactには開発を便利にするための様々なライブラリがあります。今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。長編です。今回のゴール以下のようなフォームを作成します。バリデーションも設定します...

技術に出会えるお祭り『技術書典16』に行ってみた

今回は、技術書典16に参加した清水さんが作成したレポートの代筆投稿になります。システム開発部のエンジニア・足立さん、吉田さんに引き続き、BabyTech事業部のエンジニア・清水さん、ご協力ありがとうございます😭✨ ※この記事は、技術書典運営事務局は関与していない非公式の情報です。初めまして、関東でフロントエ...

useReducerって結局どうやって使えばいいの？という話

はじめに ReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。結構複雑なので、私は苦手意識を持っています。改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。 useReducerの基本構造基本的には以下の形...

Reactのコンポーネントの基礎をマスターする

はじめに ReactでUIを構築するうえで、避けて通ることのできない最も重要なものがコンポーネントです。コンポーネントを使わないReactはありえないと言っても過言ではないほどです。そんなコンポーネントについて、概念や使い方を基礎からしっかり解説します。コンポーネントの基礎繰り返し使えるUIの必要性以下...

Reactを覚えるために、ブラウザ上でじゃんけんしてみた

はじめに前回に引き続き、普段Javaを書いているわたしがReactで学んだことを共有します。今回はuseStateという情報を保持するための機能について確認します。じゃんけんをしたい唐突ですが、無性にじゃんけんがしたくなりました。以下のような仕様をみたすじゃんけんプログラムを作ってみます。・グーチョ...

Reactを知るために、あえてReactを使わずに実装するとどうなるのかを考えてみた

はじめに初めまして、仙台でバックエンドエンジニアをしている吉田です。簡単にまず自己紹介をすると、JOINT CREWには2023年の7月に入社し、入社当初からお客様のECサイトの開発に携わっています。その前は別の会社で5年間主にSESで色々なシステムの開発・保守を行っていました。最後の2年間は受託開発で建...