Reactの環境を構築する方法

概要

Reactの実装を始めるための環境を構築する方法は以下の二通りの方法があります。

  1. npxを使用する方法: これはローカル開発環境のセットアップ方法で、Create React Appを使用します。この方法は、開発者が複雑な設定やツールチェーンについて心配することなく、Reactアプリケーションの開発を開始できるようにするためのものです。

  2. CDNを利用する方法: これは簡単なデモや小さなプロジェクトを作成したい場合、またはローカル環境に何もインストールせずにReactを試したい場合に便利です。

ここでは、以下バージョンを使用した、Reactの環境を構築する方法を紹介します。 nodejsをインストールしていない場合は、こちらからインストールしてください。

nodejs v19.7.0

また、今回作成するコードは全て、GitHubに掲載しています。

npxを使用する方法 (ローカル開発環境)

まずは、ローカルにReactアプリケーションを作成する方法について説明します。この方法では、Reactの公式ツールであるCreate React Appを使用します。まず、Node.jsとnpmがインストールされていることを確認してください。

以下のコマンドを実行して新しいReactアプリケーションを作成します。

npx create-react-app npx

このコマンドを実行すると、npxというディレクトリが作成され、その中に新しいReactアプリケーションがセットアップされます。“npx"は任意の名前に置き換えることができます。

作成に成功すると以下ディレクトリ構造が作成されます。


npx
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    |── setupTests.js
    └── reportWebVitals.js

アプリケーションを起動するには以下のコマンドを実行します。

cd npx
npm start

これで、ブラウザで http://localhost:3000 を開いてみてください。Reactアプリケーションが表示されます。

src/App.jsを開き、以下のように変更してみましょう。

import React from 'react';

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

export default App;

ブラウザに “Hello, world!” と表示されていることを確認してください。

CDNを利用する方法

ローカルの開発環境をセットアップせずに、ブラウザだけでReactを試すことも可能です。以下に、CDNを利用してReactを使う例を示します。HTMLファイルを作成し、以下のようにコードを記述します。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <!-- ReactのライブラリをCDNから読み込む -->
    <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.26.0/babel.min.js"></script>
  </head>
  <body>
    <!-- Reactコンポーネントを描画するターゲットとなるdiv -->
    <div id="root"></div>
    <script type="text/babel">
      // Reactコンポーネントの定義
      function App() {
        return (
          <div>
            Hello, world!
          </div>
        );
      }
      
      // 上で定義したReactコンポーネントを#rootのdivに描画
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

このHTMLファイルをブラウザで開くと “Hello, world!” と表示されます。

この方法はReactの基本的な機能を試したり、小さなデモを作成したりするのに便利ですが、大規模なアプリケーション開発には向いていません。大規模なアプリケーション開発にはローカル開発環境のセットアップをお勧めします。

まとめ

このチュートリアルでは、Reactの初心者向けに2つの異なる方法でReact環境を構築する方法を学びました。

  1. npxを使用する方法: これはローカル開発環境のセットアップ方法で、Create React Appを使用します。この方法は、開発者が複雑な設定やツールチェーンについて心配することなく、Reactアプリケーションの開発を開始できるようにするためのものです。

  2. CDNを利用する方法: これは簡単なデモや小さなプロジェクトを作成したい場合、またはローカル環境に何もインストールせずにReactを試したい場合に便利です。

それぞれの方法には利点と制約があります。大規模なアプリケーションを開発する場合、またはプロジェクトに独自の設定やツールチェーンを導入する場合は、npx（またはyarn）を使用してローカル開発環境をセットアップすることをお勧めします。

一方、Reactの基本的な概念を学ぶためだけに、または小さなデモを作成したいだけの場合には、CDNを利用したブラウザベースの方法が便利です。ただし、これは大規模なアプリケーション開発や、本番環境での使用には適していません。

Reactの学習を続けるにつれて、どの方法が最もあなたのニーズに合っているかを判断することができるようになるでしょう。

← JavaScriptフレームワーク比較 (2023年版)
単純明快！3通りの方法で環境を構築してみよう！ →