react 基礎

はじめに

学習の振り返りとして、今回はReactの基礎についての内容です！ 基礎内容は、コンポーネント/props/state の３つを書こうと思います。 間違いなどあれば、教えてください笑

他にもReactについて書いたので、よかったら見てやってください笑

• 入れ子
• レンダリング

Reactとは

Reactとは、WebサイトやWebアプリのユーザーインターフェイス(UI)を効率的に構築するためのJavaScriptライブラリの一種です！

Meta社(旧facebook)によって開発され、2013年にオープンソースとして公開されました！

コンポーネント

コンポーネントはReactの基礎として重要なので、そもそもコンポーネントとは何か？という部分をここでは触れていきたいと思います。

コンポーネントとは、ページを構成するUI部品のことで、ビュー(HTML), スタイル(CSS), ロジック(JavaScript)の３つで構成されています。

以下、図

Reactは、コンポーネント(部品)を組み合わせることでページを構成していく仕組みになっています。

コンポーネントはひとつの画面に複数配置することが可能です。

例えば、複雑な画面だと機能ごとに複数のコンポーネントに分離できたり、入れ子構造で子コンポーネントが親コンポーネントの内部にレンダリングが可能になる！
※レンタリング、入れ子については別途の記事で書く予定なので、ここでは割愛させていただきます。

この後、ToDoアプリを例に、コンポーネント/ props/ stateの説明をしていこうと思います！

1.コンポーネント

コンポーネントは、UIの部品にあたる部分です。

Todoアプリでは、全体(親)のコンポーネント(TodoApp)と各(子)コンポーネント(TodoItem)があります。

TodoItemは、ToDoの「テキスト」と「完了状態」を表示するコンポーネントとなります。

// TodoItem.js - 個々のTodoアイテムを表示する
import React from 'react';

const TodoItem = ({ item, toggleComplete }) => {
  return (
    <li 
      onClick={() => toggleComplete(item.id)} 
      style={{ textDecoration: item.completed ? 'line-through' : 'none' }}
    >
      {item.text}
    </li>
  );
};

export default TodoItem;

2. props

propsは、親コンポーネント(TodoApp)から子コンポーネント(TodoItem)にデータを渡すときに使います。

ここでは、TodoAppからTodoItemへ、各Todoデータ(テキストや完了状態)と、完了状態を切り替えるための関数を渡しています。

ポイント

• todos配列には複数のTodoがあり、それぞれのTodoItemにitemとtoggleCompleteをpropsとして渡しています。
• toggleCompleteは、完了状態を切り替える関数で、props経由でTodoItemへ渡します。

// TodoApp.js - メインのTodoアプリ全体
import React, { useState } from 'react';
import TodoItem from './TodoItem';

const TodoApp = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: '買い物に行く', completed: false },
    { id: 2, text: 'メールを送る', completed: true },
  ]);

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} item={todo} toggleComplete={toggleComplete} />
      ))}
    </ul>
  );
};

export default TodoApp;

3. state

stateは、コンポーネント内で変化するデータを管理するために使います。

上記のコードでは、Todoアイテムのリスト(todos)がstateとして定義され、Todoの完了状態が変更されると更新されます。

ポイント

• useStateで、初期のTodoリストを設定。
• toggleComplete関数はidを元に対象のTodoを見つけ、completed状態を切り替える。

まとめ

コンポーネント: TodoAppやTodoItemなどUIの各部品のこと。

props: itemやtoggleCompleteをTodoAppからTodoItemに渡す役割。

state: Todoリスト全体を管理するtodos