株式会社JOINT CREW

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

はじめにReactにはさまざまなフックが用意されています。その中でも、useMemo、useCallback、useEffectは第1引数に関数、第2引数に依存配列を指定するフックです。依存配列の値が更新されたときに、関数の再実行が行われます。業務で使っていてあまり違いが理解できなかったので、一つずつ役割や使い方を確認していきます。useMemo概要useMemoは時間がかかる処理の結果を保存することで、コンポーネントの再レンダリングのたびに再計算されるのを防ぐことができます。これにより、パフォーマンスの低下を抑止できます。基本形useMemo(calculateValue, [depe...

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について学んだ内容を少しだけ紹...