ReactとNode.jsで始めるフロントエンド開発

（最終更新日：2023年8月）

✔当記事は以下のような方に向けて書かれています

「ReactとNode.jsの組み合わせとその機能について掘り下げたい」
「ReactとNode.jsの統合の仕方を知りたい」
「ReactとNode.jsを活用したプロジェクトの具体的な事例を探している」

✔当記事で得られる知識

ReactとNode.jsの基本的な知識
ReactとNode.jsの連携の仕方とその利点
ReactとNode.jsを用いた具体的なプロジェクト例

当記事では、ReactとNode.jsの基本的な概念はもちろん、その調和的な連携方法と具体的な事例を thorough に取り扱っています。

ぜひ最後までお読みいただき、ReactとNode.jsの可能性を最大限に引き出してみてください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

ReactとNode.jsの基本知識

こちらでは、「React」と「Node.js」の基本知識についてお伝えしていきます。

Reactとは？
簡単にイメージするNode.js
ReactとNode.jsを組み合わせる魔法

Reactとは何なのか？

Reactは、Meta社（旧Facebook）が開発したユーザインターフェースを作成するためのJavaScriptライブラリです。

Reactを使用すると、Webアプリケーションのビューレイヤーを効率的に構築・管理できます。

以下のようなサービスで、Reactが使われているのです。

Instagram
Airbnb

簡単にイメージするNode.js

Node.jsは、サーバーサイドでJavaScriptを実行するためのプラットフォームです。

Webサーバーをはじめ、バックエンドのAPI開発やツール作成に利用できます。

Node.jsを使用すると、非同期I/O処理による高性能なサービスを提供することが可能です。

ReactとNode.jsを組み合わせる魔法

ReactとNode.jsを組み合わせることで、全体の開発効率を向上させられます。

なぜならフロントエンドとバックエンドを、同じJavaScript言語で揃えられるから。

サーバーサイドレンダリングを利用することで、初期表示速度の改善やSEO対策にも役立ちます。

必要な開発環境のセットアップ

開発を始める前に、まずは必要な開発環境をセットアップしましょう。

以下の内容を順に進めていきます。

Node.jsのインストールと重要性
React始動：Create React Appの使い方
Reactアプリケーションをブラウザで閲覧

Node.jsのインストールと重要性

Node.jsはReactの実行環境となりますので、まずはこのインストールから始めましょう。

公式ウェブサイトから最新版をダウンロードし、インストールします。

インストールが完了したら、コマンドラインまたはターミナルを開いて以下のコマンドを実行。

バージョンが正しく表示されることを確認してください。

node -v

Node.jsの優位性は、その非同期I/O処理を可能にするエンジンにあります。

大量のリクエストを迅速に処理できるのです。

非同期I/O（入出力）処理とは、入出力操作をブロックせずにプログラムを進行させるプログラミング手法。非同期I/Oを使用することでプログラムは、I/O操作が完了するのを待たずにほかのタスクを処理できます。

React始動：Create React Appの使い方

Create React Appは、Reactの新しいプロジェクトを簡単に始められるツールです。

以下のコマンドを使用して新しいReactプロジェクトを作成します。

npx create-react-app my-app

このコマンドを実行すると、「my-app」という名前の新しいディレクトリが作成され、その中にReactアプリケーションの雛形が生成されます。

Reactアプリケーションをブラウザで閲覧

作成したReactアプリケーションをブラウザで表示させるためには、以下のコマンドを使用しましょう。

cd my-app
npm start

これらのコマンドを実行すると、ローカルホストの3000番ポートでアプリケーションが起動。

http://localhost:3000/

アプリケーションが閲覧できるので確認してみてください。

Node.jsを使わずにReactを試す

Node.jsの環境が整っていない場合でも、Reactを試すことは可能です。

簡易React：HTMLファイルでの試行
ブラウザでのReactアプリケーション表示

簡易React：HTMLファイルでの試行

HTMLファイル内で直接Reactを使えます。

以下はその基本的な例です。

<!DOCTYPE html>
<html>
  <head>
    <title>React Trial</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const element = <h1>Hello, world!</h1>;
      ReactDOM.render(element, document.getElementById('root'));
    </script>
  </body>
</html>

CDNを通じてReactとReactDOMを読み込み、Babelを用いてJSXをブラウザで直接変換しています。

ブラウザでのReactアプリケーション表示

HTMLファイルをブラウザで開くことで、Reactアプリケーションを表示できます。

先程のHTMLファイルを保存し、それをブラウザで開けば「Hello, world!」というメッセージが表示されるはずです。

Reactアプリケーションの作成と編集

次に、具体的なReactアプリケーションの作成と編集について説明します。

初めてのReactアプリケーション作成
コンポーネントの作成・編集方法
多彩なコンポーネントライブラリの紹介

初めてのReactアプリケーション作成

Reactでは、アプリケーションはひとつまたはそれ以上のコンポーネントから成り立っています。

以下は、非常にシンプルなReactコンポーネントの例です。

import React from 'react';

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

export default Welcome;

これは、”Hello, World!”というメッセージを表示するWelcomeという名前のコンポーネントを作成しています。

コンポーネントの作成・編集方法

コンポーネントは、UIの一部分をカプセル化し、独立して動作するための単位です。

新しいコンポーネントを作成するには、先ほどのWelcomeコンポーネントと同様に、React.Componentを拡張したクラスを作成しましょう。

また既存のコンポーネントを編集する場合は、そのクラスのrenderメソッドを編集してください。

以下は、Welcomeコンポーネントを編集して、名前を受け取り表示するようにした例です。

import React from 'react';

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

export default Welcome;

このコンポーネントは、nameプロパティを介して名前を受け取り、メッセージ内でその名前を表示します。

またReactでは、クラスではなく関数でもコンポーネントが書けます。

React Hooksについて詳しく知りたい方はこちら。

多彩なコンポーネントライブラリの紹介

Reactには、多彩なコンポーネントライブラリが存在します。

これらのライブラリを利用することで、カレンダーやフォーム、ボタンなどのUIコンポーネントを容易に追加できます。

代表的なライブラリは以下のとおり。

Material-UI
Ant Design
React Bootstrap

ReactとNode.jsの高度な利用

ReactとNode.jsを組み合わせて使うことで、より高度なWebアプリケーションを作成できます。

ユーザーのクリックイベント処理
フックによる状態管理の理解と使用
CMSとサーバーレンダリングの知識

ユーザーのクリックイベント処理

Reactでは、ユーザーのアクション（クリックイベント等）を処理することが可能です。

以下のコードは、ボタンのクリックイベントを処理する例です。

import React from 'react';

class Button extends React.Component {
  handleClick = () => {
    alert('Clicked!');
  };

  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

export default Button;

このコードでは、ボタンがクリックされた際にアラートが表示されるようになっています。

フックによる状態管理の理解と使用

Reactでは、「フック（Hooks）」と呼ばれる機能を使用してコンポーネントの状態を管理します。

以下のコードは、フックを使用してコンポーネントの状態を管理する基本的な例です。

import React, { 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;

このコードでは、useStateフックを使用してcount状態を管理し、ボタンがクリックされる度にその値を更新しています。