ITC Media

React

【初心者向け】React入門ガイド｜制作物付きで一から解説

（最終更新月：2023年6月）

✔このような方へ向けて書かれた記事となります

「Reactって何ができるのだろうか？」
「Reactの基本的な使い方が知りたい」
「Reactで実際に作るアプリケーションの例が見たい」

✔当記事を通じてお伝えすること

  • Reactの概念と基本機能
  • Reactの各コンポーネントの書き方とその応用
  • Reactによるアプリケーション開発の実例

当記事では、Reactの基本概念から各コンポーネントの使い方、さらに実際にアプリケーションを開発する過程まで、具体例を用いてわかりやすく解説しています。

ぜひ最後までお読みいただき、Reactの魅力を感じてください。

Reactとは何か？

この章では、Reactの特性とその核となる概念について詳しく探っていきます。

基本の理解を深めることで、Reactのパワフルな機能を最大限に利用するための土台を作ります。

  • Reactの特徴
  • JSX記法の紹介
  • コンポーネント、state、ライフサイクル

特徴

Reactの特性は、以下のとおり。

  • その高度なパフォーマンス
  • コンポーネント指向の設計
  • 柔軟性

Reactには、仮想DOM（Virtual DOM）という技術が使われています。

効率的にページをレンダリングし、ユーザの操作に対する応答性が高めているのです。

また、ReactはUIを独立したコンポーネントに分割し、それぞれを組み合わせてアプリケーションを構築。

コードの再利用が可能となり、保守性と可読性も向上します。

著者の自作したWebアプリサイトです。（ReactとDjangoで開発）

https://react.itc.tokyo/

JSX記法の紹介

JSXはJavaScript XMLの略で、React独自の記法です。

これはJavaScriptとHTMLを組み合わせたもので、HTMLのように見えるがJavaScriptとして動作します。

JSXを使うことで、JavaScript内で直接HTMLタグを書けます。

Reactコンポーネントをわかりやすく、見やすくできるのです。

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

Reactの核となる概念は以下のとおり。

  • コンポーネント：再利用可能なUIのパーツで、アプリケーションの見た目と動作を定義
  • state：コンポーネントの内部で管理されるデータで、コンポーネントの振る舞いを制御
  • ライフサイクル：コンポーネントの「生涯」を表し、特定の時点で何をするかを定義

これらの概念を理解することで、Reactの強力な機能を自在に操ることができます。

前提知識

Reactを学ぶ前に、一部の前提知識を身につけることが有用です。

その前提知識としてHTML, CSS, JavaScriptの基本について説明し、さらにNode.jsとnpmの導入について説明します。

  • HTML, CSS, JavaScriptの基本
  • Node.jsとnpmの導入

HTML, CSS, JavaScriptの基本

ReactはJavaScriptベースのライブラリなので、JavaScriptの基本的な知識は必須です。

以下のような基本的なJavaScriptの概念について理解しておくと良いでしょう。

  • 変数
  • 関数
  • オブジェクト
  • 配列
  • プロミス

Reactはユーザインターフェースを作成するためのライブラリなので、HTMLとCSSの知識も重要です

HTMLタグ、CSSセレクタ、スタイリングなど、基本的なウェブ開発の知識が必要となります。

https://itc.tokyo/html/

Node.jsとnpmの導入

Reactの開発環境を整えるためには、Node.jsとnpm（Node Package Manager）が必要です。

Node.jsはJavaScriptをブラウザ以外の環境で実行するためのランタイムで、npmはNode.jsのパッケージ管理ツールです。

Reactやその他のJavaScriptライブラリを簡単にインストールするために使用します。

npmをインストール｜Windows、Mac、Linux｜OS別

環境設定

Reactの環境設定について見ていきましょう。

具体的には、Create React Appの導入、プロジェクトの作成と編集、プロジェクトフォルダの説明について説明します。

  • Create React Appの導入
  • プロジェクトの作成と編集

Create React Appの導入

Reactの開発環境を簡単にセットアップするためのツールとして、Facebookが公式に提供している「Create React App」があります。

これを使うと、Reactの新規プロジェクトを簡単に作成し、すぐに開発を始められます。

導入は非常にシンプルで、npmを使ってグローバルにインストールするだけ。

ターミナルで次のコマンドを実行します。

npm install -g create-react-app

これで、どのディレクトリからでもcreate-react-appコマンドを使えば、新しいReactプロジェクトを作成できるようになりました。

プロジェクトの作成と編集

Create React Appがインストールされたら、次に新しいReactプロジェクトを作成します。

ターミナルで次のコマンドを実行しましょう。

npx create-react-app my-app

my-appはお好きなアプリ名にしてください。

アプリケーションが作成されたら、そのディレクトリに移動して開発を始めます。

cd my-app
npm start

これで、ブラウザでlocalhost:3000にアクセスすれば、作成したReactアプリケーションを確認できます。

プロジェクトフォルダの説明

create-react-appで作成されたプロジェクトフォルダには、多くのファイルとディレクトリが含まれています。

  • node_modules/ : npmを通じてインストールされたすべてのパッケージが含まれるフォルダ
  • public/ : 静的なファイル（HTMLファイルや画像など）が含まれるフォルダ
  • src/ : Reactコンポーネントなど、アプリケーションのソースコードが含まれるフォルダ

gitで保存する際などは、.gitignoreにnode_modulesを含めるようにしましょう。

なぜならnode_modulesは容量が多く、package.jsonさえあればどこでも新たに作れるからです。

Reactの基本概念

さて、Reactの環境設定が完了したところで、Reactの基本概念について詳しく見ていきましょう。

この章では、JSX、コンポーネント、そしてstateとpropsといった重要な概念を解説します。

  • JSX
  • コンポーネント
  • StateとProps

JSX

Reactでは、JSX（JavaScript XML）と呼ばれる、HTMLに似た記述法を使用します。

これにより、JavaScript内にHTMLタグを直接記述することが可能となり、コードの見通しが良くなります。

HTMLと異なりJSXでは、属性を記述するときにキャメルケースを使用するなど、いくつか特有の記述ルールがあります。

HTMLとJavaScriptの組合わせ

JSXは、HTMLとJavaScriptを組み合わせて記述できる独自の記法です。

たとえば、JavaScriptの変数や関数を{}で括ってHTML内に埋め込みます。

function GreetingComponent() {
    const name = "John";
    return <h1>Hello, {name}!</h1>;  // JavaScript変数を{}で括ってHTML内に埋め込む
}

classNameの使い方

JSXではJavaScriptの予約語であるclassを避けるために、classNameという属性名を使用します。

function ClassComponent() {
    return <div className="exampleClass">Hello, World!</div>; // className属性を使用してCSSクラスを設定
}

CSSが反映されないなと思ったら、classのままだった、ということもよくあります。

{}で変数や数字、booleanを括る方法

JSX内でJavaScriptの変数や数値、真偽値を使用する場合、それらを{}で括ります。

function BooleanComponent() {
    const isReactAwesome = true;
    return <div>{isReactAwesome ? "React is awesome!" : "Well, not for everyone."}</div>; // 真偽値を{}で括る
}

リスト表示の方法

JavaScriptの配列をJSX内でリストとして表示する場合、配列のmapメソッドを使用します。

function ListComponent() {
    const items = ['Apple', 'Banana', 'Cherry'];
    return (
        <ul>
            {items.map((item, index) => <li key={index}>{item}</li>)} // 配列をリストとして表示
        </ul>
    );
}

コンポーネント

Reactのコアな概念の一つが「コンポーネント」です。

コンポーネントとは、独立した再利用可能な部品のことで、大きなアプリケーションはこれらのコンポーネントが組み合わさって構成されます。

コンポーネントは関数またはクラスとして定義され、それぞれが自身の表示内容（UI）と振る舞い（ロジック）を持ちます。

クラスコンポーネント例

import React from 'react';

class GreetingClassComponent extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

export default GreetingClassComponent;

関数コンポーネント例

import React from 'react';

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

export default GreetingFunctionComponent;

StateとProps

Reactのコンポーネントは、自身の内部状態（state）と、外部から受け取るデータ（props）を持てます。

これらの概念は、Reactの動的なUIを作るための重要な要素です。

state

コンポーネントが自身で管理し、変更できるデータ。stateの変更は、コンポーネントの再描画を引き起こします。

import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

Counterコンポーネントが自身のstateを管理しています。

props

コンポーネントが外部から受け取るデータ。

コンポーネント自身はpropsを変更することができませんが、親コンポーネントから子コンポーネントへデータを渡すのに使用します。

//子コンポーネント
import React from 'react';

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

export default Greeting;

Greetingコンポーネントが親コンポーネントからpropsを受け取り、それを表示しています。

//親コンポーネント
import React from 'react';
import Greeting from './Greeting';

function App() {
    return <Greeting name="John" />;
}

export default App;

親コンポーネントAppは、Greetingへ、name=”John”を渡しています。

コンポーネントの作成

Reactの基本概念を理解したところで、次に実際のコンポーネントの作成について学んでいきましょう。

FunctionalコンポーネントとClassコンポーネントの作り方、そしてコンポーネント間でデータを受け渡す方法についての解説です。

  • Functionalコンポーネント
  • Classコンポーネント
  • コンポーネント間のデータ受け渡し

Functionalコンポーネント

Functionalコンポーネントは、関数として定義されたシンプルなコンポーネントです。

stateやライフサイクルメソッドを必要としない単純なUIを持つコンポーネントを作る際に便利。

以下にFunctionalコンポーネントのサンプルコードを示します。

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

//アロー関数も使えます。
const Welcom = props => {
    return <h1>Hello, {props.name}</h1>
}

このコンポーネントはprops.nameを引数として受け取り、”Hello, {props.name}”というメッセージを表示します。

stateやライフサイクルメソッドを使うには、Hooksを利用しましょう。

【初心者向け】ReactのHooksについてわかりやすく解説

Classコンポーネント

Classコンポーネントは、ES6のクラス構文を使って定義されています。

stateやライフサイクルメソッドを持てるのが特徴です。

複雑なUIや状態を持つコンポーネントを作る際に使用されます。

以下にClassコンポーネントのサンプルコードを示します。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

このコンポーネントもprops.nameを引数として受け取り、”Hello, {props.name}”というメッセージを表示します。

コンポーネント間のデータ受け渡し

Reactでは、親コンポーネントから子コンポーネントへデータを渡せます。

これは、親コンポーネントから子コンポーネントへprops経由でデータを渡すことで実現するのです。

以下にその例を示します。

//親
function App() {
  const name = 'React';
  return <Welcome name={name} />;
}

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

この例では、`AppコンポーネントがWelcomeコンポーネントへデータ（’React’という文字列）を渡しています。

Welcomeコンポーネントでは、props.属性名で表示可能です。

Stateの管理とライフサイクル

こちらでは、ReactでのStateの管理とライフサイクルについて学んでいきます。

stateの定義と更新、そしてライフサイクルメソッドについて見ていきましょう。

  • Stateの定義と更新
  • ライフサイクルメソッド

Stateの定義と更新

ReactのClassコンポーネントでは、コンポーネントの内部状態を管理するためにstateを使用します。

stateはコンポーネントのコンストラクタ内で定義し、setStateメソッドを使って更新します。

以下がその例です。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};

    this.incrementCount = this.incrementCount.bind(this);
  }

  incrementCount() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.incrementCount}>
          Click me
        </button>
      </div>
    );
  }
}

このCounterコンポーネントは、内部のcountというstateを持ち、それをクリックするたびにひとつずつ増やします。

上記のクラスコンポーネントは、React Hooksを使えば関数コンポーネントでも実装できます。

詳しくはこちらをどうぞ。

【初心者向け】ReactのHooksについてわかりやすく解説

ライフサイクルメソッド

ライフサイクルメソッドは、ReactのClassコンポーネントが持つ特殊なメソッドで、特定のタイミングで実行されます。

最も一般的に使用されるライフサイクルメソッドは、componentDidMount（コンポーネントがDOMに初めて描画された後に実行される）とcomponentDidUpdate（コンポーネントが再描画された後に実行される）です。

これらのメソッドは、APIからデータをフェッチしたり、イベントリスナを設定したりするのによく使用されます。

メソッド名説明
constructorコンポーネントが作成されるときに最初に呼び出され、初期化を行います。
renderコンポーネントの描画を行うメソッドです。Reactの仮想DOMに対して描画する内容を返します。
componentDidMountコンポーネントが初めてDOMに描画された直後に呼び出されます。ここでAPIからのデータフェッチやDOMへのイベントリスナの設定など、主に副作用を伴う処理を行います。
componentDidUpdateコンポーネントが更新されて再描画された後に呼び出されます。ここでもAPIからのデータフェッチやDOMへのイベントリスナの更新など、主に副作用を伴う処理を行います。
componentWillUnmountコンポーネントがDOMから削除される直前に呼び出されます。ここで、componentDidMountやcomponentDidUpdateで設定したイベントリスナの解除など、クリーンアップ処理を行います。

さらなる学習トピック

Reactの概要を掴んだら以下のようなことを学ぶのがおすすめ。

  • ReduxとMobX: これらはReactのための状態管理ライブラリで、大規模なアプリケーションでのstateの管理を簡単にします。
  • React Router: SPA（Single Page Application）のルーティングを容易にするライブラリです。
  • Hooks: 関数コンポーネントでもstateやライフサイクルメソッドを利用できるようにするReactの新機能です。
  • Context API: 全体のアプリケーションで使用するデータを提供する方法です。
  • TypeScript: 型安全性を提供し、バグを減らし、コードを理解しやすくする静的型付け言語です。Reactと共に使用すると、さらに強力なアプリケーションを作成することができます。

React Router

ここでは、Reactアプリケーションでページ間のナビゲーションを実現する方法として「React Router」について解説します。

以下の2つの点について説明します。

  • React Routerの導入
  • ページ遷移の実装方法

React Routerの導入

React Routerは、React製のシングルページアプリケーション（SPA）でルーティングを行うためのライブラリです。

通常、ウェブサイトでリンクをクリックすると新しいページが読み込まれますが、React Routerを使用するとページ全体をリロードしません。

部分的に更新し、多くのページから構成されるアプリケーションを作成できます。

React Routerをプロジェクトに導入するには、npmを使用してインストールします。

npm install react-router-dom

ページ遷移の実装方法

React Routerを導入したら、ページ遷移の実装が可能になります。

具体的には、BrowserRouter、Route、Linkといったコンポーネントを使用してページ遷移を実現可能です。

以下は、基本的なページ遷移の例です。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

export default App;

ここで重要なのは、Routeコンポーネントのpathプロパティとcomponentプロパティ。

pathはURLのパスを指定し、componentはそのパスにマッチしたときに表示するコンポーネントを指定します。

また、Linkコンポーネントを使用すると、指定したパスに移動するリンクを作成できます。

【保存版】React Routerの基本やその使い方を完全解説

実践編：Todoアプリケーションを作ろう

ここでは、これまでに学んだReactの知識を活用して、Todoアプリケーションを作成する実践編を展開します。

以下の3つのステップについて説明します。

  • Todoクラスの作成
  • renderメソッドの定義
  • Todoの追加・削除メソッドの定義

Todoクラスの作成

まずは、Todo項目を表すTodoクラスを作成します。

このクラスはテキストと完了状態をプロパティとして持つものです。

class Todo {
  constructor(text, completed = false) {
    this.text = text;
    this.completed = completed;
  }
}

renderメソッドの定義

次に、Todoアイテムを描画するrenderメソッドを定義しましょう。

このメソッドでは、Todoアイテムのテキストと、その完了状態を表示します。

チェックボックスを使用して、完了状態をユーザが操作できるようにしてください。

class TodoItem extends React.Component {
  render() {
    const { todo } = this.props;

    return (
      <li>
        <input type="checkbox" checked={todo.completed} />
        {todo.text}
      </li>
    );
  }
}

Todoの追加・削除メソッドの定義

最後に、新しいTodoの追加と、既存のTodoを削除するメソッドを定義します。

以下にその実装例。

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      newTodoText: '',
    };
  }

  handleTextChange(e) {
    this.setState({ newTodoText: e.target.value });
  }

  handleAddClick() {
    const newTodo = new Todo(this.state.newTodoText);
    this.setState(state => ({
      todos: [...state.todos, newTodo],
      newTodoText: '',
    }));
  }

  handleDeleteClick(index) {
    this.setState(state => {
      const todos = state.todos.slice();
      todos.splice(index, 1);
      return { todos };
    });
  }

  render() {
    // TodoItemの表示と新しいTodoの入力フォームの表示など...
  }
}

まとめ

Reactは、そのコンポーネントベースの設計により、ウェブ開発を効率化することが可能です。

当記事では、以下をお伝えしました。

  • Reactの基本的な概念
  • 実際のアプリケーション開発に必要な知識
  • 実際のTodoアプリケーションの作成方法

この記事が、Reactを学ぶための一歩となり、あなたのウェブ開発スキルを次のレベルへと引き上げる助けとなることを願っています。

関連記事