Reactでデータフェッチ後にUIを動的に更新する方法と実践例

Reactでデータフェッチ後にUIを動的に更新する方法は、モダンなフロントエンド開発において非常に重要なスキルです。APIから取得したデータを効率的に表示し、ユーザー操作や環境の変化に応じてリアルタイムにUIを変化させることで、ユーザーエクスペリエンス（UX）を大幅に向上させることが可能です。本記事では、Reactを使ったデータフェッチの基本的な仕組みから、実際のアプリケーションに応用できる高度なテクニックまでを詳しく解説します。初心者から上級者まで、理解を深めるための実践例やトラブルシューティングも網羅し、効果的なReact開発のための知識を提供します。

Reactにおけるデータフェッチの基本

Reactでデータフェッチを行う基本的な方法は、fetch APIやaxiosなどのライブラリを利用してサーバーからデータを取得し、コンポーネントの状態を更新することです。これにより、動的なコンテンツをアプリケーションに組み込むことができます。

データフェッチの仕組み

データフェッチのプロセスは次のようになります：

コンポーネントがマウントされる際にデータ取得を開始します。
非同期でサーバーからデータを取得します。
取得したデータを状態管理で保存し、それに基づいてUIを更新します。

基本的なコード例

以下はfetch APIを使ったシンプルな例です：

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      <h1>Fetched Data:</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default App;

非同期処理における注意点

非同期性の管理: データ取得中にコンポーネントがアンマウントされる場合、メモリリークが発生する可能性があります。これを防ぐために、クリーンアップ関数を使った管理が重要です。
エラー処理: サーバーの応答エラーやネットワーク障害を考慮し、適切なエラーハンドリングを実装する必要があります。

データフェッチの基本をしっかり理解することで、Reactを使ったダイナミックなアプリケーション開発がスムーズになります。

データフェッチによるUI更新の重要性

データフェッチ後にUIを動的に更新することは、Reactアプリケーションのパフォーマンス向上とユーザーエクスペリエンス（UX）を最大化するために欠かせない要素です。適切にデータを取得してUIを更新することで、ユーザーにとって直感的で応答性の高いアプリケーションを提供できます。

UI更新がもたらす利点

リアルタイム性の向上
データフェッチにより、外部リソースから最新情報を取得し、ユーザーが必要とする情報を即座に反映できます。これにより、例えば最新ニュース、株価、チャットメッセージなどをリアルタイムに提供可能です。
インタラクティブな操作感
フェッチされたデータに応じてUIが動的に更新されることで、ユーザーはアプリケーションが自分の操作に即応していると感じます。これにより、アプリへの信頼感や満足度が向上します。
データの効率的な利用
サーバーから必要なデータだけを取得し、必要な箇所だけを更新することで、リソースの節約とアプリケーションの軽量化が実現します。

実例で見る重要性

例えば、ECサイトの製品一覧ページを考えてみましょう。

サーバーから最新の製品データを取得して表示します。
ユーザーが絞り込みや検索を行った場合、サーバーで条件に合ったデータを取得し、その結果を画面に反映します。

このように、データフェッチによる動的なUI更新が、検索結果の反映速度を上げ、ユーザーが求める情報を迅速に提供するのです。

UI更新がUXに与える影響

データフェッチを効率よく行いUIを更新することで、以下のようなポジティブな効果が期待できます：

ページの遷移を必要としない動的な体験を提供することで、アプリがより直感的に感じられる。
データに基づいたリアルタイムの視覚的なフィードバックが、ユーザーの操作を充実させる。

Reactを活用したデータフェッチによるUI更新は、単なる技術要素にとどまらず、アプリ全体の品質や成功に直結する重要な概念です。

useEffectフックの役割と活用法

Reactでデータフェッチを行う際に欠かせないのが、useEffectフックです。このフックは、コンポーネントのライフサイクルに基づいて副作用（サイドエフェクト）を管理するための仕組みを提供します。データフェッチ、DOMの更新、タイマーのセットアップなど、非同期処理の多くはこのフックを利用して実装します。

useEffectの基本的な使い方

useEffectの基本構文は以下の通りです：

useEffect(() => {
  // 副作用の処理
  return () => {
    // クリーンアップ処理（オプション）
  };
}, [依存配列]);

副作用の処理: データフェッチやイベントリスナーの登録などのロジックを記述します。
依存配列: 副作用を再実行する条件を指定します。空配列[]の場合、コンポーネントの初回レンダリング時のみ実行されます。

データフェッチの実装例

以下は、APIからデータを取得し、useStateを使って状態を管理する例です：

import React, { useState, useEffect } from "react";

function FetchDataComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/items");
        if (!response.ok) throw new Error("Failed to fetch data");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, []); // 初回レンダリング時のみ実行

  return (
    <div>
      <h1>Data List</h1>
      {error ? (
        <p>Error: {error}</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default FetchDataComponent;

useEffectを使ったクリーンアップ処理

クリーンアップ処理は、コンポーネントのアンマウント時や依存配列の変更時に実行されます。例えば、WebSocket接続やイベントリスナーを解除する際に利用されます：

useEffect(() => {
  const interval = setInterval(() => {
    console.log("This runs every second");
  }, 1000);

  return () => {
    clearInterval(interval); // クリーンアップ処理
  };
}, []);

依存配列の注意点

空配列 []: 初回レンダリング時のみ副作用を実行します。
特定の値を指定: その値が変化するたびに副作用を再実行します。
省略時: コンポーネントの再レンダリング時に常に実行されます（推奨されません）。

useEffectの役割

データフェッチのタイミングを正確に管理する。
不要なリソース使用を防ぐためのクリーンアップ処理を実装する。
状態と副作用の連動を効率的に制御する。

useEffectを正しく使うことで、Reactアプリケーションのパフォーマンスと安定性が大きく向上します。

状態管理とUI更新の連動

Reactでは、コンポーネントの状態を管理することで、UIを動的に更新できます。この状態とUIの連動を適切に設計することで、アプリケーションの直感的でスムーズな動作を実現できます。主にuseStateフックを使用して、状態の変化に基づいてUIを更新します。

useStateによる状態管理

useStateはReactの状態管理フックで、コンポーネント内で状態を宣言し、更新するために使用されます。以下は基本的な例です：

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

状態の宣言: useStateを使用して状態countを宣言します。
状態の更新: 状態を更新するには、setCount関数を呼び出します。
UIの反映: 状態countが変わるたびに、UIが自動的に更新されます。

データフェッチとUI更新の連携

データフェッチによって取得したデータをuseStateで管理し、それを元にUIを更新することが一般的です。以下の例では、APIから取得したデータをリストとして表示します：

import React, { useState, useEffect } from "react";

function DataList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => {
        setItems(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>Items List</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {items.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataList;

状態とローディングの管理: データの取得中にloading状態をtrueにし、完了後にfalseに設定します。
UIの条件付きレンダリング: 状態に基づいて「Loading…」メッセージを表示するか、取得したデータのリストを表示するかを切り替えます。

状態管理での注意点

状態の初期化
状態の初期値を正しく設定することで、予期しない挙動を防ぎます。たとえば、空の配列やnullを初期値として設定します。
非同期処理との統合
非同期なデータ取得の結果を適切に状態に反映し、不要な再レンダリングを防ぐように設計します。
状態の適切なスコープ
状態が必要以上に複数のコンポーネント間で共有されないよう、スコープを限定します。必要に応じてコンテキストAPIや状態管理ライブラリを検討します。

状態管理とUI更新の相互作用

Reactでは、状態が変更されると関連するコンポーネントが再レンダリングされます。これにより、状態管理が直接UIの変化につながります。動的なインターフェースを実現するには、状態の管理を徹底し、必要な情報を適切なタイミングで更新することが重要です。

状態管理とUI更新を連動させることで、ユーザーにとって一貫性があり、反応の良いアプリケーションを構築できます。

実践例：APIデータを一覧表示するReactコンポーネント

データフェッチを利用した実際のReactコンポーネントを作成してみましょう。このセクションでは、APIから取得したデータをリスト形式で表示する簡単なアプリケーションを構築します。

目的と概要

この実践例では、次のことを学びます：

APIからデータを取得する方法
ReactのuseStateとuseEffectを使用した状態管理
ローディングやエラー処理を含む基本的なUI更新

完成イメージ

APIから取得したデータを動的にリストに表示します。ロード中は「Loading…」、エラーが発生した場合は「Error: エラーメッセージ」を表示します。

コード例

以下のコードを参考にしてください：

import React, { useState, useEffect } from "react";

function UserList() {
  // 状態の宣言
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // データフェッチ処理
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {!loading && !error && (
        <ul>
          {users.map((user) => (
            <li key={user.id}>
              {user.name} ({user.email})
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default UserList;

コード解説

状態の管理

users: APIから取得したユーザー情報を格納します。
loading: データ取得中の状態を管理します。
error: データ取得中のエラーを格納します。

useEffectで非同期データ取得

初回レンダリング時にAPIからデータを取得する非同期関数を実行します。
fetch APIでサーバーからデータを取得し、成功時には状態usersを更新します。

UIの条件付きレンダリング

loadingがtrueの場合は「Loading…」を表示します。
errorが存在する場合はエラーメッセージを表示します。
両方がfalseの場合に、ユーザー情報のリストを表示します。

実行結果

以下のようなユーザー一覧が動的に表示されます：

User List
- Leanne Graham (Sincere@april.biz)
- Ervin Howell (Shanna@melissa.tv)
- Clementine Bauch (Nathan@yesenia.net)

応用アイデア

ページネーションを追加して、データを分割して表示する。
検索機能を実装して、特定のデータをフィルタリングする。
リストの各アイテムをクリックして詳細情報を表示する機能を追加する。

この実践例を通じて、Reactを使った基本的なデータフェッチとUI更新の実装が学べます。次のステップでは、さらに高度な技術を取り入れることで、より複雑なアプリケーションを作成できるようになります。

エラー処理とローディング表示の実装

Reactアプリケーションでデータフェッチを行う際、ユーザーに適切なフィードバックを提供することが重要です。データ取得中の「ローディング」表示や、エラー発生時の通知は、ユーザーエクスペリエンス（UX）を向上させる重要な要素です。このセクションでは、これらの実装方法について具体例を交えて解説します。

ローディング表示の実装

データ取得中は、ユーザーに操作可能なUIを提供する前に「ローディング」表示を行うことで、データがまだ準備中であることを明確に示します。

以下の例では、loadingという状態を使ってローディング表示を制御します。

import React, { useState, useEffect } from "react";

function LoadingExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setData({ message: "Data fetched successfully!" });
      setLoading(false);
    }, 2000); // 2秒の遅延を模擬
  }, []);

  return (
    <div>
      <h1>Loading Example</h1>
      {loading ? <p>Loading...</p> : <p>{data.message}</p>}
    </div>
  );
}

export default LoadingExample;

loadingをtrueに設定し、データフェッチが完了するまで「Loading…」を表示します。
フェッチ完了後にloadingをfalseに切り替え、取得データを表示します。

エラー処理の実装

データフェッチ中にエラーが発生した場合、適切なエラーメッセージを表示することはユーザーに安心感を与えます。以下はエラー処理を組み込んだ例です：

import React, { useState, useEffect } from "react";

function ErrorExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Error Handling Example</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && <p>Data: {JSON.stringify(data)}</p>}
    </div>
  );
}

export default ErrorExample;

エラーのキャッチ: try...catchブロックを使用して、エラー発生時にerror状態を更新します。
UIでエラー表示: error状態が設定されている場合、エラーメッセージをUIに表示します。
クリーンアップ処理: 最終的にloadingをfalseに設定して、ローディング状態を解除します。

ローディングとエラー表示を組み合わせる

以下のように、ローディング状態、エラー状態、データ表示を統合した条件付きレンダリングを実装できます：

return (
  <div>
    <h1>Data Fetching with Loading and Error Handling</h1>
    {loading && <p>Loading...</p>}
    {error && <p>Error: {error}</p>}
    {!loading && !error && data && <p>Data: {JSON.stringify(data)}</p>}
  </div>
);

ユーザーエクスペリエンスを向上させる工夫

再試行ボタンの追加: エラー発生時にデータフェッチを再試行できるボタンを用意する。
ローディングスピナーの使用: より視覚的なローディングインジケータを表示する。
詳細なエラー情報: エラー内容に応じた具体的な対処法を提示する。

まとめ

ローディング表示とエラー処理の実装は、ユーザーがアプリケーションの状態を理解する上で不可欠です。これらを適切に組み込むことで、Reactアプリケーションの信頼性と使いやすさを向上させることができます。

高度なUI更新：条件付きレンダリングとアニメーション

Reactでは、動的なUIを構築するために条件付きレンダリングやアニメーションを活用できます。これにより、ユーザー操作やデータフェッチの結果に応じた視覚的な変化を柔軟に実現できます。このセクションでは、条件付きレンダリングのテクニックとReactでのアニメーション実装方法について解説します。

条件付きレンダリングの実装

条件付きレンダリングとは、状態や条件に基づいて表示するUIを切り替えることです。Reactでは、三項演算子や論理演算子を使用して簡潔に実装できます。

基本例：三項演算子を使用した切り替え

以下のコードは、ユーザーのログイン状態に応じて表示を切り替える例です：

import React, { useState } from "react";

function ConditionalRendering() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <h1>Welcome to the App</h1>
      {isLoggedIn ? (
        <p>Welcome back, User!</p>
      ) : (
        <p>Please log in to continue.</p>
      )}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Log Out" : "Log In"}
      </button>
    </div>
  );
}

export default ConditionalRendering;

isLoggedInによる切り替え: 状態がtrueなら「Welcome back」、falseなら「Please log in」を表示します。
ボタンで状態変更: ボタンのクリックで状態を反転させ、UIが即座に変化します。

高度な条件付きレンダリング：モーダルの表示

以下は、ボタンをクリックしてモーダルを表示する例です：

import React, { useState } from "react";

function ModalExample() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && (
        <div className="modal">
          <p>This is a modal!</p>
          <button onClick={() => setIsModalOpen(false)}>Close</button>
        </div>
      )}
    </div>
  );
}

export default ModalExample;

状態管理でモーダルの表示制御: isModalOpenがtrueのときのみモーダルを表示します。
動的な要素の追加: 必要な場合にのみモーダル要素をDOMに追加します。

Reactでのアニメーション

アニメーションを追加することで、より魅力的でプロフェッショナルなUIを実現できます。Reactでは、以下の方法でアニメーションを実装できます：

CSSを利用したアニメーション

CSSトランジションを用いた基本的なアニメーション例です：

.modal {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.active {
  opacity: 1;
  transform: scale(1);
}

function ModalWithAnimation() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(!isModalOpen)}>Toggle Modal</button>
      <div className={`modal ${isModalOpen ? "active" : ""}`}>
        <p>Animated Modal</p>
      </div>
    </div>
  );
}

CSSクラスの切り替え: activeクラスの有無でアニメーションを適用します。

Reactライブラリ（React Transition Group）を活用したアニメーション

より高度なアニメーションを実現するには、React Transition Groupなどのライブラリを使用します。

npm install react-transition-group

以下は、CSSTransitionを使用した例です：

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import "./styles.css";

function TransitionExample() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle Box</button>
      <CSSTransition
        in={isVisible}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box">I'm animated!</div>
      </CSSTransition>
    </div>
  );
}

export default TransitionExample;

対応するCSS:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

CSSTransitionの活用: 状態の変化に応じてアニメーションを適用します。
unmountOnExitオプション: コンポーネントが非表示になるとDOMから削除されます。

高度なUI更新の利点

状態に基づく動的なコンポーネントレンダリングで、直感的な操作性を実現。
アニメーションで視覚的なフィードバックを提供し、エレガントなUIを構築。
条件付きレンダリングとアニメーションを組み合わせて、プロフェッショナルなデザインを作成。

条件付きレンダリングとアニメーションは、Reactアプリケーションのデザインと機能性を大幅に向上させる効果的な手法です。

よくある課題とトラブルシューティング

ReactでのデータフェッチやUI更新の実装は強力ですが、特有の課題もあります。このセクションでは、よくある問題とその解決方法を具体的に解説します。

1. 無限ループの発生

問題:
useEffect内で状態を更新するコードを適切に設計しないと、無限ループが発生することがあります。

例:

useEffect(() => {
  setData(someData); // 状態更新
}, [data]); // 状態に依存している

原因:
依存配列にdataを含めると、setDataによる状態更新が再度useEffectをトリガーし、無限ループに陥ります。

解決策:
依存配列を慎重に設定し、状態更新が不要な場合は含めないようにします。また、関数内のロジックを見直します。

useEffect(() => {
  if (!data) {
    setData(someData);
  }
}, [data]);

2. データフェッチ中のコンポーネントのアンマウント

問題:
データフェッチ中にコンポーネントがアンマウントされると、メモリリークエラーが発生する場合があります。

解決策:
クリーンアップ関数を使い、アンマウント時に非同期処理を中断します。

useEffect(() => {
  let isMounted = true;

  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => {
      if (isMounted) {
        setData(data);
      }
    });

  return () => {
    isMounted = false; // アンマウント時にフラグを更新
  };
}, []);

3. データの競合問題

問題:
短時間で複数のデータフェッチが発生した場合、古いリクエストが最新のデータを上書きしてしまうことがあります。

解決策:
リクエストIDやキャンセルトークンを利用して、最新のリクエストのみを適用します。

useEffect(() => {
  const controller = new AbortController();

  fetch("https://api.example.com/data", { signal: controller.signal })
    .then((response) => response.json())
    .then((data) => setData(data))
    .catch((error) => {
      if (error.name !== "AbortError") {
        console.error("Fetch error:", error);
      }
    });

  return () => {
    controller.abort(); // リクエストをキャンセル
  };
}, []);

4. ローディングやエラーの状態が同期しない

問題:
データフェッチ中に複数の状態が更新されると、UIが一貫しない動作をすることがあります。

解決策:
状態更新を厳密に管理し、単一の状態管理ライブラリを使用することも検討します。useReducerを利用すると、状態の管理が効率化されます。

import React, { useReducer, useEffect } from "react";

const initialState = { data: null, loading: true, error: null };

function reducer(state, action) {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return { ...state, data: action.payload, loading: false, error: null };
    case "FETCH_ERROR":
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

function DataComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => dispatch({ type: "FETCH_SUCCESS", payload: data }))
      .catch((error) => dispatch({ type: "FETCH_ERROR", payload: error.message }));
  }, []);

  return (
    <div>
      {state.loading && <p>Loading...</p>}
      {state.error && <p>Error: {state.error}</p>}
      {state.data && <p>Data: {JSON.stringify(state.data)}</p>}
    </div>
  );
}

5. フェッチデータのキャッシュ管理

問題:
同じデータを頻繁にフェッチする場合、無駄なリソース消費が発生します。

解決策:
React QueryやSWRなどのライブラリを使用して、データのキャッシュ管理を効率化します。

import { useQuery } from "react-query";

function DataWithCache() {
  const { data, error, isLoading } = useQuery("dataKey", () =>
    fetch("https://api.example.com/data").then((res) => res.json())
  );

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>Data: {JSON.stringify(data)}</p>;
}

まとめ

ReactでのデータフェッチやUI更新では、無限ループやメモリリーク、状態の不整合といった課題が発生しやすいです。これらを未然に防ぐために、依存配列の適切な管理、クリーンアップ処理の実装、キャッシュライブラリの活用が重要です。課題を解決し、信頼性の高いアプリケーションを構築しましょう。

まとめ

本記事では、Reactを使ったデータフェッチとUI更新の方法について、基本的な仕組みから高度なテクニックまでを解説しました。useEffectを用いたデータフェッチの実装、状態管理とUI更新の連動、ローディングやエラー処理、そして条件付きレンダリングやアニメーションを活用した高度なUIの実現方法を学びました。

さらに、よくある課題とそのトラブルシューティングについても具体的な解決策を示しました。これらの知識を活用すれば、Reactでの動的で直感的なアプリケーション構築が可能になります。

適切な設計と実装を心がけ、より洗練されたユーザーエクスペリエンスを提供するアプリケーションを目指しましょう。