Reactをセットアップするための環境設定

はじめに

React（リアクト）は、Facebook（現Meta）が開発したJavaScriptライブラリで、主にWebアプリケーションの**ユーザーインターフェース（UI）**を構築するために使われます。プログラミング言語そのものではなく、JavaScriptの拡張ツールです。

Reactの特徴は、コンポーネント指向という考え方です。これは、画面の一部を独立した部品（コンポーネント）として定義し、それらを組み合わせてアプリを作る方法です。例えば、ボタンや記事リストなどをそれぞれ部品化して再利用できます。

また、仮想DOMという技術を使って、画面の描画処理を効率化し、表示の高速化を図っています。これにより、Reactは動的で複雑な画面も軽快に動作させることができます。

Reactは**SPA（シングルページアプリケーション）**と呼ばれる動的なWebサイトによく使われており、拡張版としてNext.jsなどのフレームワークも存在します。初心者でも使いやすく、学習する価値の高いツールです。

Node.js/npmのインストール

Reactアプリケーションを開発するためには、まずNode.jsとnpm（Node Package Manager）をインストールする必要があります。Node.jsはJavaScriptをサーバーサイドで実行できるランタイム環境であり、npmはJavaScriptのパッケージマネージャーです。React自体もnpmを通じてインストールされるため、この2つは必須のツールです。

Node.jsのインストール手順

1. 公式サイトからのダウンロード:
   Node.jsの公式サイト（https://nodejs.org/）にアクセスします。サイトには「LTS（Long Term Support）」版と「Current」版の2つのバージョンが表示されています。通常は安定版であるLTS版を選択することをおすすめします。
2. インストーラーの実行:
   ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。特に設定を変更する必要がなければ、デフォルトの設定で問題ありません。
3. インストールの確認:
   インストールが完了したら、コマンドプロンプト（Windows）またはターミナル（Mac/Linux）を開き、以下のコマンドを実行してバージョンを確認します。

node -v
npm -v

正しくインストールされていれば、それぞれのバージョン番号が表示されます。

npmの基本操作

npmはNode.jsと一緒にインストールされます。以下はnpmの基本的な使い方です。

1. パッケージのインストール:
   プロジェクトで必要なパッケージをインストールするには、以下のコマンドを使用します。

npm install <package-name>

例えば、Reactをインストールする場合は次のようになります。

npm install react

2. グローバルインストール:
   一部のツールはグローバルにインストールすることで、どのプロジェクトからも利用できるようになります。

npm install -g 

3. package.jsonの作成:
   新しいプロジェクトを始める際には、まずpackage.jsonファイルを作成します。このファイルにはプロジェクトの情報や依存関係が記述されます。

npm init

■ npm init で聞かれる主な項目

個人利用や勉強目的でサービスとして公開しないなら設問は適当でもOKです。

別のインストール方法として、対話形式でプロジェクトの情報を入力するか、-yオプションでデフォルト値を利用できます。

npm init -y

以下のコマンドを続けて実施します。

npm install react

コマンドを正しく実行すると以下のファイルが作成されます。

• node_modules
• package-lock.json
• package.json

ここまでできればOK！

代替ツール: Yarn

npmの代替としてFacebookが開発したYarnというパッケージマネージャーもあります。より高速で信頼性の高い依存関係の解決が特徴です。

npm install -g yarn

Yarnの基本的なコマンドはnpmと似ています。

yarn add <package-name>
yarn remove <package-name>

Reactのプロジェクトを作成

package.jsonがあるディレクトリで以下のコマンドを実行してプロジェクト（アプリ）ディレクトリを作成します。

npx create-react-app アプリ名

アプリ名のディレクトリが作成されます。

cdコマンドでアプリ名ディレクトリへ移動して以下のコマンドを実行します。

npm start

コマンドを実行するとターミナルで以下の表示になります。

Compiled successfully!

You can now view react-sample-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.111.3.72:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

この時点でlocalhost:3000へアクセスするとブラウザでReactの初期画面が表示されます。

以上で最初のセットアップは完了です。

初期セットアップ時の構成要素

React（Create React App など）で作成した直後の構成についてです。
主要なフォルダ・ファイルをそれぞれ簡潔に説明します。

■ ルート直下

● node_modules/

インストールされたパッケージ（ライブラリ群）が格納されるフォルダです。
npm や yarn で依存関係を管理しており、基本的に直接編集しません。

● public/

ブラウザにそのまま公開される静的ファイルを置くフォルダです。

• index.html
  Reactアプリの土台となるHTML。<div id="root"></div> にReactが描画されます。
• 画像やfaviconなどもここに置きます。

● src/

Reactアプリのメインとなるソースコードを置くフォルダです。
基本的に開発はここを中心に行います。

● .gitignore

Gitで管理しないファイルを指定する設定ファイルです。
例：node_modules や build ファイルなど。

● package.json

プロジェクトの設定ファイルです。
主に以下を管理します：

• 使用ライブラリ（dependencies）
• スクリプト（npm start / build など）
• バージョン情報

● package-lock.json

依存パッケージの正確なバージョンを固定するためのファイルです。
環境差異を防ぐ役割があります。

● README.md

プロジェクトの説明書です。
セットアップ方法や使い方が記載されます。

■ src フォルダ内

● App.js（メインコンポーネント）

アプリのメインコンポーネントです。画面のベース構造を定義します。Reactでは画面を小さな部品に分けて作る特徴があります。この部品を「コンポーネント」と呼びます。たとえば、ヘッダーやメニュー、商品一覧などを別々のファイルで作成し、それらを App.js に読み込んで表示します。つまり App.js は、さまざまな部品をまとめて1つの画面に組み立てる役割も持っています。

● App.css

Appコンポーネント用のスタイルファイルです。
CSSで見た目を定義します。

● App.test.js

Appコンポーネントのテストコードです。
Jestなどを使って動作確認を行います。

● index.js

アプリのエントリーポイント（最初に実行されるファイル）です。
ReactをHTMLにマウントします。

例：

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

● index.css

アプリ全体に適用される共通スタイルです。

● logo.svg

Reactのロゴ画像です。
初期画面で表示されるサンプル用。

● ProfileCard.jsx

ユーザーが追加したカスタムコンポーネントです。
.jsxはReactコンポーネント用の拡張子で、JSとほぼ同じですがJSXを書くことを明示します。

● reportWebVitals.js

パフォーマンス計測用のファイルです。
Web Vitals（表示速度など）を計測できますが、不要なら削除してもOKです。

● setupTests.js

テスト環境の初期設定ファイルです。
JestやTesting Libraryの設定をここで行います。

重要な役割

• public/ → 静的ファイル（HTMLなど）
• src/ → Reactコード本体
• index.js → アプリ起動ポイント
• App.js → メイン画面
• package.json → 設定・依存管理

React開発に役立つ拡張機能

VS Codeの強力な点はその拡張機能エコシステムです。React開発に特に有用な拡張機能を紹介します。

1. ES7 React/Redux/GraphQL/React-Native snippets:
   Reactコンポーネントのスニペットを提供します。rfcと入力すると関数コンポーネントのテンプレートが自動生成されます。
2. Prettier – Code formatter:
   コードを自動的にフォーマットしてくれます。一貫したコードスタイルを維持するのに役立ちます。
3. ESLint:
   コードの潜在的な問題を指摘してくれるリンターです。Reactのベストプラクティスに沿ったコーディングが可能になります。
4. JavaScript (ES6) code snippets:
   ES6の構文を簡単に入力できるようになります。
5. Bracket Pair Colorizer 2:
   対応する括弧に色を付けて見やすくします。ネストが深いコードでも視覚的に理解しやすくなります。

VS Codeの設定はsettings.jsonでカスタマイズできます。React開発におすすめの設定をいくつか紹介します。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "files.autoSave": "afterDelay",
  "workbench.colorTheme": "Default Dark+",
  "eslint.validate": ["javascript", "javascriptreact"],
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true
}

デバッグ設定

VS Codeには強力なデバッグツールが内蔵されています。Reactアプリケーションをデバッグするには、以下の設定を.vscode/launch.jsonに追加します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

統合ターミナルの活用

VS Codeには統合ターミナルが備わっており、エディター内でコマンドを実行できます。Ctrl+`（バッククォート）で表示/非表示を切り替えられます。