React条件付きレンダリング

概要：このチュートリアルでは、if文、論理AND演算子(&&)、論理OR演算子(||)を使用して、JSX要素を条件付きでレンダリングする方法を学びます。

条件に基づいて異なるJSX要素を表示したい場合があります。そのためには、以下の3つの手法のいずれかを使用できます。

• if文または三項演算子(?:)。
• 論理AND演算子 (&&).
• 論理OR演算子(||)。

各手法を実証するために、簡単なReactアプリケーションを作成します。

Reactアプリの作成

まず、ターミナルを開き、npx create-react-appコマンドを実行して新しいReactアプリを作成します。

npx create-react-app todoCode language: plaintext (plaintext)

次に、srcディレクトリ内のすべてのファイルを削除します。

次に、srcディレクトリにindex.jsファイルを作成します。index.jsファイルは画面にAppコンポーネントをレンダリングします。

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

次に、AppコンポーネントをホストするApp.jsをsrcディレクトリに作成します。

import TodoList from './TodoList';

const App = () => {
  const todos = [
    { id: 1, title: 'Learn React', completed: true },
    { id: 2, title: 'Build an app', completed: false },
    { id: 3, title: 'Deploy the app', completed: false },
  ];

  return (
    <main>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

Appコンポーネントは、todoオブジェクトの配列をTodoListコンポーネントに渡します。

最後に、TodoListコンポーネントを格納するTodoList.jsファイルを作成します。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map((todo) => {
    return <div key={todo.id}>{todo.title}</div>;
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

TodoListコンポーネントは、todo配列のデータをdiv要素にレンダリングします。

出力は次のとおりです。

完了したtodoにチェックを入れるには、上記の手法のいずれかを使用して、完了したtodoをそれぞれレンダリングできます。

if文を使用した条件付きレンダリング

以下は、各todoオブジェクトのcompletedプロパティに基づいて異なるJSX要素を返すif文を使用しています。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({ id, title, completed }) => {
    if (completed) {
      return <div key={id}>✔ {title}</div>;
    }
    return <div key={id}>{title}</div>;
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

出力

あるいは、コードをより簡潔にするために三項演算子(?:)を使用できます。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({id, title, completed}) => {
    return (
      <div key={id}>
        {completed ? '✔' : ''}
        {title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

この例では、次の式をJSX内で直接使用しています。

{todo.completed ? '✔' : ''}Code language: JavaScript (javascript)

completedがtrueの場合、式はチェックマークを返し、それ以外の場合は空文字列を返します。

論理AND演算子を使用した条件付きレンダリング

論理AND演算子を使用すると、最初の偽の値または最後の真の値を返すことができます。

const result = value1 && value2;Code language: JavaScript (javascript)

この機能を使用して、JSXで要素を条件付きでレンダリングできます。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map((todo) => {
    return (
      <div key={todo.id}>
        {todo.completed && '✔'}
        {todo.title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

この例では、completedがfalseの場合、式は最初の偽の値であるfalseを返します。その結果、JSXはブール値(trueとfalse)をレンダリングしないため、Reactは空文字列を表示します。

completedがtrueの場合、式は最後の真の値である'✔'を返します。したがって、Reactは完了したtodoに対して'✔'をレンダリングします。

論理||演算子を使用した条件付きレンダリング

論理OR演算子(||)は、最初の真の値または最後の偽の値を返します。

const result = value1 || value2;Code language: JavaScript (javascript)

未完了のtodoの前に文字'✖'を表示したいとします。そのためには、論理OR演算子(||)を使用できます。

{todo.completed || '✖'}Code language: JavaScript (javascript)

completedがtrueの場合、またはcompletedがfalseの場合に文字'✖'を返す式です。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({ id, title, completed }) => {
    return (
      <div key={id}>
        {completed && '✔'}
        {completed || '✖'}
        {title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

出力

まとめ

• 条件に基づいて異なるJSX要素を返すには、if文を使用します。
• JSX内で要素を条件付きでレンダリングするには、三項演算子、論理AND演算子、論理OR演算子を使用します。