Navigation

📁 React

ReactコンテキストAPIを使ったテーマ切り替え機能の実装方法

📅 7月 8, 2025
👤
⏱ 2 min read

ReactコンテキストAPIを使ったテーマ切り替え機能の実装方法

概要

ReactコンテキストAPIを使用したテーマ切り替え機能は、ユーザーがアプリケーションの外観をカスタマイズできるようにするための重要な機能です。例えば、ライトモードとダークモードの切り替えやカスタムテーマの適用などが可能となります。この機能を実装することで、ユーザーエクスペリエンスを向上させることができます。

解決する問題やユースケース

  • ユーザーが好みのテーマを選択できるようにする
  • アクセシビリティを向上させるために、コントラストや色彩を調整する
  • ユーザーエクスペリエンスをカスタマイズ可能にする

前提知識と必要な依存関係

  • Reactコンポーネントの基本知識
  • React Hooksの理解
  • ReactコンテキストAPIの基本的な使い方

基本実装


// ThemeContext.js
import { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);



// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggler from './ThemeToggler';

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Theme Switcher App</h1>
        <ThemeToggler />
      </div>
    </ThemeProvider>
  );
};

export default App;



// ThemeToggler.js
import React from 'react';
import { useTheme } from './ThemeContext';

const ThemeToggler = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'Switch to Dark Theme' : 'Switch to Light Theme'}
    </button>
  );
};

export default ThemeToggler;

TypeScript型定義


interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

テストコード


import { render, screen, fireEvent } from '@testing-library/react';
import ThemeToggler from './ThemeToggler';

test('should toggle theme on button click', () => {
  render(<ThemeToggler />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Switch to Light Theme');
});

パフォーマンス最適化

React.memoやuseMemo、useCallbackを活用して不要な再レンダリングを防止し、パフォーマンスを最適化することが重要です。また、コンポーネントのコード分割とlazy loadingを行うことで、ページの読み込み速度を向上させることができます。

実践的な応用例

テーマ切り替え機能を導入したReactアプリケーションにおいて、ユーザーが好みのテーマを選択できるようにすることで、ユーザーエクスペリエンスを向上させることができます。例えば、ダークモードを好むユーザーにとっては、目の負担を軽減する効果があります。

関連技術・参考情報

  • Styled-componentsやMaterial-UIなどのUIライブラリとの組み合わせ
  • Next.jsでのテーマ切り替え機能の活用方法
  • [React Context API 公式ドキュメント](https://reactjs.org/docs/context.html)
  • [React Hooks 公式ドキュメント](https://reactjs.org/docs/hooks-intro.html)

この記事では、ReactコンテキストAPIを使用したテーマ切り替え機能の実装方法について解説しました。テーマ切り替え機能を導入することで、ユーザーがアプリケーションの外観をカスタマイズできるようにし、ユーザーエクスペリエンスを向上させることができます。

← Back to React