Reactでのインタラクション実装方法

Reactアプリケーションでのインタラクションの実装は、ユーザーの入力や状態に基づいて動的なUIを提供する重要な要素です。ここでは、Reactを使った「変更（編集）」、「フィルタリング」、「条件付きレンダリング」の実装方法について詳しく解説します。これらの基本的なインタラクションは、ユーザー体験を向上させ、アプリケーションをよりインタラクティブにするための基盤となります。

1. 変更（編集）の実装

Reactでの変更操作は、主にコンポーネントの状態（state）を更新することによって行われます。フォーム入力やボタンをクリックしたときに状態を変更することで、UIが動的に変わります。次の例は、入力フォームを使ってテキストを編集する方法を示しています。

コード例：

javascript
CopyEdit
import React, { useState } from 'react';

function EditableText() {
  const [text, setText] = useState('初期のテキスト');

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

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>編集されたテキスト: {text}p>
    div>
  );
}

export default EditableText;

この例では、useStateフックを使ってtextという状態を管理し、ユーザーが入力したテキストをそのまま表示します。onChangeイベントハンドラを使って、ユーザーが入力するたびにtextの状態が更新され、UIが自動的に再レンダリングされます。

2. フィルタリングの実装

Reactでのフィルタリング操作は、リストデータを動的に絞り込む場合に役立ちます。例えば、ユーザーが入力した検索キーワードに基づいてリストアイテムを絞り込む機能を実装できます。

コード例：

javascript
CopyEdit
import React, { useState } from 'react';

function FilterList() {
  const [searchTerm, setSearchTerm] = useState('');
  const items = ['りんご', 'ばなな', 'みかん', 'ぶどう', 'さくらんぼ'];

  const filteredItems = items.filter(item => 
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        placeholder="検索..." 
        value={searchTerm} 
        onChange={handleSearchChange} 
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}li>
        ))}
      ul>
    div>
  );
}

export default FilterList;

このコードでは、useStateを使ってsearchTermという状態を管理し、入力されたキーワードに基づいてitems配列をフィルタリングします。filterメソッドを使って、リストアイテムに対して部分一致の検索を行い、結果を表示します。

3. 条件付きレンダリングの実装

条件付きレンダリングは、状態やプロパティに基づいて異なるコンポーネントや要素をレンダリングするために使用します。Reactでは、JavaScriptの条件式（if文や三項演算子）を使って、表示内容を動的に変更できます。

コード例：

javascript
CopyEdit
import React, { useState } from 'react';

function ConditionalRendering() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div>
      <button onClick={toggleLogin}>
        {isLoggedIn ? 'ログアウト' : 'ログイン'}
      button>
      {isLoggedIn ? (
        <p>ようこそ、ユーザーさん！p>
      ) : (
        <p>ログインしてください。p>
      )}
    div>
  );
}

export default ConditionalRendering;

この例では、isLoggedInという状態を使って、ユーザーがログインしているかどうかに応じて異なるメッセージやボタンを表示しています。toggleLogin関数を使って、状態を反転させ、ログイン状態に基づいたレンダリングを行います。

まとめ

Reactでのインタラクション（変更、フィルタリング、条件付きレンダリング）は、ユーザー体験を向上させるための基本的な技術です。状態管理をうまく活用することで、アプリケーションはより動的でインタラクティブなものになります。これらのテクニックは、実際のアプリケーション開発で非常に役立つので、しっかりと理解しておきましょう。