ReactJS - useMemoの使用方法：初心者向けガイド

こんにちは、React開発者の卵さんたち！今日は、Reactの強力なhook之一であるuseMemoについて深く掘り下げます。プログラミングが新しい方也不用担心；私はこの概念をステップバイステップで案内します。これまでに数多くの学生を指導してきた経験を活かしてです。では、コーヒー（またはあなたの好みの茶）を片手に、このエキサイティングな旅に一緒に出発しましょう！

useMemoとは？

本題に入る前に、まずuseMemoとは何かを理解しましょう。Imagine you're baking cookies（私はこのAnalogyが大好きです。なぜなら、だれもクッキーが嫌いじゃないですからね）。クッキーを焼くためのレシピがあり、それにはチョコレートチップの完美な量を決めるための複雑な計算が必要です。では、あなたは毎回クッキーを焼くたびにこれを再計算するでしょうか？それとも、それを書き留めて再利用するでしょうか？これがまさにuseMemoがやっていることです。計算の結果を覚えて（または「メモ化」して）、不要に繰り返す必要がなくなります。

Reactの言葉では、useMemoはre-renders間で計算の結果をキャッシュするhookです。まるで、複雑なタスクを覚えてくれる超賢いアシスタントのようなものです！

useMemo Hookのシグネチャ

まず、useMemo hookを実際にどのように使用するかを見てみましょう：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

パニックに陥ることなく、まずは分解してみましょう：

1. useMemoは私たちのhookの名前です。
2. それには2つの引数があります：

• 計算を行う関数（() => computeExpensiveValue(a, b)）
• 依存関係の配列（[a, b]）

3. そして、メモ化された値を返します。

こんな風に考えましょう：useMemoはReactに「Hey React, only re-run this calculation if a or b has changed. Otherwise, just give me the result you remembered from last time.」と伝えています。

useMemo Hookの適用

では、実際の例でuseMemoの使用を見てみましょう。オンラインストアのショッピングカートを構築しているとします（なぜなら、誰もオンラインショッピングが嫌いじゃないですからね）。

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Your Shopping Cart</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Total: ${totalPrice}</h3>
</div>
);
}

これを分解してみましょう：

1. ショッピングカートにはいくつかのアイテムがあり、それぞれに名前と価格があります。
2. useMemoを使用して、カート内のすべてのアイテムの合計価格を計算します。
3. 計算はcartが変わるたびにのみ再実行されます（それが[cart]の最後に書かれている意味です）。
4. 各アイテムと合計価格を表示します。

では、これはなぜ役立つのでしょう？計算が非常に複雑な操作（例えば、ディスカウントや税金など）であった場合を考えます。useMemo無しでは、Reactはカートが変わらない場合でも毎回再レンダリングするたびにこれを再計算します。useMemoを使用すると、必要なときだけ再計算するので、処理時間を大幅に節約できるかもしれません！

参照の保持

useMemoの別の非常に素晴らしい機能は、参照を保持する能力です。「それは何？」と聞く声が聞こえます。もう一つの例で説明しましょう。

Imagine you're building a to-do list app（なぜなら、すべてのプログラマーはいつかこれを一つ作成するものですから、信じてください！）。タスクをそのステータスに基づいてフィルタリングしたいとします。

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Learn React", completed: false },
{ id: 2, text: "Build amazing apps", completed: false },
{ id: 3, text: "Change the world", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Filtering todos...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>My Todo List</h2>
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('active')}>Active</button>
<button onClick={() => setFilter('completed')}>Completed</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

この例では：

1. タスクリストとフィルタリングステートがあります。
2. useMemoを使用して、現在のフィルタリングに基づいてタスクのフィルタリングリストを作成します。
3. フィルタリングリストは、todosまたはfilterが変わるたびにのみ再計算されます。

魔法のようなところは、filteredTodosがtodosまたはfilterが変わらない限り、常に同じオブジェクト参照であることです。これは特にパフォーマンスを最適化するために非常に重要です。

締め括り

そしてここまでが、useMemoの世界への旅です。基本概念から実際の例まで見てきました。useMemoはあなたの信頼のパートナーで、不要な計算を避けることでReactアプリケーションのパフォーマンスを向上させます。

以下は、私たちがカバーしたメソッドの簡単な参照表です：

メソッド	目的	シntax
useMemo	複雑な計算をメモ化	useMemo(() => computation, dependencies)

プログラミングのツールとして、useMemoを賢く使ってください。パフォーマンスを最適化するのに非常に役立ちますが、過度に使用するとコードが複雑になることがあります。いつも学生たちに言っていますが、「偉大な力には、大きな責任が伴います！」

引き続き練習し、作成し、そして最も重要なのは、Reactを楽しみましょう。間もなく、あなたの作成した素晴らしいアプリケーションが経験豊富な開発者たちを驚かせることでしょう！そして、つまずいたときは、Rubber Duckにコードを説明してみてください。効果抜群です、信じてください！

未来のReactマスターたち、ハッピーコーディング！

Credits: Image by storyset