プログラミング

React入門ガイド

最終更新： 28/03/2025
1 分の読み

Reactは、ユーザーインターフェイス（UI）を構築するための人気のあるJavaScriptライブラリです。シンプルでありながら強力なツールとして、多くの企業や開発者に利用されています。この記事では、Reactの基本的なセットアップ方法から実際に開発を始めるためのステップを、完全かつ包括的に説明します。これからReactを使ってWebアプリケーションの開発を始めたい方にとって、必要な知識をしっかりと押さえることができます。

1. Reactのインストール

Reactを始めるには、まずReactとその関連パッケージをインストールする必要があります。最も簡単な方法は、Reactの公式CLIツール「Create React App」を使用することです。このツールを使うことで、Reactのプロジェクトの初期設定が簡単に行えます。

関連記事

Create React Appを使ったプロジェクトの作成

まずは、Node.jsがインストールされていることを確認してください。Node.jsは、Reactを実行するために必要な環境を提供します。

  1. Node.jsのインストール

  2. Create React Appのインストール
    以下のコマンドをターミナルで実行し、Create React Appをグローバルにインストールします。

    bash
    npm install -g create-react-app

  3. 新しいReactプロジェクトの作成
    次に、以下のコマンドで新しいReactアプリケーションを作成します。my-appはプロジェクトの名前です。

    bash
    npx create-react-app my-app

  4. プロジェクトディレクトリに移動
    プロジェクトの作成が完了したら、次のコマンドで作成したプロジェクトのディレクトリに移動します。

    bash
    cd my-app

  5. Reactアプリの実行
    以下のコマンドで、Reactアプリケーションをローカルサーバー上で実行できます。

    bash
    npm start

    このコマンドを実行すると、デフォルトでhttp://localhost:3000にアプリケーションが立ち上がります。

2. プロジェクト構造の理解

Reactプロジェクトが作成されると、いくつかのディレクトリとファイルが生成されます。それぞれの役割について簡単に説明します。

  • public/: 公開ディレクトリで、主にHTMLファイルなどが格納されます。index.htmlがこのディレクトリに含まれています。

  • src/: ソースコードディレクトリで、アプリケーションのすべてのJavaScriptやCSSファイルがここに格納されます。特に、Reactコンポーネントやその他のロジックがここに含まれます。

  • node_modules/: プロジェクトで依存しているパッケージが格納されるディレクトリです。通常、手動で操作することはありません。

3. Reactコンポーネントの作成

Reactの基本的な概念は「コンポーネント」です。コンポーネントは、アプリケーションのUIを構成する最小単位です。Reactでは、関数コンポーネントとクラスコンポーネントの2種類がありますが、現在は関数コンポーネントが主流です。

簡単なコンポーネントの作成

srcディレクトリにApp.jsというファイルが生成されています。このファイルが最初のReactコンポーネントです。これをカスタマイズして、独自のUIを作成します。

  1. App.jsを開いて、以下のように書き換えます。

    jsx
    import React from 'react';

function App() {
  return (
    <div>
      <h1>こんにちは、React！h1>
      <p>Reactで初めてのアプリケーションです。p>
    div>
  );
}

export default App;

  2. このコードでは、Appという関数コンポーネントが定義されており、

    タグと

    タグを返しています。これをブラウザで確認することで、Reactの基本的な動作を体験できます。

4. JSX（JavaScript XML）の理解

Reactでは、JSXという構文を使用して、HTMLとJavaScriptを組み合わせてUIを記述します。JSXは、JavaScript内にHTMLのような構文を埋め込むことができる特徴的な言語拡張です。

JSXの基本

JSXでは、HTMLのようなタグをJavaScriptのコード内に記述しますが、以下のようなルールがあります。

  • JSXでは、タグ名は必ず閉じタグが必要です（例えば、）。

  • 属性名はキャメルケースで記述します（例えば、classNameやhtmlFor）。

JSXの例

jsx
const element = <h1 className="greeting">こんにちは、世界！h1>;

この例では、

タグにclassName属性を指定しています。通常のHTMLではclass属性を使いますが、JSXではclassが予約語であるため、classNameと書く必要があります。

5. StateとPropsの管理

Reactの重要な特徴の一つは、コンポーネント間で状態（state）やプロパティ（props）を管理できることです。

State

Stateはコンポーネントの内部で保持するデータです。Stateを変更することで、コンポーネントが再描画され、UIが更新されます。

jsx
import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}p>
      <button onClick={() => setCount(count + 1)}>カウントアップbutton>
    div>
  );
}

export default Counter;

この例では、useStateフックを使用してcountという状態を管理しています。ボタンをクリックするたびに、カウントが増加します。

Props

Propsは親コンポーネントから子コンポーネントに渡されるデータです。Propsは変更不可（immutable）で、受け取ったデータを基にUIを構築します。

jsx
function Greeting(props) {
  return <h1>{props.message}h1>;
}

function App() {
  return <Greeting message="こんにちは、React！" />;
}

ここでは、Greetingコンポーネントがmessageというプロパティを受け取って表示しています。

6. イベントハンドラー

Reactでは、イベントハンドラーもコンポーネント内で簡単に管理できます。イベントハンドラーは、ユーザーがUIを操作した際に発生するアクションを処理します。

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

  return <button onClick={handleClick}>クリックしてみてくださいbutton>;
}

このコードでは、onClickイベントが発生したときにhandleClick関数が呼ばれ、アラートが表示されます。

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

Reactコンポーネントにはライフサイクルがあります。ライフサイクルは、コンポーネントが「マウント」「更新」「アンマウント」される過程を管理するものです。関数コンポーネントでは、useEffectフックを使ってライフサイクルに関連する処理を行います。

jsx
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('コンポーネントがマウントされました！');
    return () => {
      console.log('コンポーネントがアンマウントされました！');
    };
  }, []);

  return <h1>ライフサイクルのデモh1>;
}

このコードでは、コンポーネントがマウントされるときにメッセージがコンソールに表示され、アンマウントされるときにもメッセージが表示されます。

まとめ

Reactは、そのシンプルさと強力な機能で、現代のWeb開発において非常に人気のあるライブラリです。ここで紹介した基本的なセットアップ方法からコンポーネントの作成、状態管理、イベント処理、ライフサイクルの管理まで、Reactの基本的な使い方を押さえることができました。これらの基礎を理解すれば、さらに複雑なアプリケーションの開発にも対応できるようになります。

最終更新： 28/03/2025
1 分の読み
Back to top button