Blog

Reactチュートリアル：初心者向けガイド

Audrey Lopez

Audrey Lopez

13 6月 2025

Reactチュートリアル：初心者向けガイド

React開発者を目指す皆さん、ようこそ！素晴らしい選択をしましたね。Reactは、ユーザーインターフェース構築のための強力で人気のあるJavaScriptライブラリであり、これを学ぶことはウェブ開発スキルを向上させる確実な方法です。この包括的なステップバイステップガイドは、あなたがゼロからヒーローになるまでをサポートし、2025年に独自のReactアプリケーションを構築し始めるために必要な実践的な知識を身につけさせます。読むだけでなく、実践することに焦点を当てますので、コードを書く準備をしてください！

💡
美しいAPIドキュメントを生成する優れたAPIテストツールが必要ですか？

最大限の生産性で開発チームが協力するための統合されたオールインワンプラットフォームが必要ですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！
button

React開発環境をセットアップしましょう

素晴らしいユーザーインターフェースの構築を始める前に、作業場所をセットアップする必要があります。これは、新しいプロジェクトを始める前に作業場を準備するようなものだと考えてください。

必須要素のインストール：Node.jsとnpm

Reactアプリケーションは、Node.jsとそのパッケージマネージャーであるnpm（Node Package Manager）を使用して構築および管理されます。

始めるには、公式のNode.jsウェブサイトにアクセスし、最新の長期サポート（LTS）バージョンをダウンロードしてください。インストーラーは簡単です。画面の指示に従ってください。インストールが完了すると、Node.jsとnpmの両方がすぐに使用できるようになります。インストールを確認するには、ターミナルまたはコマンドプロンプトを開いて次のように入力します：Bash

node -v
npm -v

これらのコマンドは、それぞれインストールされているNode.jsとnpmのバージョンを表示するはずです。

Viteで初めてのReactプロジェクト

以前は、新しいReactプロジェクトを開始するための定番ツールはcreate-react-appでした。しかし、現代のWeb開発の状況は急速に変化しており、2025年では、その驚異的な速度と効率性からViteが推奨される選択肢となっています。

Viteで新しいReactプロジェクトを作成するには、ターミナルを開いて次のコマンドを実行します：Bash

npm create vite@latest my-first-react-app -- --template react

このコマンドを分解してみましょう：

コマンドが完了すると、プロジェクト名と同じ新しいディレクトリが作成されます。このディレクトリに移動します：Bash

cd my-first-react-app

次に、プロジェクトの依存関係をインストールする必要があります。これらは、Reactアプリケーションが正しく機能するために必要な他のパッケージです。次のコマンドを実行します：Bash

npm install

最後に、真新しいReactアプリケーションを実際に見てみるために、開発サーバーを起動します：Bash

npm run dev

ターミナルにはローカルURL、通常はhttp://localhost:5173が表示されます。このURLをWebブラウザで開き、Viteによって作成されたデフォルトのReactアプリケーションが表示されるはずです。おめでとうございます、初めてのReactプロジェクトのセットアップが完了しました！

Reactの心臓部：コンポーネントとJSX

Reactアプリケーションが実行できるようになったので、Reactを非常に強力にしている核となる概念、すなわちコンポーネントとJSXについて掘り下げてみましょう。

コンポーネントとは？

その核となる部分で、Reactアプリケーションは、コンポーネントと呼ばれる再利用可能で自己完結型のUIの集合体です。ウェブページをLEGOブロックで構築されていると考えてください。各ブロックがコンポーネントであり、それらを組み合わせてより複雑な構造を作成できます。

my-first-react-appプロジェクトで、srcフォルダを開くと、App.jsxという名前のファイルが見つかります。これがメインのアプリケーションコンポーネントです。基本を理解するためにその内容を単純化してみましょう：JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

このコードでは：

JSXの理解：JavaScript XML

JSXは、JavaScriptファイル内に1HTMLのようなコードを記述できるようにするJavaScriptの構文拡張です。実際にはHTMLではありませんが、UIコードの記述をはるかに直感的で読みやすくします。

舞台裏では、トランスパイラと呼ばれるツール（この場合はViteが提供）が、このJSXをブラウザが理解できる通常のJavaScriptに変換します。

JSXの力を確認するために、App.jsxを修正してみましょう。波括弧{}を使用することで、JavaScript式をJSX内に直接埋め込むことができます。JavaScript

// src/App.jsx

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
    </div>
  );
}

export default App;

ファイルを保存すると、ブラウザが自動的に更新されて新しいコンテンツが表示されます。これはViteのHot Module Replacement（HMR）と呼ばれる機能であり、素晴らしい開発体験を提供します。

初めてのカスタムコンポーネントの作成

独自のコンポーネントを作成してみましょう。srcフォルダに、Greeting.jsxという名前の新しいファイルを作成します。JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>This is a greeting from my custom component!</h2>
  );
}

export default Greeting;

次に、この新しいGreetingコンポーネントをApp.jsxコンポーネント内で使用してみましょう。JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Greetingコンポーネントをインポート

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
      <Greeting /> {/* Greetingコンポーネントを使用 */}
    </div>
  );
}

export default App;

通常のHTMLタグのようにインポートして<Greeting />を使用することで、複数のコンポーネントからUIを構成しました。これがReactアプリケーションの基本的な構成要素です。

Propsでデータを渡す

私たちのGreetingコンポーネントは少し静的です。もし異なる人に挨拶したい場合はどうすればよいでしょうか？ここでprops（propertiesの略）が登場します。Propsは、親コンポーネントから子コンポーネントにデータを渡す方法です。

Propsでコンポーネントを動的にする

Greeting.jsxを修正して、name propを受け入れるようにしてみましょう。JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Hello, {props.name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

これで、App.jsxで、Greetingコンポーネントにname propを渡すことができます。

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

これで、それぞれ異なる名前で3つの異なる挨拶が表示されるはずです。Propsを使用すると、異なるデータでコンポーネントを再利用できるため、UIが信じられないほど柔軟になります。

一般的でモダンなJavaScriptのプラクティスとして、関数のパラメータリストでpropsオブジェクトを直接分割代入する方法があります。Greeting.jsxをリファクタリングしてみましょう：JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Hello, {name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

これは同じ結果を達成しますが、よりクリーンで簡潔なコードになります。

Stateでコンポーネントのメモリを管理する

Propsはコンポーネントツリーを下にデータを渡すのに優れていますが、コンポーネントが独自のデータを記憶し、管理する必要がある場合はどうなるでしょうか？ここでstateが登場します。Stateは、コンポーネントの内部で管理されるデータです。コンポーネントのstateが変更されると、Reactはそのコンポーネントを自動的に再レンダリングして新しいstateを反映させます。

useState Hookの紹介

関数コンポーネントでstateを管理するために、Reactの特別な関数であるHookを使用します。最も基本的なHookはuseStateです。

useStateがどのように機能するかを理解するために、簡単なカウンターコンポーネントを構築してみましょう。srcフォルダにCounter.jsxという名前の新しいファイルを作成します。JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

これを分解してみましょう：

  1. count: stateの現在の値。
  2. setCount: count stateを更新するために使用できる関数。

次に、このCounterコンポーネントをApp.jsxに追加してみましょう：JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>My Awesome React App</h1>
      <Counter />
    </div>
  );
}

export default App;

ブラウザにカウンターが表示されるはずです。ボタンをクリックするたびに、数字が増加します。Reactはstateが変更されるたびにCounterコンポーネントを再レンダリングしています。

ユーザーアクションへの応答：イベント処理

インタラクティビティは、現代のWebアプリケーションの核心です。Reactは、クリック、フォーム送信、キーボード入力などのイベントをシンプルかつ一貫した方法で処理するための機能を提供します。

CounterコンポーネントのonClickで基本的なイベントハンドラをすでに見てきました。ユーザー入力を受け付ける簡単なフォームを構築することで、これをさらに探求してみましょう。

NameForm.jsxという名前の新しいコンポーネントファイルを作成します。JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // デフォルトのフォーム送信動作を防止
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default NameForm;

このフォームコンポーネントを分析してみましょう：

このNameFormをApp.jsxに追加して、実際に見てみましょう。

情報の表示：条件付きレンダリングとリスト

実際のアプリケーションでは、特定の条件に基づいてコンテンツを表示または非表示にする必要があり、頻繁にデータのリストを表示する必要があります。

条件付きレンダリングで表示と非表示を切り替える

ユーザーがログインしているかどうかに応じて異なるメッセージを表示するコンポーネントを作成してみましょう。LoginMessage.jsxという名前のファイルを作成します。JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }
  return <h2>Please log in.</h2>;
}

export default LoginMessage;

より簡潔な条件付きレンダリングのために、三項演算子を使用することもできます。JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    </div>
  );
}

export default LoginMessage;

その後、このコンポーネントをApp.jsxで使用し、isLoggedIn propを渡して異なるメッセージを確認できます。

データのリストを表示する

アイテムのリストをレンダリングするには、通常、map()配列メソッドを使用します。果物のリストを表示するコンポーネントを作成してみましょう。FruitList.jsxという名前のファイルを作成します。JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

ここでは、fruits配列をmapで処理し、各果物に対して<li>要素を返しています。

key={index} propに気づくでしょう。アイテムのリストをレンダリングするとき、Reactはリストが変更されたときに効率的に更新するために、各アイテムに一意のkeyが必要です。配列のインデックスをキーとして使用することは、シンプルで静的なリストには許容されます。ただし、アイテムが追加、削除、または並べ替えられる動的なリストの場合、利用可能なデータから一意のIDを使用するのが最善です。

アプリケーションにスタイルを追加する

素晴らしいアプリケーションは見た目も良い必要があります。Reactコンポーネントにスタイルを追加するにはいくつかの方法があります。

CSSスタイルシート

最も簡単な方法は、通常のCSSファイルを使用することです。srcフォルダに、App.cssファイルがあります。そこにスタイルを追加できます。

例えば、FruitListコンポーネントにスタイルを追加するには、App.cssに次のように追加します：CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

次に、FruitList.jsxで、これらのCSSクラスを使用できます。JavaScript

// src/FruitList.jsx
import './App.css'; // CSSファイルをインポートすることを忘れないでください

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

JSXでは、classはJavaScriptの予約語であるため、代わりにclassNameを使用することに注意してください。

CSS Modules

大規模なアプリケーションの場合、CSS Modulesはスタイルを特定のコンポーネントにスコープ化し、スタイルの競合を防ぐ方法を提供します。CSS Moduleファイルは.module.css拡張子で命名されます。

FruitList.module.cssを作成してみましょう：CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

次に、FruitList.jsxで、スタイルをオブジェクトとしてインポートします：JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits (Styled with CSS Modules):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Viteは自動的に一意のクラス名を生成し、FruitList.module.cssのスタイルがFruitListコンポーネントにのみ適用されるようにします。

React Routerでアプリ内をナビゲートする

ほとんどのWebアプリケーションには複数のページがあります。Reactで構築されたシングルページアプリケーション（SPA）でこれらの「ページ」間のナビゲーションを処理するために、React Routerと呼ばれるライブラリを使用します。

React Routerのセットアップ

まず、React Routerをインストールする必要があります：Bash

npm install react-router-dom

ページの作成

HomePage.jsxとAboutPage.jsxという2つの簡単なページコンポーネントを作成してみましょう。JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page of our amazing app!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is all about our incredible application.</p>
    </div>
  );
}

export default AboutPage;

ルーターの設定

次に、App.jsxでルートを設定します。JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

React Routerの新しいコンポーネントを分解してみましょう：

これで、「Home」と「About」のリンクをクリックすると、ページ全体のリロードなしにコンテンツが変更されます。クライアントサイドルーティングの実装に成功しました！

さらに進む：useEffect Hook

useState Hookは、レンダリングされるものに直接影響するstateを管理するためのものです。しかし、APIからのデータのフェッチ、購読の設定、DOMの手動での変更などの副作用についてはどうでしょうか？これには、useEffect Hookを使用します。

useEffect Hookは、デフォルトではすべてのレンダリング後に実行されます。偽のAPIからデータをフェッチするコンポーネントを作成して、実際に見てみましょう。

新しいファイルDataFetcher.jsxを作成します。JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // この関数はコンポーネントのレンダリング後に呼び出されます
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空の依存配列が重要です！

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h3>Fetched Data:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

ここでuseEffectを理解する鍵は、2番目の引数、すなわち依存配列です。

コンポーネントがロードされたときにデータがフェッチされて表示される様子を見るために、DataFetcherをApp.jsxに追加してください。

結論と次のステップ

あなたは長い道のりを歩んできました！あなたは次のことを学びました：

これは大きな成果であり、あなたはこれから構築するための確固たる基盤を手に入れました。Reactの世界は広大でエキサイティングです。次に探求したいトピックをいくつか紹介します：

今あなたができる最も重要なことは、構築し続けることです。実践が鍵です。毎日使用している簡単なウェブサイトやアプリケーションを再現してみてください。新しい機能に挑戦してください。コードを書けば書くほど、より自信を持ち、スキルが向上します。

Reactコミュニティへようこそ。コーディングを楽しんでください！

💡
美しいAPIドキュメントを生成する優れたAPIテストツールが必要ですか？

最大限の生産性で開発チームが協力するための統合されたオールインワンプラットフォームが必要ですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！
button

ApidogでAPIデザイン中心のアプローチを取る

APIの開発と利用をよりシンプルなことにする方法を発見できる

無料会員登録ダウンロード