メインコンテンツまでスキップ

4. Components

コンポーネントのライフサイクル​

Reactコンポーネントのライフサイクルは、コンポーネントがマウント（初期化）される時からアンマウント（削除）されるまでの一連の段階を指します。関数コンポーネントでは、主にuseEffectフックを使用してライフサイクルイベントを処理します。

マウント（Mounting）​

コンポーネントが最初にDOMに追加される時のライフサイクルです。useEffectフックを使用して、コンポーネントがマウントされた直後に実行されるコードを記述できます。

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component mounted');

    // クリーンアップ関数を返すことでアンマウント時の処理を行う
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return <div>Example Component</div>;
}

アップデート（Updating）​

コンポーネントのpropsやstateが変更された時のライフサイクルです。useEffectの第二引数に依存関係の配列を渡すことで、特定の値が変更された時のみ副作用を実行できます。

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

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

  useEffect(() => {
    console.log(`Count updated to ${count}`);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

アンマウント（Unmounting）​

コンポーネントがDOMから削除される時のライフサイクルです。useEffectフックのクリーンアップ関数を利用して、リソースの解放やイベントリスナーの解除などを行います。

useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

状態管理​

Reactでは、コンポーネントの状態管理が重要な役割を果たします。状態管理の方法には様々なアプローチがあります。

ローカルステート​

useStateフックを使用して、コンポーネント内でローカルステートを管理します。

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Your name is {name}</p>
    </div>
  );
}

コンテキストAPI​

ReactのコンテキストAPIを使用すると、ツリー全体に渡ってグローバルなステートを提供できます。useContextフックを使用してコンテキストの値を取得します。

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

const ThemeContext = createContext();

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

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

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

コンポーネントの再利用性​

コンポーネントの再利用性を高めるために、以下のベストプラクティスを考慮します。

コンポジション（Composition）​

コンポジションは、小さなコンポーネントを組み合わせて複雑なUIを構築するアプローチです。

function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="Card 1" content="This is the first card" />
      <Card title="Card 2" content="This is the second card" />
    </div>
  );
}

高階コンポーネント（Higher-Order Components）​

高階コンポーネント（HOC）は、コンポーネントを引数として受け取り、新しいコンポーネントを返す関数です。

function withLogger(WrappedComponent) {
  return function LoggerComponent(props) {
    useEffect(() => {
      console.log('Component mounted');
      return () => console.log('Component unmounted');
    }, []);

    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(SomeComponent);

スタイリング​

Reactコンポーネントにスタイルを適用する方法は複数あります。以下に代表的な方法を紹介します。

CSS​

外部CSSファイルを使用してスタイルを定義し、クラス名で適用します。

/* styles.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}
import './styles.css';

function Container() {
  return <div className="container">Content goes here</div>;
}

CSS Modules​

CSS Modulesは、ローカルスコープのCSSを提供し、スタイルの競合を防ぎます。

/* Container.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}
import styles from './Container.module.css';

function Container() {
  return <div className={styles.container}>Content goes here</div>;
}

Styled Components​

Styled Componentsは、CSS-in-JSのアプローチを使用して、JavaScript内でスタイルを定義します。

import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;
  background-color: #f0f0f0;
`;

function App() {
  return <Container>Content goes here</Container>;
}

このように進めていきます。他に追加や修正の希望があればお知らせください。