【React】コンポーネント開発（応用）を解説

import React, { Fragment, Suspense } from 'react';

// Fragmentの使用例
function FragmentExample() {
  return (
    // Fragmentを使用して複数の要素をグループ化
    <Fragment>
      <h1>Welcome to My Blog</h1>
      <p>This is a paragraph about React components.</p>
      <button>Click me!</button>
    </Fragment>
  );
}

// 非同期コンポーネントをシミュレート
const AsyncComponent = React.lazy(() => 
  new Promise(resolve => {
    setTimeout(() => {
      resolve({ default: () => <div>Async content loaded!</div> });
    }, 2000);
  })
);

// Suspenseの使用例
function SuspenseExample() {
  return (
    // Suspenseを使用して非同期コンポーネントをラップ
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

// メインのアプリコンポーネント
function App() {
  return (
    <div>
      <h2>Fragment Example:</h2>
      <FragmentExample />
      
      <h2>Suspense Example:</h2>
      <SuspenseExample />
    </div>
  );
}

export default App;

npm install styled-components

npm list styled-components

styled-components@6.1.13

.cssModulesExample {
  color: red;
  font-size: 14px;
  padding: 10px;
  border: 1px solid red;
  border-radius: 5px;
  margin-bottom: 10px;
}

import React from 'react';
// CSS Modulesのスタイルをインポート
import styles from './App.module.css';
// styled-componentsライブラリをインポート
import styled from 'styled-components';

// インラインスタイルの例
function InlineStyleComponent() {
  // JavaScriptオブジェクトとしてスタイルを定義
  const style = {
    color: 'blue',
    fontSize: '14px',
    padding: '10px',
    border: '1px solid blue',
    borderRadius: '5px',
    marginBottom: '10px'
  };

  // styleオブジェクトを直接要素に適用
  return <div style={style}>インラインスタイルの例</div>;
}

// CSS Modulesの例
function CSSModulesComponent() {
  // CSS Modulesで定義されたクラス名を使用
  return <div className={styles.cssModulesExample}>CSS Modulesの例</div>;
}

// Styled Componentsの例
// スタイル付きのdiv要素を作成
const StyledDiv = styled.div`
  color: green;
  font-size: 14px;
  padding: 10px;
  border: 1px solid green;
  border-radius: 5px;
  margin-bottom: 10px;
`;

function StyledComponentsExample() {
  // 作成したスタイル付きコンポーネントを使用
  return <StyledDiv>Styled Componentsの例</StyledDiv>;
}

// メインのAppコンポーネント
function App() {
  return (
    <div>
      <h1>Reactアプリケーションのスタイリング</h1>
      {/* 各スタイリング方法の例を表示 */}
      <InlineStyleComponent />
      <CSSModulesComponent />
      <StyledComponentsExample />
    </div>
  );
}

export default App;

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// エラー境界コンポーネント
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // エラーが発生したらステートを更新
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // エラーが発生した場合のフォールバックUI
      return <h2>申し訳ありません。エラーが発生しました。</h2>;
    }
    // エラーがない場合は子コンポーネントを表示
    return this.props.children;
  }
}

// エラーを発生させるコンポーネント
function BuggyCounter() {
  const [counter, setCounter] = useState(0);

  function handleClick() {
    setCounter(prevCounter => {
      if (prevCounter > 4) {
        // カウンターが5を超えるとエラーを発生させる
        throw new Error('カウンターが大きすぎます！');
      }
      return prevCounter + 1;
    });
  }

  return <button onClick={handleClick}>{counter}回クリックされました</button>;
}

// ポータルを使用するモーダルコンポーネント
function Modal({ children, onClose }) {
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      background: 'white',
      padding: '20px',
      border: '1px solid black'
    }}>
      {children}
      <button onClick={onClose}>閉じる</button>
    </div>,
    document.body
  );
}

// メモ化されたコンポーネント
const ExpensiveComponent = React.memo(function({ text }) {
  console.log('ExpensiveComponent がレンダリングされました');
  return <p>{text}</p>;
});

// メインのアプリコンポーネント
function App() {
  const [showModal, setShowModal] = useState(false);
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Reactの高度な機能</h1>

      <h2>1. エラー境界</h2>
      <ErrorBoundary>
        <BuggyCounter />
      </ErrorBoundary>

      <h2>2. ポータル</h2>
      <button onClick={() => setShowModal(true)}>モーダルを開く</button>
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          <p>これはポータルを使用したモーダルです。</p>
        </Modal>
      )}

      <h2>3. メモ化</h2>
      <button onClick={() => setCount(c => c + 1)}>カウント: {count}</button>
      <ExpensiveComponent text="この文章は変更されないので、再レンダリングされません。" />
    </div>
  );
}

export default App;