MENU
  1. ホーム
  2. React
  3. これだけで十分！Reactの基本機能でできること一覧

これだけで十分！Reactの基本機能でできること一覧

React

Reactは、Facebookによって開発されたJavaScriptライブラリであり、動的でインタラクティブなユーザーインターフェースを効率的に構築するために設計されています。本記事では、Reactの基本機能だけで何ができるのか、その魅力を初心者向けに分かりやすく解説します。Reactの持つコンポーネントベースの設計思想やシンプルさを活かし、複雑な機能を構築するための第一歩を提供します。この記事を読むことで、Reactを使ってどのように効果的なアプリケーションを構築できるかが理解できるでしょう。

目次
  1. Reactの概要
    1. Reactの誕生背景
    2. Reactの特徴
    3. Reactが選ばれる理由
  2. JSXの使い方
    1. JSXの基本構文
    2. JSXを書く際のルール
    3. JSXの利点
    4. JSXの変換
    5. 練習問題
  3. コンポーネントの基本
    1. コンポーネントの種類
    2. コンポーネントの作成方法
    3. コンポーネントの再利用性
    4. コンポーネントの役割分担
    5. まとめ
  4. Propsを利用したデータの受け渡し
    1. Propsの基本構文
    2. Propsの特性
    3. Propsを用いた動的レンダリング
    4. Propsとデフォルト値
    5. Propsの型チェック
    6. まとめ
  5. Stateの管理と更新
    1. Stateの基本概念
    2. Stateのルール
    3. Stateの初期値設定
    4. Stateを使った実用例
    5. Stateの利点
    6. まとめ
  6. イベントハンドリング
    1. イベントハンドリングの基本
    2. イベントオブジェクト
    3. イベントの種類
    4. イベントハンドラのスコープ
    5. 関数の引数を渡す
    6. イベントハンドリングのベストプラクティス
    7. まとめ
  7. コンポーネントライフサイクル
    1. Reactのライフサイクルとは
    2. クラス型コンポーネントのライフサイクルメソッド
    3. 関数型コンポーネントとReact Hooks
    4. ライフサイクルを活用する例
    5. まとめ
  8. 簡単なプロジェクトの実例
    1. プロジェクトの概要
    2. ステップ1: プロジェクトの基本構造
    3. ステップ2: タスクの追加
    4. ステップ3: タスク一覧の表示
    5. ステップ4: 状態管理
    6. 完成したTodoアプリのコード
    7. まとめ
  9. Reactの基本機能で作れる応用例
    1. 1. カウンター付き商品カート
    2. 2. リアルタイムチャット
    3. 3. タイマーアプリ
    4. 4. 天気情報表示アプリ
    5. まとめ
  10. まとめ

Reactの概要


Reactは、2013年にFacebookによって公開されたオープンソースのJavaScriptライブラリで、主にフロントエンド開発に使用されます。その最大の特徴は、コンポーネントベースの設計です。これにより、アプリケーションを再利用可能な小さな部品に分解し、効率的に構築・管理できます。

Reactの誕生背景


Reactは、Facebookが直面していた動的で大規模なUIを効率よく管理する課題を解決するために生まれました。当時のフロントエンド開発は、DOM操作が複雑でパフォーマンスに問題がありました。Reactは、仮想DOM（Virtual DOM）を活用して、必要最小限のDOM操作を実現することで、この問題を解決しました。

Reactの特徴

  1. 仮想DOM（Virtual DOM）
    仮想DOMにより、UIの更新が高速かつ効率的に行われます。変更箇所のみを反映するため、リソース消費を抑えたレンダリングが可能です。
  2. コンポーネントベースの設計
    アプリケーションを独立したコンポーネントに分割することで、コードの再利用性が向上し、保守が容易になります。
  3. 単方向データフロー
    データは親から子へ一方向に流れるため、状態の追跡やデバッグが簡単です。
  4. 宣言的UI
    Reactは、アプリケーションの「あるべき状態」を記述する宣言的なスタイルを採用しています。これにより、コードが直感的で理解しやすくなります。

Reactが選ばれる理由


シンプルなAPI、活発なコミュニティ、大量のエコシステムなどの理由から、Reactは現在も多くの開発者に選ばれています。特に、初学者にとって学習曲線が比較的緩やかであることも魅力の一つです。

Reactを使うことで、効率的で拡張性の高いアプリケーションを簡単に開発できる土台が整います。次章では、Reactの基本的な構文であるJSXについて学んでいきます。

JSXの使い方


JSX（JavaScript XML）は、ReactでUIを記述するための構文拡張です。HTMLのような記述をJavaScriptコード内で直接書けるため、視覚的に直感的で、UIの構築が容易になります。この章では、JSXの基本構文や使い方について詳しく解説します。

JSXの基本構文


JSXはJavaScriptの構文拡張なので、コード内にHTMLライクな記述を埋め込むことができます。以下は、基本的なJSXの例です。

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

このコードは、<h1>タグを返すReactコンポーネントです。見た目はHTMLに似ていますが、実際にはJavaScriptオブジェクトに変換されます。

JSXを書く際のルール

  1. 1つのルート要素が必要
    JSXでは、1つのコンポーネントが返す要素は1つのルート要素に包む必要があります。
   function App() {
     return (
       <div>
         <h1>タイトル</h1>
         <p>本文</p>
       </div>
     );
   }
  1. JavaScriptコードの埋め込み
    JSX内では中括弧 {} を使用してJavaScriptコードを記述できます。
   function Greeting(props) {
     return <h1>Hello, {props.name}!</h1>;
   }
  1. クラス名の指定
    HTMLのclass属性はclassNameとして記述します。
   <div className="container">内容</div>
  1. 自己終了タグ
    内容を持たない要素は、自己終了タグ（<img />など）を使用します。
   <img src="logo.png" alt="Logo" />

JSXの利点

  • 視覚的に分かりやすい：HTMLライクな記述が可能なため、UIの構造が直感的に理解できます。
  • JavaScriptとシームレスに統合：条件付きレンダリングやループなど、動的なUIを簡単に作成できます。

JSXの変換


JSXはそのままではブラウザで実行できないため、ReactはこれをJavaScriptに変換します。以下は、JSXが変換される例です。

JSX:

const element = <h1>Hello, World!</h1>;

変換後のJavaScript:

const element = React.createElement('h1', null, 'Hello, World!');

この変換はBabelなどのトランスパイラによって自動的に行われます。

練習問題


以下のJSXを使って、簡単なコンポーネントを作成してみましょう。

  1. 名前を受け取り、「こんにちは、〇〇さん！」と表示するコンポーネントを作る。
  2. ボタンを表示し、クリックすると「クリックされました！」と表示する。

JSXを使いこなすことで、Reactの柔軟性を最大限に活用できるようになります。次章では、Reactの中核であるコンポーネントについて学びます。

コンポーネントの基本


Reactアプリケーションは、コンポーネントという独立した再利用可能なパーツを組み合わせて構築されます。コンポーネントは、UIを設計する上での基本単位であり、Reactの強力な特徴の一つです。この章では、Reactコンポーネントの種類や作成方法を解説します。

コンポーネントの種類


Reactでは、主に以下の2種類のコンポーネントが使用されます。

  1. 関数型コンポーネント
    シンプルで、React Hooksと組み合わせて利用されます。
   function Welcome(props) {
     return <h1>Hello, {props.name}!</h1>;
   }
  1. クラス型コンポーネント
    状態管理やライフサイクルメソッドを利用する際に用いられていましたが、現在はHooksの登場により使用頻度が減少しています。
   class Welcome extends React.Component {
     render() {
       return <h1>Hello, {this.props.name}!</h1>;
     }
   }

コンポーネントの作成方法

  1. コンポーネントを作成する
    Reactコンポーネントは、HTML要素のように記述できます。
   function App() {
     return (
       <div>
         <Welcome name="React" />
       </div>
     );
   }

   function Welcome(props) {
     return <h1>Hello, {props.name}!</h1>;
   }

上記では、WelcomeというコンポーネントをApp内で使用しています。

  1. コンポーネントをネストする
    コンポーネントを別のコンポーネントの中で使うことで、複雑なUIを分割して管理できます。
   function Header() {
     return <h1>アプリケーションのヘッダー</h1>;
   }

   function Footer() {
     return <footer>© 2024 MyApp</footer>;
   }

   function App() {
     return (
       <div>
         <Header />
         <p>メインコンテンツ</p>
         <Footer />
       </div>
     );
   }

コンポーネントの再利用性


Reactのコンポーネントは、再利用性が高い設計が可能です。たとえば、同じButtonコンポーネントを異なるテキストやスタイルで繰り返し使用できます。

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button color="blue" label="送信" />
      <Button color="red" label="削除" />
    </div>
  );
}

コンポーネントの役割分担


Reactでは、以下の2つの役割に基づいてコンポーネントを分けることが一般的です。

  1. プレゼンテーショナルコンポーネント
    見た目やUIのレンダリングに専念し、状態を持たないコンポーネント。
  2. コンテナコンポーネント
    データ管理やロジックを担い、他のコンポーネントにデータを渡す役割を持つコンポーネント。

まとめ


コンポーネントはReactの基本単位であり、再利用性や保守性を向上させるための重要なツールです。シンプルな関数型コンポーネントから始め、複雑なUIを構築できるようにすることが、Reactを学ぶ上での第一歩です。次章では、コンポーネント間でのデータ受け渡しを行うためのPropsについて解説します。

Propsを利用したデータの受け渡し


Props（プロパティ）は、Reactコンポーネント間でデータを受け渡すための仕組みです。親コンポーネントから子コンポーネントに一方向のデータフローを提供し、Reactのシンプルで予測可能な動作を支える重要な概念です。この章では、Propsの基本的な使い方やその利点について解説します。

Propsの基本構文


Propsは、子コンポーネントの属性として指定され、コンポーネント関数の引数として渡されます。以下は基本的な例です。

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="React" />;
}

このコードでは、AppコンポーネントからWelcomeコンポーネントにnameというプロパティを渡し、それをWelcome内で利用しています。

Propsの特性

  1. 読み取り専用
    Propsは読み取り専用で、子コンポーネント内で直接変更することはできません。この特性により、データフローが明確になります。
   function Component(props) {
     props.value = "新しい値"; // エラー
   }
  1. 一方向データフロー
    データは常に親から子へ流れるため、状態を予測しやすくなります。

Propsを用いた動的レンダリング


Propsを利用して、動的にデータをレンダリングすることが可能です。

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>価格: {props.price}円</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Product name="リンゴ" price="100" />
      <Product name="バナナ" price="150" />
    </div>
  );
}

この例では、異なるデータを持つ複数のProductコンポーネントを生成しています。

Propsとデフォルト値


Propsにはデフォルト値を設定することができます。これにより、親から渡されない場合でも安全に動作させることが可能です。

function Button(props) {
  return <button>{props.label}</button>;
}

Button.defaultProps = {
  label: "クリック",
};

function App() {
  return <Button />;
}

このコードでは、labelが指定されていない場合、デフォルト値「クリック」が使用されます。

Propsの型チェック


型チェックを行うことで、意図しないデータ型が渡されるのを防げます。prop-typesライブラリを使用すると簡単に実現できます。

import PropTypes from "prop-types";

function Button(props) {
  return <button>{props.label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
};

ここでは、labelが文字列であることを明示しています。

まとめ


Propsは、Reactコンポーネント間でのデータ受け渡しを可能にし、アプリケーションの動的なUI構築を支える重要な仕組みです。Propsを正しく活用することで、再利用可能で保守性の高いコンポーネントを設計することができます。次章では、コンポーネント内部でデータを管理するStateについて解説します。

Stateの管理と更新


Stateは、Reactコンポーネントの内部でデータを管理するための仕組みです。Propsが外部から渡される静的なデータであるのに対し、Stateはコンポーネント内で変化する動的なデータを扱います。この章では、Stateの基本概念、使用方法、更新の仕方を解説します。

Stateの基本概念


Stateは、関数型コンポーネントではReact HooksのuseStateを用いて管理されます。Stateを持つことで、ユーザーの操作やアプリケーションの動作に応じたUIの更新が可能になります。

Stateを使った基本的な例

以下はカウンターを実装するシンプルな例です。

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 初期値を0に設定

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <button onClick={() => setCount(count - 1)}>カウントを減らす</button>
    </div>
  );
}

export default Counter;

この例では、useStateで定義されたcountがStateとなり、setCount関数で更新されています。

Stateのルール

  1. Stateは直接変更しない
    Stateは不変であるため、setStateやsetCountのような関数を使って更新します。
   // 正しい方法
   setCount(count + 1);

   // 誤った方法
   count = count + 1; // エラーの原因
  1. 非同期で更新される
    Reactはパフォーマンスを向上させるため、Stateの更新をバッチ処理で行います。そのため、複数回の更新は意図した順序で行われない場合があります。
   setCount(count + 1);
   setCount(count + 1); // countは1回しか増加しない可能性
  1. Stateはローカルなものである
    Stateは定義されたコンポーネント内でのみ有効です。他のコンポーネントと共有する場合はPropsを利用します。

Stateの初期値設定


useStateの引数で初期値を設定します。

const [name, setName] = useState("ゲスト");

初期値は固定値だけでなく、関数を使って動的に設定することも可能です。

const [value, setValue] = useState(() => {
  return Math.random();
});

Stateを使った実用例


以下は、フォームの入力内容をStateで管理する例です。

function Form() {
  const [text, setText] = useState("");

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

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>入力した内容: {text}</p>
    </div>
  );
}

このように、Stateを使うことでユーザー入力に応じてUIを即座に更新することができます。

Stateの利点

  1. 動的なUIの構築
    Stateを使うことで、ユーザーの操作に応じたインタラクティブなアプリケーションが作れます。
  2. ローカルなデータ管理
    コンポーネント単位で状態を管理できるため、スコープが明確です。
  3. シンプルな更新プロセス
    setState関数を使用することで、複雑なデータ更新も簡単に管理できます。

まとめ


Stateは、Reactアプリケーションにおける動的な振る舞いを実現する重要な仕組みです。useStateを用いることで、ユーザーの入力やアクションに応じた柔軟なUI更新が可能になります。次章では、ユーザー操作を処理するイベントハンドリングについて学びます。

イベントハンドリング


Reactでは、ユーザーの操作（クリック、入力、ホバーなど）に対する処理をイベントハンドリングとして実装します。Reactのイベントハンドリングは、HTMLと似た形式ですが、独自のルールがあります。この章では、Reactでのイベント処理の基本から、よく使うパターンまでを解説します。

イベントハンドリングの基本


Reactのイベントはキャメルケース（例: onClick）で記述されます。また、関数を直接指定する必要があります。以下は基本的な例です。

function App() {
  const handleClick = () => {
    alert("ボタンがクリックされました！");
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
}

このコードでは、onClickイベントが発生するとhandleClick関数が呼び出され、アラートが表示されます。

イベントオブジェクト


イベントハンドラには、ブラウザのイベントオブジェクトが自動的に渡されます。これを利用することで、より詳細な情報を取得できます。

function App() {
  const handleClick = (event) => {
    console.log("クリックした要素:", event.target);
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
}

ここでは、クリックされた要素がコンソールに表示されます。

イベントの種類


Reactでは、HTMLと同様にさまざまなイベントを扱うことができます。

  1. クリックイベント
   <button onClick={() => console.log("クリックされました！")}>クリック</button>
  1. 入力イベント
   function App() {
     const handleChange = (event) => {
       console.log("入力された値:", event.target.value);
     };

     return <input type="text" onChange={handleChange} />;
   }
  1. フォームの送信イベント
   function App() {
     const handleSubmit = (event) => {
       event.preventDefault(); // ページリロードを防止
       console.log("フォームが送信されました！");
     };

     return (
       <form onSubmit={handleSubmit}>
         <button type="submit">送信</button>
       </form>
     );
   }
  1. マウスイベント
   <div onMouseEnter={() => console.log("マウスが乗りました！")}>
     ホバーしてください
   </div>

イベントハンドラのスコープ


イベントハンドラ内では、thisの値が注意点になります。関数型コンポーネントでは通常thisを意識する必要はありませんが、クラス型コンポーネントではthisを正しくバインドする必要があります。

class App extends React.Component {
  handleClick() {
    console.log(this); // デフォルトでは undefined
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>クリック</button>
    );
  }
}

関数の引数を渡す


イベントハンドラに引数を渡したい場合は、ラップする関数を使用します。

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => handleClick("こんにちは！")}>クリック</button>
  );
}

イベントハンドリングのベストプラクティス

  1. イベントロジックを分離する
    ハンドラ関数をコンポーネントの外に分離することで、コードの再利用性を高められます。
  2. アロー関数を慎重に使用
    アロー関数を直接書くと、レンダリングごとに新しい関数が生成されるため、パフォーマンスに影響する場合があります。必要に応じて使い分けることが重要です。

まとめ


Reactのイベントハンドリングは、HTMLと似た直感的な記法で実装でき、UIの動的な振る舞いを簡単に表現できます。イベントオブジェクトや関数の引数を活用することで、柔軟なロジックを構築できます。次章では、コンポーネントのライフサイクルについて学びます。

コンポーネントライフサイクル


Reactコンポーネントは、生成から破棄までの間にさまざまな段階を経ます。これを「ライフサイクル」と呼びます。Reactでは、クラス型コンポーネントでライフサイクルメソッドを利用し、関数型コンポーネントではReact Hooksを活用してこれらの処理を行います。この章では、ライフサイクルの概要とその活用方法について解説します。

Reactのライフサイクルとは


コンポーネントライフサイクルは、主に以下の3つのフェーズに分かれます。

  1. マウント
    コンポーネントが最初にDOMに追加されるフェーズ。
  2. アップデート
    コンポーネントのStateやPropsが変更され、再レンダリングされるフェーズ。
  3. アンマウント
    コンポーネントがDOMから削除されるフェーズ。

クラス型コンポーネントのライフサイクルメソッド


クラス型コンポーネントでは、各フェーズで使用するメソッドが用意されています。

マウントフェーズ

  • constructor
    初期化処理（Stateの設定など）を行います。
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  • componentDidMount
    コンポーネントがレンダリングされた後に呼ばれます。APIの呼び出しやサブスクリプションの開始に利用されます。
  componentDidMount() {
    console.log("コンポーネントがマウントされました");
  }

アップデートフェーズ

  • shouldComponentUpdate
    再レンダリングが必要かどうかを制御できます。
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }
  • componentDidUpdate
    再レンダリング後に実行されます。DOMの操作や追加のデータ取得に使用されます。
  componentDidUpdate(prevProps, prevState) {
    console.log("コンポーネントが更新されました");
  }

アンマウントフェーズ

  • componentWillUnmount
    コンポーネントが破棄される前に呼ばれます。タイマーのクリアやサブスクリプションの解除に使用します。
  componentWillUnmount() {
    console.log("コンポーネントがアンマウントされました");
  }

関数型コンポーネントとReact Hooks


関数型コンポーネントでは、useEffectフックを使用してライフサイクルを管理します。

マウントと更新


useEffectを使用して、マウント時や更新時の処理を定義します。

import React, { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("マウントまたは更新されました");
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

アンマウント時の処理


クリーンアップ関数を返すことで、アンマウント時の処理を記述できます。

useEffect(() => {
  console.log("マウントされました");

  return () => {
    console.log("アンマウントされました");
  };
}, []);

ライフサイクルを活用する例


以下は、APIからデータを取得し、アンマウント時に処理をクリーンアップする例です。

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((result) => {
        if (isMounted) {
          setData(result);
        }
      });

    return () => {
      isMounted = false; // クリーンアップ処理
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : "データを読み込み中…"}</div>;
}

まとめ


コンポーネントライフサイクルを理解することで、Reactアプリケーションの状態管理や副作用の制御が可能になります。クラス型コンポーネントのメソッドと関数型コンポーネントのHooksを適切に使い分けて、効率的なアプリケーション開発を目指しましょう。次章では、Reactの基本機能を活用した簡単なプロジェクト例を紹介します。

簡単なプロジェクトの実例


Reactの基本機能を活用して、シンプルなTodoアプリを作成してみましょう。このプロジェクトでは、ユーザーがタスクを追加、削除、一覧表示できる機能を実装します。初心者でもReactのPropsやState、イベントハンドリングを実践的に学べる内容です。

プロジェクトの概要


機能:

  1. 新しいタスクを追加する。
  2. 追加されたタスクを一覧表示する。
  3. タスクを削除する。

ステップ1: プロジェクトの基本構造


まず、以下の基本構造を用意します。

import React, { useState } from "react";

function TodoApp() {
  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm />
      <TodoList />
    </div>
  );
}

export default TodoApp;

ここではTodoForm（タスクの入力フォーム）とTodoList（タスク一覧）という2つのコンポーネントを使用します。

ステップ2: タスクの追加


新しいタスクを入力し、追加するフォームを作成します。

function TodoForm({ addTask }) {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask(""); // 入力欄をリセット
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="タスクを入力"
      />
      <button type="submit">追加</button>
    </form>
  );
}

このフォームでは、useStateで管理するtaskを利用して、ユーザー入力を追跡します。

ステップ3: タスク一覧の表示


追加されたタスクを一覧表示するTodoListコンポーネントを作成します。

function TodoList({ tasks, removeTask }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task}{" "}
          <button onClick={() => removeTask(index)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

タスクごとに削除ボタンを表示し、タスクを管理できるようにします。

ステップ4: 状態管理


タスクの追加・削除を親コンポーネントTodoAppで管理します。

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} removeTask={removeTask} />
    </div>
  );
}

export default TodoApp;

ここで、tasksというStateを利用して、タスクのリストを一元管理します。

完成したTodoアプリのコード


以下が完成したコードです。

import React, { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} removeTask={removeTask} />
    </div>
  );
}

function TodoForm({ addTask }) {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask("");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="タスクを入力"
      />
      <button type="submit">追加</button>
    </form>
  );
}

function TodoList({ tasks, removeTask }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task} <button onClick={() => removeTask(index)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoApp;

まとめ


このシンプルなTodoアプリを通じて、Reactの基本機能（Props、State、イベントハンドリング）の実践的な使い方を学ぶことができます。このような小さなプロジェクトを積み重ねることで、Reactの理解が深まり、より複雑なアプリケーションへと発展させることができます。次章では、基本機能を応用したプロジェクト例について解説します。

Reactの基本機能で作れる応用例


Reactの基本機能（Props、State、イベントハンドリング、ライフサイクル）を活用するだけでも、さまざまな実用的なアプリケーションを構築できます。この章では、基本機能を応用したプロジェクト例を紹介し、それぞれのポイントを解説します。

1. カウンター付き商品カート


ユーザーが商品の数量を増減し、合計金額を計算できるシンプルなカート機能を構築します。

主な機能:

  • 数量を+/-ボタンで調整。
  • 商品ごとの価格と合計金額を表示。

ポイント:

  • State: 商品ごとの数量を管理。
  • イベントハンドリング: 数量の増減処理を実装。

例:

function CartItem({ item, updateQuantity }) {
  return (
    <div>
      <h3>{item.name}</h3>
      <p>価格: {item.price}円</p>
      <button onClick={() => updateQuantity(item.id, -1)}>-</button>
      {item.quantity}
      <button onClick={() => updateQuantity(item.id, 1)}>+</button>
    </div>
  );
}

2. リアルタイムチャット


ユーザーがリアルタイムでメッセージを投稿し、一覧に表示されるシンプルなチャット機能。

主な機能:

  • テキスト入力でメッセージを送信。
  • 送信されたメッセージをリアルタイムで表示。

ポイント:

  • State: メッセージ一覧を管理。
  • Props: 入力されたメッセージを親コンポーネントへ渡す。

例:

function ChatApp() {
  const [messages, setMessages] = useState([]);

  const addMessage = (message) => {
    setMessages([...messages, message]);
  };

  return (
    <div>
      <MessageInput addMessage={addMessage} />
      <MessageList messages={messages} />
    </div>
  );
}

3. タイマーアプリ


スタート、停止、リセット機能を備えたシンプルなタイマーアプリ。

主な機能:

  • ボタンでカウントを制御。
  • 時間が経過するごとに表示を更新。

ポイント:

  • useEffect: タイマー処理を管理。
  • State: 経過時間を管理。

例:

function Timer() {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (running) {
      const interval = setInterval(() => setTime((t) => t + 1), 1000);
      return () => clearInterval(interval);
    }
  }, [running]);

  return (
    <div>
      <p>経過時間: {time}秒</p>
      <button onClick={() => setRunning(true)}>スタート</button>
      <button onClick={() => setRunning(false)}>ストップ</button>
      <button onClick={() => setTime(0)}>リセット</button>
    </div>
  );
}

4. 天気情報表示アプリ


APIを利用して、入力された都市の天気情報を取得・表示するアプリ。

主な機能:

  • ユーザーが都市名を入力。
  • 外部APIを使用して天気データを取得。

ポイント:

  • useEffect: APIコールを管理。
  • State: 天気情報を保存。

例:

function WeatherApp() {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);

  const fetchWeather = () => {
    fetch(`https://api.example.com/weather?city=${city}`)
      .then((res) => res.json())
      .then((data) => setWeather(data));
  };

  return (
    <div>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="都市名を入力"
      />
      <button onClick={fetchWeather}>天気を取得</button>
      {weather && <p>気温: {weather.temp}°C</p>}
    </div>
  );
}

まとめ


Reactの基本機能だけで、ショッピングカート、チャット、タイマー、天気アプリなどの応用的なアプリケーションを構築できます。これらのプロジェクトを通じて、Reactの柔軟性と基本機能の力を実感できるはずです。次章では、この記事の内容を振り返り、Reactの学びを総括します。

まとめ


本記事では、Reactの基本機能を活用して構築できるシンプルかつ応用的なアプリケーションの例を解説しました。JSX、コンポーネント、Props、State、イベントハンドリング、そしてライフサイクルというReactの基礎的な仕組みを押さえるだけで、実用的なアプリを作れることを理解していただけたと思います。

Reactの基本機能は、効率的で柔軟なフロントエンド開発を可能にする強力なツールです。これらを使いこなすことで、複雑なアプリケーション開発にも対応できるスキルが身につきます。ぜひ基本機能を活用して、独自のアプリケーションを構築してみてください。Reactの学びを深めることで、開発の幅をさらに広げることができます！

React
プログラミング React フロントエンド

コメント

コメントする

目次
  1. Reactの概要
    1. Reactの誕生背景
    2. Reactの特徴
    3. Reactが選ばれる理由
  2. JSXの使い方
    1. JSXの基本構文
    2. JSXを書く際のルール
    3. JSXの利点
    4. JSXの変換
    5. 練習問題
  3. コンポーネントの基本
    1. コンポーネントの種類
    2. コンポーネントの作成方法
    3. コンポーネントの再利用性
    4. コンポーネントの役割分担
    5. まとめ
  4. Propsを利用したデータの受け渡し
    1. Propsの基本構文
    2. Propsの特性
    3. Propsを用いた動的レンダリング
    4. Propsとデフォルト値
    5. Propsの型チェック
    6. まとめ
  5. Stateの管理と更新
    1. Stateの基本概念
    2. Stateのルール
    3. Stateの初期値設定
    4. Stateを使った実用例
    5. Stateの利点
    6. まとめ
  6. イベントハンドリング
    1. イベントハンドリングの基本
    2. イベントオブジェクト
    3. イベントの種類
    4. イベントハンドラのスコープ
    5. 関数の引数を渡す
    6. イベントハンドリングのベストプラクティス
    7. まとめ
  7. コンポーネントライフサイクル
    1. Reactのライフサイクルとは
    2. クラス型コンポーネントのライフサイクルメソッド
    3. 関数型コンポーネントとReact Hooks
    4. ライフサイクルを活用する例
    5. まとめ
  8. 簡単なプロジェクトの実例
    1. プロジェクトの概要
    2. ステップ1: プロジェクトの基本構造
    3. ステップ2: タスクの追加
    4. ステップ3: タスク一覧の表示
    5. ステップ4: 状態管理
    6. 完成したTodoアプリのコード
    7. まとめ
  9. Reactの基本機能で作れる応用例
    1. 1. カウンター付き商品カート
    2. 2. リアルタイムチャット
    3. 3. タイマーアプリ
    4. 4. 天気情報表示アプリ
    5. まとめ
  10. まとめ