React.js と Styled Components でインタラクティブな UI を構築

2024-05-11

React.js と Styled Components を組み合わせることで、コンポーネントのスタイルを動的に変更したり、特定の条件に基づいてコンポーネントの一部をレンダリングしたりすることが可能です。これは、UI をよりインタラクティブでレスポンシブにするのに役立ちます。

条件付きスタイル

Styled Components では、テンプレートリテラルを使用してスタイルを定義します。このテンプレートリテラル内に JavaScript 式を含めることで、条件に応じてスタイルを変化させることができます。

const Button = styled.button`
  background-color: ${props => props.isPrimary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

上記の例では、Button コンポーネントの isPrimary プロパティが true の場合、ボタンの背景色は青色になります。それ以外の場合は灰色になります。

条件付きレンダリング

React.js の条件付きレンダリング機能と Styled Components を組み合わせることで、コンポーネントの一部を条件に応じてレンダリングすることができます。

const ConditionalComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible && <StyledComponent />}
    </div>
  );
};

const StyledComponent = styled.div`
  color: red;
  font-weight: bold;
`;

上記の例では、isVisible 変数が true の場合のみ StyledComponent コンポーネントがレンダリングされます。

高度な条件付きレンダリング

より複雑な条件付きレンダリングを実装するには、三項演算子や switch ステートメントを使用することができます。

const ConditionalComponent = () => {
  const type = 'error';

  return (
    <div>
      {
        type === 'error' ? (
          <StyledErrorComponent />
        ) : (
          <StyledSuccessComponent />
        )
      }
    </div>
  );
};

const StyledErrorComponent = styled.div`
  color: red;
`;

const StyledSuccessComponent = styled.div`
  color: green;
`;

上記の例では、type 変数の値に応じて StyledErrorComponent または StyledSuccessComponent コンポーネントがレンダリングされます。

これらのリソースは、React.js と Styled Components を用いた条件付きレンダリングについてさらに詳しく学ぶのに役立ちます。

サンプルコード：React.js と Styled Components を用いた条件付きレンダリング

条件付きスタイル

ボタンのスタイルを条件によって変更する

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.isPrimary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

const App = () => {
  return (
    <div>
      <Button isPrimary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

説明:

styled 関数を使用して Button コンポーネントのスタイルを定義します。
テンプレートリテラルを使用して、スタイルを動的に変更する JavaScript 式を含めます。
props.isPrimary プロパティが true の場合、ボタンの背景色は青色になります。
それ以外の場合は灰色になります。

条件付きレンダリング

コンポーネントの表示を条件によって切り替える

import styled from 'styled-components';

const ConditionalComponent = () => {
  const isVisible = true;

  return (
    <div>
      {isVisible && <StyledComponent />}
    </div>
  );
};

const StyledComponent = styled.div`
  color: red;
  font-weight: bold;
`;

const App = () => {
  return (
    <div>
      <ConditionalComponent />
    </div>
  );
};

export default App;

ConditionalComponent コンポーネントを定義します。
isVisible 変数を使用して、コンポーネントを表示するかどうかを制御します。

高度な条件付きレンダリング

複数の条件に基づいてコンポーネントをレンダリングする

import styled from 'styled-components';

const ConditionalComponent = () => {
  const type = 'error';

  return (
    <div>
      {
        type === 'error' ? (
          <StyledErrorComponent />
        ) : (
          <StyledSuccessComponent />
        )
      }
    </div>
  );
};

const StyledErrorComponent = styled.div`
  color: red;
`;

const StyledSuccessComponent = styled.div`
  color: green;
`;

const App = () => {
  return (
    <div>
      <ConditionalComponent />
    </div>
  );
};

export default App;

type 変数を使用して、レンダリングするコンポーネントを決定します。

上記のサンプルコードは、React.js と Styled Components を用いた条件付きレンダリングの基本的な例です。より複雑な条件付きレンダリングを実装するには、三項演算子、switch ステートメント、またはその他のロジックを使用することができます。

React.js と Styled Components を用いた条件付きレンダリング：その他の方法

カスタムフックを使用して、条件付きレンダリングロジックを再利用可能にすることができます。

import { useState } from 'react';
import styled from 'styled-components';

const useIsVisible = () => {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return { isVisible, toggleVisibility };
};

const ConditionalComponent = () => {
  const { isVisible, toggleVisibility } = useIsVisible();

  return (
    <div>
      {isVisible && <StyledComponent />}
      <button onClick={toggleVisibility}>Toggle Visibility</button>
    </div>
  );
};

const StyledComponent = styled.div`
  color: red;
  font-weight: bold;
`;

const App = () => {
  return (
    <div>
      <ConditionalComponent />
    </div>
  );
};

export default App;

useIsVisible カスタムフックを定義します。
このフックは、isVisible 状態と toggleVisibility 関数を返します。
ConditionalComponent コンポーネントは、useIsVisible フックを使用して isVisible 状態を取得します。
ユーザーはボタンをクリックすることで isVisible 状態をトグルすることができます。

第三者ライブラリ

React.js には、条件付きレンダリングを簡素化するための多くのサードパーティライブラリがあります。

これらのライブラリは、独自の API と機能を提供するため、ニーズに合ったライブラリを選択することが重要です。

カスタムコンポーネント

条件付きレンダリングロジックをカプセル化するために、カスタムコンポーネントを作成することができます。

import styled from 'styled-components';

const ConditionalComponent = ({ condition, children }) => {
  if (condition) {
    return children;
  }

  return null;
};

const StyledComponent = styled.div`
  color: red;
  font-weight: bold;
`;

const App = () => {
  return (
    <div>
      <ConditionalComponent condition={true}>
        <StyledComponent />
      </ConditionalComponent>
    </div>
  );
};

export default App;

このコンポーネントは、condition プロパティと children プロパティを受け取ります。
condition が true の場合、children プロパティとして渡された子コンポーネントをレンダリングします。
それ以外の場合は、何もレンダリングしません。

コンポーネントの属性を使用して、条件付きレンダリングを制御することができます。

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.isPrimary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

const App = () => {
  return (
    <div>
      <Button isPrimary>Primary Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
};

export default App;