Reactで配列を再レンダリングせずに更新する最適な手法とは？

Reactアプリケーションの開発において、パフォーマンス最適化は非常に重要です。特に、配列操作時の再レンダリング問題は多くの開発者が直面する課題の一つです。この問題を放置すると、アプリケーションの動作が遅くなり、ユーザーエクスペリエンスが損なわれる可能性があります。本記事では、配列を再レンダリングせずに更新するための具体的な手法について解説します。Reactの基本概念から応用的な手法までを網羅し、パフォーマンスを向上させるための実践的なアプローチを学びましょう。

配列の再レンダリングの原因とは

Reactでは、コンポーネントの状態やプロパティが更新されるたびに、仮想DOMが再計算されます。特に、配列の操作（追加、削除、更新など）が原因で不要な再レンダリングが発生するケースがあります。

状態の参照変更と再レンダリング

配列を更新する際、JavaScriptでは直接操作（pushやspliceなど）を行うと、元の配列の参照が変わらないため、Reactが状態の変更を認識できない場合があります。このため、Reactは正確な差分を検出するために、全体の再レンダリングを実行することが一般的です。

再レンダリングのトリガーとなる操作

以下のような操作が配列の再レンダリングを引き起こすことがよくあります。

• 状態として管理している配列に直接変更を加える。
• 配列のコピーを作らずに要素を追加や削除する。
• キー（key）が適切に設定されていないリストを描画する。

仮想DOMと再レンダリングの関係

仮想DOMは差分検出を行うための仕組みですが、配列の状態変更が頻繁に行われると、その計算コストが高くなり、レンダリングのオーバーヘッドが増加します。このため、効率的な配列操作とReactの状態管理が重要です。

配列操作がどのようにReactの再レンダリングを引き起こすかを理解することで、適切な解決策を選択する基礎が築かれます。

再レンダリングの悪影響

再レンダリングはReactの特性上必要なプロセスですが、過剰になるとアプリケーションのパフォーマンスに大きな悪影響を及ぼします。特に配列操作に関連した不要な再レンダリングは、ユーザーエクスペリエンスを損なう要因となります。

パフォーマンスの低下

不要な再レンダリングが発生すると、以下のような現象が起こる可能性があります。

• 遅延の発生: アプリケーションの動作が目に見えて遅くなる。
• CPU負荷の増大: 再レンダリング処理が多くなると、クライアントデバイスのリソースを消費しやすくなる。
• スローダウン: 特に大規模なリストや複雑なコンポーネントツリーでは、リスト全体の再描画が大きな負担となる。

ユーザーエクスペリエンスの悪化

パフォーマンス問題は、直接的にユーザーの体験にも影響を与えます。

• 遅いレスポンス: ボタンクリックやスクロール操作が遅れる。
• 視覚的なちらつき: 再レンダリングの結果、画面の描画が頻繁に変わる。
• ストレスの増加: ユーザーがアプリケーションを「重い」と感じ、利用を避ける可能性が高まる。

開発効率の低下

再レンダリングが適切に制御されていないコードベースでは、以下のような問題が発生することもあります。

• デバッグの複雑化: パフォーマンス問題の原因が特定しにくい。
• コードの可読性の低下: 最適化が行われていない配列操作は、コード全体を複雑にする。

Reactアプリケーションにおける再レンダリングの悪影響を理解することは、配列操作の最適化手法を学ぶ上で重要な一歩となります。

再レンダリングを回避するための基本戦略

Reactで不要な再レンダリングを防ぐためには、配列操作や状態管理を適切に制御することが重要です。ここでは、基本的な戦略と具体的な実装方法を紹介します。

状態のイミュータブルな操作

配列やオブジェクトを更新する際は、直接変更するのではなく新しい配列やオブジェクトを作成することが推奨されます。これにより、Reactは状態が変更されたことを正確に検知できます。

例: 配列に要素を追加する場合

// 良くない例: 配列を直接操作する
setItems((prevItems) => {
  prevItems.push(newItem); // 参照は変わらない
  return prevItems;
});

// 良い例: 新しい配列を作成する
setItems((prevItems) => [...prevItems, newItem]);

適切なキーの設定

配列をReactコンポーネントでレンダリングする際、keyプロパティを一意で安定した値に設定することが重要です。これにより、Reactは仮想DOMの差分検出を効率的に行えます。

例: keyの設定

items.map((item) => <ListItem key={item.id} item={item} />);

状態の最小化

再レンダリングの影響を最小限に抑えるため、状態は必要最小限にとどめることが推奨されます。状態管理を親コンポーネントに集中させすぎると、不要な子コンポーネントの再レンダリングが発生する可能性があります。

コンポーネントのメモ化

React.memoを活用してコンポーネントをメモ化することで、プロパティが変更されない限り再レンダリングを防ぐことができます。

例: React.memoの活用

const ListItem = React.memo(({ item }) => {
  return <div>{item.name}</div>;
});

必要な部分のみのレンダリング

Reactのコンポーネントが大きい場合、リストの一部だけを表示する仮想化技術（React WindowやReact Virtualizedなど）を使用して、描画負荷を軽減できます。

これらの基本戦略を組み合わせることで、Reactアプリケーションのパフォーマンスを大幅に向上させることが可能です。

再レンダリングを抑えるImmutable.jsの活用

Immutable.jsは、データの不変性を保証するライブラリであり、Reactのパフォーマンス最適化において有効なツールの一つです。このライブラリを使用することで、状態管理が効率的になり、不要な再レンダリングを防ぐことができます。

Immutable.jsの概要と利点

Immutable.jsは、変更不可能なデータ構造（イミュータブルデータ構造）を提供します。これにより、配列やオブジェクトの変更が新しいデータを生成する形で行われ、Reactが状態の変更を正確に検知できるようになります。
利点:

• 直接的な参照変更を防止し、予期しないバグを回避。
• 深いコピーを伴わずに効率的な差分検出が可能。
• パフォーマンスの向上とコードの明確化を実現。

基本的な使い方

Immutable.jsを使用する際は、ListやMapなどのイミュータブルデータ構造を利用します。

例: 配列操作

import { List } from 'immutable';

// 初期化
const items = List([1, 2, 3]);

// 要素の追加
const newItems = items.push(4);

// 要素の削除
const updatedItems = newItems.delete(0);

// コンソール出力
console.log(newItems.toJS()); // [1, 2, 3, 4]
console.log(updatedItems.toJS()); // [2, 3, 4]

Reactでの使用例

Immutable.jsをReactコンポーネントで使用することで、効率的な状態管理を行えます。

例: 状態にImmutable.jsを適用

import React, { useState } from 'react';
import { List } from 'immutable';

const App = () => {
  const [items, setItems] = useState(List([1, 2, 3]));

  const addItem = () => {
    setItems(items.push(items.size + 1));
  };

  return (
    <div>
      {items.toJS().map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

導入時の注意点

Immutable.jsは強力なライブラリですが、以下の点に注意が必要です。

• 学習コスト: Immutableデータ構造の理解が必要。
• データ変換のオーバーヘッド: Reactコンポーネントで使用する場合、通常のJavaScriptデータ構造に変換する処理（toJS()）が必要になる。

代替ライブラリの検討

Redux Toolkitのように、イミュータブルな状態管理を内包するツールも有効な選択肢です。アプリケーションの要件に応じて選択するとよいでしょう。

Immutable.jsを活用することで、再レンダリングの発生を効果的に抑えつつ、Reactアプリケーションのパフォーマンスを向上させることができます。

useRefを活用した配列更新方法

ReactのuseRefフックは、再レンダリングを伴わずに状態を保持するための有効なツールです。配列の操作時にuseRefを活用することで、パフォーマンスを向上させるとともに、不要な再レンダリングを防ぐことができます。

useRefの基本概念

useRefは、以下の特性を持つオブジェクトを返します。

• currentプロパティに値を格納できる。
• 値の変更がコンポーネントの再レンダリングをトリガーしない。

これを活用することで、頻繁に変更される配列を保持しながらも、Reactの描画コストを削減できます。

useRefで配列を操作する利点

• 再レンダリングの回避: 配列を更新してもコンポーネント全体の再レンダリングが発生しない。
• 状態管理の効率化: 大量のデータを扱う場合でも、Reactの状態管理を簡潔に保てる。
• 直接的な参照アクセス: イミュータブル操作が不要な場面で効率的に使用可能。

実装例: useRefを使った配列更新

以下はuseRefを活用して配列を更新する具体例です。

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

const App = () => {
  const itemsRef = useRef([]); // useRefで配列を初期化
  const [updateCount, setUpdateCount] = useState(0); // 再描画のトリガー用

  const addItem = () => {
    // 配列に新しいアイテムを追加
    itemsRef.current.push(`Item ${itemsRef.current.length + 1}`);
    console.log(itemsRef.current); // 配列の状態をログに出力

    // 必要に応じて再描画をトリガー
    setUpdateCount((prev) => prev + 1);
  };

  return (
    <div>
      <h2>Items:</h2>
      {itemsRef.current.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

export default App;

コード解説

1. 配列の保持: useRefで保持したitemsRefは、配列の参照をそのまま保存します。
2. 配列の更新: 配列の内容を直接変更し、setUpdateCountで再描画を必要に応じて制御します。
3. 効率的な描画: 配列操作自体はレンダリングに影響を与えず、パフォーマンスを向上させます。

考慮すべき点

• レンダリングが必要なタイミングを明確化する: 必要な場合のみ再レンダリングをトリガーする設計が重要です。
• 副作用の管理: 配列の変更が他の状態に影響を与えないようにする工夫が必要です。

useRefを活用することで、パフォーマンスを向上させながら効率的な配列操作を実現できます。特に、大量のデータを扱うコンポーネントで有効なアプローチです。

memoizationの応用

Reactにおけるmemoizationは、不要な再レンダリングを防ぎ、アプリケーションのパフォーマンスを最適化するための重要な技術です。特に、配列操作に関連する計算やコンポーネントのレンダリングコストを削減する際に効果を発揮します。ここでは、React.memoやuseMemo、useCallbackを活用した実践的な手法を解説します。

React.memoでコンポーネントをメモ化する

React.memoは、プロパティが変更されない限りコンポーネントの再レンダリングを防ぐ高階関数です。これにより、レンダリングコストの削減が可能です。

例: React.memoの適用

import React from 'react';

const ListItem = React.memo(({ item }) => {
  console.log('Rendering:', item);
  return <div>{item}</div>;
});

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      {items.map((item, index) => (
        <ListItem key={index} item={item} />
      ))}
    </div>
  );
};

export default App;

ポイント:

• React.memoは純粋関数コンポーネントに適用可能。
• プロパティが変化しない場合に再レンダリングを防止します。

useMemoで計算結果をメモ化する

useMemoは、高コストな計算を必要な場合にのみ実行するためのフックです。配列のフィルタリングやソートなどの操作に役立ちます。

例: useMemoの使用

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

const App = () => {
  const [query, setQuery] = useState('');
  const items = ['Apple', 'Banana', 'Cherry', 'Date'];

  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter((item) => item.toLowerCase().includes(query.toLowerCase()));
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search items"
      />
      <div>
        {filteredItems.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </div>
  );
};

export default App;

ポイント:

• 第二引数に依存関係を指定することで、特定の条件下でのみ計算が実行される。
• 計算結果をキャッシュし、再計算を防止。

useCallbackで関数をメモ化する

useCallbackは、コンポーネントで使用する関数をメモ化し、不要な再定義を防ぎます。リスト内で渡される関数を安定化させたい場合に有効です。

例: useCallbackの活用

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

const ListItem = React.memo(({ item, onClick }) => {
  console.log('Rendering:', item);
  return <div onClick={() => onClick(item)}>{item}</div>;
});

const App = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const handleClick = useCallback((item) => {
    console.log('Clicked:', item);
    setSelectedItem(item);
  }, []);

  return (
    <div>
      <h2>Selected Item: {selectedItem}</h2>
      {items.map((item, index) => (
        <ListItem key={index} item={item} onClick={handleClick} />
      ))}
    </div>
  );
};

export default App;

ポイント:

• 関数が再定義されるのを防ぎ、子コンポーネントの再レンダリングを抑制。
• 第二引数で依存関係を明示し、更新条件を管理。

効果的な組み合わせ

• React.memo + useCallback: プロパティとして関数を渡す場合に組み合わせると効果的。
• React.memo + useMemo: 計算結果とコンポーネントを同時に最適化。

注意点

• 過剰なメモ化は逆効果となる場合があります。レンダリングコストとメモリコストのバランスを考慮してください。
• メモ化の恩恵がある場面（頻繁な再レンダリングが発生する部分）を見極めて適用することが重要です。

memoizationを適切に活用することで、Reactアプリケーションのパフォーマンスを効率的に向上させることができます。

大規模アプリケーションでの実践例

大規模なReactアプリケーションでは、パフォーマンス最適化が特に重要になります。ここでは、配列操作が頻繁に行われる状況での再レンダリング抑制やパフォーマンス向上の具体的な実践例を紹介します。

課題: 膨大なリストの操作

大規模アプリケーションでは、数百から数千の項目を持つリストを処理する場面が多くあります。例えば、商品カタログやユーザー管理ダッシュボードなどです。このような場合、配列の操作がアプリケーション全体のパフォーマンスに影響を与えることがあります。

問題点

• 項目が増えると、描画コストが増大。
• 配列の更新が頻繁なため、仮想DOMの差分計算に時間がかかる。
• ユーザー操作に対するレスポンスが遅れる。

解決策 1: 仮想化による描画の最適化

膨大なリストを一度にレンダリングするのではなく、必要な部分だけをレンダリングする仮想化技術を使用します。react-windowやreact-virtualizedといったライブラリが便利です。

例: react-windowを使用した仮想化

import React from 'react';
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Item {index}</div>
);

const App = () => {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemSize={35}
      itemCount={1000}
    >
      {Row}
    </FixedSizeList>
  );
};

export default App;

ポイント:

• 描画領域に表示される項目のみをレンダリング。
• メモリ使用量と描画コストを削減。

解決策 2: 遅延更新の導入

ユーザー操作に応じて即座に配列を更新するのではなく、バッチ処理や遅延更新を取り入れることでパフォーマンスを向上させます。

例: setTimeoutを使用した遅延更新

import React, { useState } from 'react';

const App = () => {
  const [items, setItems] = useState(Array.from({ length: 1000 }, (_, i) => i));
  const [processing, setProcessing] = useState(false);

  const handleDelete = (index) => {
    setProcessing(true);
    setTimeout(() => {
      setItems((prev) => prev.filter((_, i) => i !== index));
      setProcessing(false);
    }, 200);
  };

  return (
    <div>
      {processing && <p>Updating...</p>}
      {items.map((item, index) => (
        <div key={index} onClick={() => handleDelete(index)}>
          Item {item}
        </div>
      ))}
    </div>
  );
};

export default App;

解決策 3: useMemoによる計算結果のキャッシュ

配列操作の結果をuseMemoでキャッシュし、計算コストを削減します。

例: 配列のフィルタリング結果のメモ化

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

const App = () => {
  const [query, setQuery] = useState('');
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  const filteredItems = useMemo(() => {
    return items.filter((item) => item.includes(query));
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search items"
      />
      <div>
        {filteredItems.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </div>
  );
};

export default App;

解決策 4: Context APIとuseReducerの組み合わせ

大規模アプリケーションでは、配列の操作が複数のコンポーネントにまたがることがあります。Context APIとuseReducerを組み合わせることで、効率的な状態管理を実現します。

例: グローバルな状態管理

import React, { createContext, useReducer, useContext } from 'react';

const AppContext = createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter((_, index) => index !== action.payload);
    default:
      return state;
  }
};

const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, []);
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

const ItemList = () => {
  const { state, dispatch } = useContext(AppContext);
  return (
    <div>
      {state.map((item, index) => (
        <div key={index} onClick={() => dispatch({ type: 'REMOVE_ITEM', payload: index })}>
          {item}
        </div>
      ))}
    </div>
  );
};

const App = () => {
  const { dispatch } = useContext(AppContext);

  const addItem = () => {
    dispatch({ type: 'ADD_ITEM', payload: `Item ${Date.now()}` });
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ItemList />
    </div>
  );
};

export default () => (
  <AppProvider>
    <App />
  </AppProvider>
);

これらの手法を実践することで、大規模アプリケーションにおいてもスムーズなパフォーマンスと優れたユーザーエクスペリエンスを提供できます。

トラブルシューティング：動作が遅い時の確認ポイント

Reactアプリケーションで動作が遅い場合、特に配列操作が原因の一つであることがよくあります。ここでは、具体的な診断手順と改善のためのアプローチを紹介します。

確認ポイント 1: 不要な再レンダリング

動作が遅い場合、コンポーネントの不要な再レンダリングが発生している可能性があります。

診断方法

• React Developer Toolsを使用してコンポーネントの再レンダリング頻度を確認します。
• 各コンポーネントの「Highlight Updates」オプションを有効にして、どの部分が再描画されているかを特定します。

改善方法

• React.memoでメモ化されたコンポーネントを使用する。
• プロパティ変更が最小化されるように状態管理を整理する。

確認ポイント 2: 配列操作の効率性

配列の操作が非効率である場合、大量データを扱う際にパフォーマンスが低下します。

診断方法

• 配列操作に使われるメソッド（map, filter, reduceなど）の実行時間をconsole.timeで測定します。
• 配列の更新処理の頻度と範囲を特定します。

改善方法

• 必要な範囲のみを操作するロジックに変更する。
• 配列を操作する際、useMemoやuseCallbackを使用して不要な計算を防ぐ。

確認ポイント 3: 仮想DOMのパフォーマンス

仮想DOMの差分計算が負担になるケースもあります。

診断方法

• 仮想DOM差分計算の負荷: 高頻度で変更されるコンポーネントが多い場合、仮想DOM更新がボトルネックになっていないか確認します。

改善方法

• リスト描画において、キー（keyプロパティ）が一意で安定していることを確認する。
• 仮想化ライブラリ（react-window, react-virtualized）を使用してリストの描画範囲を制限する。

確認ポイント 4: JavaScriptの計算負荷

配列操作やレンダリング以外にも、JavaScriptの計算負荷が問題となる場合があります。

診断方法

• ブラウザの開発者ツールでPerformanceタブを使用して、JavaScriptのプロファイルを確認します。
• 処理に時間がかかっている関数を特定します。

改善方法

• 長時間実行される処理を非同期処理（setTimeoutやrequestIdleCallback）に分割する。
• 重い計算はWeb Workerを使用してメインスレッドから分離する。

確認ポイント 5: 状態管理の複雑化

状態管理が複雑化していると、関連するコンポーネントのレンダリングが増加することがあります。

診断方法

• グローバルな状態（ContextやRedux）が頻繁に更新されていないか確認します。
• 状態更新の範囲が適切かを特定します。

改善方法

• 状態を必要なコンポーネント範囲内に限定する。
• 状態の分割やロジックの整理を行い、変更影響を最小限に抑える。

トラブルシューティングのまとめ

配列操作が原因で動作が遅い場合、以下の手順で改善できます。

1. 再レンダリングを制御する: React.memoやキーの適切な設定を活用する。
2. 効率的な配列操作: 計算負荷を削減し、必要な範囲のみを処理する。
3. 仮想化技術の活用: 大規模リストを最適にレンダリングする。
4. パフォーマンスモニタリング: 開発ツールを使用して具体的な原因を特定する。

このアプローチを活用して、Reactアプリケーションのパフォーマンス問題を効率的に解決しましょう。

演習問題：パフォーマンス最適化の実践演習

ここでは、Reactアプリケーションで配列操作を効率化し、再レンダリングを防ぐ手法を実践的に学ぶための演習問題を提供します。この演習を通じて、理論の理解を深めるとともに、実装スキルを向上させましょう。

問題 1: フィルタリングの最適化

シナリオ:
5000件の商品データを検索するReactコンポーネントを作成します。ただし、ユーザーが検索クエリを入力したときに、フィルタリングの処理が遅くならないように最適化してください。

要求事項:

• useMemoを使用して、フィルタリング結果をメモ化する。
• 入力フィールドに変更がない場合、フィルタリング処理が再実行されないようにする。

サンプルデータ:

const items = Array.from({ length: 5000 }, (_, i) => `Product ${i + 1}`);

問題 2: 大規模リストの描画効率化

シナリオ:
10,000件のユーザーデータを表示するReactコンポーネントを作成します。ユーザーがスクロールするたびにすべての項目が再描画されないようにしてください。

要求事項:

• react-windowを使用して、リストの仮想化を実装する。
• 各リストアイテムの内容には、ユーザー名とIDを表示する。

サンプルデータ:

const users = Array.from({ length: 10000 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`
}));

問題 3: 配列の操作を効率化する状態管理

シナリオ:
タスク管理アプリを作成します。以下の操作を効率的に実行できるように最適化してください。

• タスクの追加。
• タスクの削除。
• タスクの完了状態のトグル。

要求事項:

• useReducerを使用して状態管理を実装する。
• 再レンダリングが発生しないように、状態変更時には必要最小限の部分だけが更新されるようにする。

サンプルデータ:

const initialTasks = [
  { id: 1, name: "Task 1", completed: false },
  { id: 2, name: "Task 2", completed: true }
];

問題 4: 再レンダリングの抑制

シナリオ:
リスト項目を表示し、ユーザーがクリックした項目を選択状態にするReactコンポーネントを作成します。非選択状態の項目がクリック時に再レンダリングされないようにしてください。

要求事項:

• React.memoを活用して項目をメモ化する。
• 選択された項目のみが更新される仕組みを実装する。

サンプルデータ:

const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

問題 5: 複合アプリケーションの最適化

シナリオ:
商品検索、リスト表示、状態管理が組み合わさったダッシュボードを作成します。

• 商品を検索してリスト表示。
• 各商品に「お気に入り」ボタンを設置。
• ボタンをクリックすると「お気に入り」に追加され、再描画が最小限に抑えられる。

要求事項:

• useMemo、useCallback、React.memoを適切に活用する。
• 大規模なデータセットでの効率的な処理を実現する。

これらの演習問題を解くことで、Reactアプリケーションにおけるパフォーマンス最適化の知識を実践に応用できるようになります。解決方法を試行錯誤しながら、最適な設計と実装手法を習得してください。

まとめ

本記事では、Reactにおける配列操作が引き起こす再レンダリング問題と、そのパフォーマンス最適化手法について解説しました。配列の再レンダリングの原因を理解し、Immutable.jsやuseRefを活用した状態管理、React.memoやuseMemoによるメモ化技術、仮想化ライブラリの導入など、実践的な解決策を紹介しました。また、大規模アプリケーションにおける実例や演習問題を通じて、これらの手法をどのように適用するかを具体的に学びました。

配列操作時のパフォーマンス課題に正しく対処することで、Reactアプリケーションの効率性を向上させ、ユーザーに快適な体験を提供できます。ぜひ、これらの知識を活用し、現場での課題解決に役立ててください。