LoginSignup
1
2
@mnoguchi

React入門：初心者が最初に学ぶべきステップ【導入編】

Last updated at Posted at 2024-09-27

はじめに

Reactは、WebアプリケーションのUI（ユーザーインターフェイス）を効率的に構築できるJavaScriptライブラリです。Reactの主要な特徴を理解し、実際に簡単なアプリケーションを作りながら学ぶことで、初めてのReact開発をスムーズに進められます。この記事では、Reactの基本概念やJSX、HTMLとの関係性を解説し、実際にカウントアップ機能を持つボタンを実装するまでの手順を紹介します。

目次

  1. Reactとは？
  2. Reactの基本概念
    • コンポーネント
    • 仮想DOM
    • JSXの概要
  3. HTMLとの関係性
  4. 環境設定
  5. 実装：Hello Worldプログラム
  6. 実装：3つのボタンでそれぞれカウントアップ
  7. まとめと次回予告

1. Reactとは？

Reactは、Facebookが開発したJavaScriptライブラリで、UIをコンポーネントベースで構築できます。Reactはシンプルで再利用性の高いコードを実現するため、多くの開発者に採用されています。動的なWebアプリケーションの構築に非常に役立つツールです。

2. Reactの基本概念

Reactの強力な機能を理解するために、いくつかの重要な概念を見ていきましょう。

コンポーネント

コンポーネントは、ReactにおけるUIの基本単位です。アプリケーションのUIを小さな独立したパーツに分けることができ、各コンポーネントは他のコンポーネントと独立して機能します。ReactコンポーネントはJavaScriptの関数やクラスとして定義され、以下のように書きます。

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

仮想DOM

仮想DOMは、Reactが効率的にUIを更新するために使用する仕組みです。従来のDOM（Document Object Model）を直接操作するのではなく、仮想DOMでUIの状態をメモリ上に保持し、差分だけを実際のDOMに反映することで、高速なレンダリングを実現します。

JSXの概要

**JSX（JavaScript XML）**は、JavaScriptの中でHTMLに似た構文を使ってUIを定義する記法です。見た目はHTMLですが、実際にはJavaScriptの構文です。JSXを使うことで、HTMLタグと同様の方法でReactコンポーネントを記述できます。

JSXの例:

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

上記のコードでは、props.nameがJSXの中で呼び出され、動的に値を挿入しています。これにより、柔軟なUIのレンダリングが可能です。

3. HTMLとの関係性

Reactでは、通常のHTMLファイルを直接操作する機会は少なくなりますが、public/index.htmlという1つのHTMLファイルがプロジェクトの「入り口」として使われます。このHTMLファイル内の<div id="root"></div>タグが、Reactコンポーネントをレンダリングする領域となります。

Reactは、JavaScriptコードを使ってこのroot要素にUIを描画し、すべてのUIの管理をJavaScript側で行います。HTMLそのものはスタート地点として使われるだけであり、動的なUIはすべてJavaScriptとJSXで定義されます。

index.htmlの例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

このHTMLファイルの中で、Reactコンポーネントが動的に描画される領域が<div id="root"></div>です。

4. 環境設定

Reactを始めるために必要なツールをセットアップします。

必要なツール

  • Node.js: Reactのプロジェクトを作成するために使用します。
  • VSCode: React開発に適したエディタです。

手順

  1. Node.jsをインストールします（公式サイト）。

  2. ターミナルで以下のコマンドを実行してプロジェクトを作成します。

    npx create-react-app my-first-react-app
cd my-first-react-app
npm start

    プロジェクトが自動で起動し、ブラウザにReactアプリが表示されます。

5. 実装：Hello Worldプログラム

まずは最もシンプルな「Hello World」プログラムを作成してみましょう。

コード

  1. src/App.jsを以下のように書き換えます。
import React from 'react';

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

export default App;

説明

  • コンポーネントの作成: AppというReactのコンポーネントを作成し、<h1>Hello, World!</h1>というテキストを表示しています。
  • JSX: このコードはHTMLに似ていますが、JSXというReact独自の構文で記述されています。<div>や<h1>は実際にはJavaScriptの構文です。
  • エクスポート: Appコンポーネントを他のファイルでも使用できるようにexportしています。

実行結果

ブラウザに「Hello, World!」と表示されれば成功です。

6. 実装：3つのボタンでそれぞれカウントアップ

Reactの基本を理解したところで、3つのボタンをクリックするたびにカウントがアップされる簡単なアプリを作成しましょう。

App.jsのコード:

import React, { useState } from 'react';

function ClickCounter() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  const totalClicks = count1 + count2 + count3;

  return (
    <div>
      <h1>ボタンごとのクリック数</h1>
      <button onClick={() => setCount1(count1 + 1)}>ボタン1: {count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>ボタン2: {count2}</button>
      <button onClick={() => setCount3(count3 + 1)}>ボタン3: {count3}</button>
      <h2>合計クリック数: {totalClicks}</h2>
    </div>
  );
}

export default ClickCounter;

解説

  • useState: クリック数を管理するためにuseStateを使用しています。各ボタンのクリック数を個別に管理します。
  • クリックイベント: ボタンをクリックするたびに対応するカウントが増加します。
  • 合計クリック数: 3つのボタンのクリック数を合計し、表示しています。

画面イメージ

スクリーンショット 2024-09-27 16.25.31.png

7. まとめと次回予告

今回の記事では、Reactの基本的な概念であるコンポーネントやJSX、仮想DOMについて学び、実際にカウントアップ機能を持つボタンを実装しました。次回は、状態管理やコンポーネント間のデータ共有についてさらに掘り下げた内容を解説する予定です。

この記事が役に立ったと思った方は、ぜひ「いいね」とフォローをお願いします！次回の記事もお楽しみに！

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2