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

2025-08-06

はじめに

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のインストール手順

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

node -v
npm -v

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

npmの基本操作

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

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

npm install <package-name>

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

npm install react

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

npm install -g

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

npm init

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

npm init -y

トラブルシューティング

インストール時に問題が発生した場合、以下の点を確認してください。

管理者権限: グローバルインストール時には管理者権限が必要な場合があります。
ネットワーク環境: 企業のネットワークなどではプロキシ設定が必要な場合があります。
バージョン競合: 既に古いバージョンのNode.jsがインストールされている場合は、一度アンインストールしてから新しいバージョンをインストールしましょう。

代替ツール: Yarn

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

npm install -g yarn

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

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

VS Codeのセットアップ

Visual Studio Code（VS Code）はMicrosoftが開発した無料のコードエディターで、React開発に非常に適しています。豊富な拡張機能とデバッグツールが特徴です。

VS Codeのインストール

ダウンロード:
公式サイト（https://code.visualstudio.com/）からOSに合ったバージョンをダウンロードします。
インストール:
ダウンロードしたインストーラーを実行し、指示に従ってインストールします。特にこだわりがなければデフォルト設定で問題ありません。

React開発に役立つ拡張機能

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

ES7 React/Redux/GraphQL/React-Native snippets:
Reactコンポーネントのスニペットを提供します。rfcと入力すると関数コンポーネントのテンプレートが自動生成されます。
Prettier – Code formatter:
コードを自動的にフォーマットしてくれます。一貫したコードスタイルを維持するのに役立ちます。
ESLint:
コードの潜在的な問題を指摘してくれるリンターです。Reactのベストプラクティスに沿ったコーディングが可能になります。
JavaScript (ES6) code snippets:
ES6の構文を簡単に入力できるようになります。
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+`（バッククォート）で表示/非表示を切り替えられます。

同じカテゴリーの記事