💉
Reactフロントエンド開発におけるDependency Injection

kailma
2024/11/05に公開
Dependency Injection（DI）はバックエンド開発でよく使われる強力なデザインパターンですが、フロントエンド、特にReactアプリケーションでも非常に価値があります。この投稿では、DIの定義、テストにおける役割、Jestなどのモダンなテストフレームワークのモック機能との比較、およびReactでのさまざまなDIの方法について説明します。

 Dependency Injectionとは？Dependency Injection (DI) とは、コンポーネントの依存関係（例：サービスや他のコンポーネント）を直接インスタンス化するのではなく、外部から提供するパターンです。これにより、コンポーネントの疎結合が実現され、再利用性とテストの容易さが向上します。
Reactのコンテキストでは、DIは通常、依存関係をpropsやcontextとして渡すことを指し、コンポーネント内で直接インポートや初期化を行わないようにします。

 コード例APIから取得したユーザーデータを表示するUserProfileコンポーネントを考えてみましょう。DIを使用しない場合、データを取得するためにUserServiceを直接インポートして利用します。
// UserProfile.js（Dependency Injectionなし）
import React, { useEffect, useState } from 'react';
import UserService from './UserService';

const UserProfile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    UserService.getUser().then(setUser);
  }, []);

  if (!user) return <p>Loading...</p>;

  return <p>{user.name}</p>;
};

export default UserProfile;
DIを使用する場合、UserServiceをpropsとして渡すことで、UserProfileが具体的な実装から独立します。
// UserProfile.js（Dependency Injectionあり）
import React, { useEffect, useState } from 'react';

const UserProfile = ({ userService }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    userService.getUser().then(setUser);
  }, [userService]);

  if (!user) return <p>Loading...</p>;

  return <p>{user.name}</p>;
};

export default UserProfile;
このようにして、異なるuserServiceインスタンスを注入でき、テストや再利用の際に役立ちます。

 Dependency Injectionはテストが簡単になるのか？はい、DIを使用すると、実際の依存関係をモックやスタブに置き換えることができるため、テストが簡単になります。外部システムに依存する代わりに、望ましい動作をシミュレートするモックを注入し、コンポーネントのロジックのテストに集中できます。

 例DIを使用してUserProfileをテストする方法を見てみましょう。
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';

test('ユーザーデータが表示される', async () => {
  const mockUserService = {
    getUser: jest.fn().mockResolvedValue({ name: 'John Doe' }),
  };

  render(<UserProfile userService={mockUserService} />);

  const userName = await screen.findByText('John Doe');
  expect(userName).toBeInTheDocument();
});
モックuserServiceを注入することで、テストで実際のAPI呼び出しを避けられ、実行速度が向上し、外部要因に依存せずテストが安定します。

 Jestを使えばDependency Injectionは不要？Jestのようなモダンなテストフレームワークは強力なモック機能を提供しており、DIを使用せずに依存関係を置き換えることができます。しかし、Jestのモックと組み合わせることで、DIはコードの読みやすさと保守性を向上させることができます。DIは依存関係を明示的にし、Jestのモックが暗黙的で分かりにくい場合があります。

 比較例Dependency Injectionを使わない場合:
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';
import UserService from './UserService';

jest.mock('./UserService', () => ({
  getUser: jest.fn().mockResolvedValue({ name: 'John Doe' }),
}));

test('ユーザーデータが表示される', async () => {
  render(<UserProfile />);
  const userName = await screen.findByText('John Doe');
  expect(userName).toBeInTheDocument();
});
この例では、テスト内でUserServiceがモックされており、UserProfileが複数の依存関係を持つ場合、追跡が難しくなります。
Dependency Injectionを使用した場合:
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';

test('ユーザーデータが表示される', async () => {
  const mockUserService = {
    getUser: jest.fn().mockResolvedValue({ name: 'John Doe' }),
  };
  render(<UserProfile userService={mockUserService} />);
  const userName = await screen.findByText('John Doe');
  expect(userName).toBeInTheDocument();
});
DIを使用すると、依存関係が明示され、UserProfileに直接渡されるため、コードの構造が明確になります。
Jestのような強力なテストフレームワークが、依存関係のモックや分離に関する豊富な機能を提供しているのは事実ですが、Dependency Injection（DI）は次のような理由から依然として非常に重要です。
関心の分離: DIは、コンポーネントの実装とその依存関係の明確な分離を促進します。この疎結合により、依存関係のインスタンス化やライフサイクルをコンポーネントが知る必要がなくなり、コードの理解や保守が容易になります。
柔軟性と再利用性: DIを使用することで、コンポーネントの内部ロジックを変更せずに依存関係を簡単に切り替えられます。この柔軟性は、アプリケーションの異なる部分や別のプロジェクトでコンポーネントを再利用する際に重要です。
テストのしやすさ向上: Jestはモック機能を提供していますが、DIによって依存関係が明示されることでテストのしやすさが向上します。この明確さにより、依存関係を注入し、モックやスタブに置き換えることができるため、ユニットテストや統合テストがより簡単になります。
ドキュメントとしての役割: DIは一種のドキュメントとして機能します。コンポーネントが依存関係（propsやcontextなど）を明示的に宣言すると、そのコンポーネントが正しく動作するために必要なものが明確になります。
状態管理: DIは、複数のコンポーネント間で状態を共有する必要がある大規模なアプリケーションにおいて、状態管理をより効果的に行うためにも役立ちます。

 ReactにおけるDependency Injectionの方法アプリケーションの複雑さやニーズに応じて、ReactでDIを実装する方法はいくつかあります。
Props Injection: 依存関係を直接propsとして渡す方法で、前述の例のように小規模なアプリケーションや個別のコンポーネントで有効です。
Context API: 多くのコンポーネントで使用する依存関係に対しては、ReactのContext APIを使用して依存関係をコンポーネントツリーの上位で集中管理します。
import React, { createContext, useContext } from 'react';

const UserServiceContext = createContext(null);

export const UserServiceProvider = ({ children, userService }) => (
  <UserServiceContext.Provider value={userService}>
    {children}
  </UserServiceContext.Provider>
);

export const useUserService = () => useContext(UserServiceContext);
Higher-Order Components (HOCs): 条件付きでDIが必要な場合やpropsやcontextに直接アクセスできないコンポーネントで、関数を使って依存関係を注入するためにHOCを使用します。
Custom Hooks: フックに関連した依存関係に対して、カスタムフックを用いたDIが強力です。
import { useContext } from 'react';
import { UserServiceContext } from './UserServiceContext';

const useUserData = () => {
  const userService = useContext(UserServiceContext);
  const [user, setUser] = useState(null);

  useEffect(() => {
    userService.getUser().then(setUser);
  }, [userService]);

  return user;
};

 SummaryDependency Injectionは、Reactアプリケーションにおいて、依存関係のモジュール化やテストに特に価値のあるデザインパターンです。Jestのようなモダンなテストフレームワークが強力なモック機能を提供している時代でも、Dependency Injectionは依然として重要です。DIは責任の分離を促し、テストのしやすさを向上させ、コードの明確さと保守性を高めます。適切なDI手法を選択することで、Reactアプリケーションをよりテスト可能で柔軟性のある堅牢なコードベースに構築できます。
SocialPLUS Tech BlogPublication
株式会社ソーシャルPLUS 開発チームの技術ブログです。
Dependency Injectionとは？

コード例

Dependency Injectionはテストが簡単になるのか？

例

Jestを使えばDependency Injectionは不要？

比較例

ReactにおけるDependency Injectionの方法

Summary

Discussion
