Node.js 22 LTS と npm10/Yarn4で始める React+TypeScript 開発環境構築ガイド

2026年6月24日

Contents

1 環境構築：Node.js と npm/Yarn のインストール、VSCode 設定
2 Vite で React + TypeScript プロジェクトを作成
- 2.1 Vite プロジェクトの作成コマンド
- 2.2 生成されるプロジェクト構造と主要ファイル
3 TypeScript で安全に書く React コンポーネント
4 ハンズオン：Todo アプリで学ぶデータ受渡しとリフトアップ
5 CI/CD 設定とエコシステム最新情報
- 5.1 GitHub Actions の CI ワークフロー（導入文）
- 5.2 Vercel / Netlify への自動デプロイ手順（導入文）
6 React 19 プレリリース情報と注意点（2026 年上期ベータ）
- 6.1 実務的なアドバイス
7 まとめ

スポンサードリンク

環境構築：Node.js と npm/Yarn のインストール、VSCode 設定

このセクションでは ローカル開発環境 を整えるために必要なツールと設定手順を解説します。
Node.js・npm（または Yarn）のバージョンは頻繁に更新されるため、実装時点で公式サイトの最新リリース情報をご確認ください。
正しいバージョンを導入すれば、セキュリティパッチや新機能が自動的に享受でき、React + TypeScript の開発がスムーズに進みます。

Node.js LTS とインストール手順

Node.js は Long‑Term Support (LTS) 版を使用するのがベストプラクティスです。2026 年 6 月現在、公式サイトで提供されている最新 LTS は Node 22.x（例: v22.4.1）ですが、リリース状況は随時変わりますので必ず https://nodejs.org/ja/ を確認してください。

# macOS (Homebrew) のインストール例
brew install node@22          # Homebrew が提供する最新の 22 系を取得

# Windows は公式インストーラか、nvm-windows 等で管理

# macOS (Homebrew) のインストール例

brew install node@22 # Homebrew が提供する最新の 22 系を取得

# Windows は公式インストーラか、nvm-windows 等で管理

インストール後はバージョンを確認し、期待通りに表示されることを確かめます。

node -v    # =&gt; v22.4.1（例）
npm  -v    # =&gt; 10.x.x （Node に同梱）

node -v # => v22.4.1（例）

npm -v # => 10.x.x （Node に同梱）

ポイント
* nvm（macOS / Linux）や nvm-windows を使うと、複数バージョンの切り替えが簡単です。

npm と Yarn の使い分けポイント

項目	npm (v10 系)	Yarn (v4 系)
デフォルトロックファイル	`package-lock.json`	`yarn.lock`
ワークスペースサポート	公式実装が安定（2025‑12 に大幅改善）	モノレポ向け機能が豊富、プラグイン多数
コマンド短縮形	`npm i`, `npm run`	`yarn add`, `yarn dev`
キャッシュ戦略	自動的に `node_modules/.cache` に保存	高速化のため独自キャッシュディレクトリを使用

小規模・シングルパッケージ のプロジェクトは npm が手軽です。
大規模モノレポやマイクロフロントエンド では Yarn のワークスペースが有利です。

VSCode 推奨拡張機能（2026 年版）

VSCode にインストールすべき拡張は、型安全の可視化・コード整形・開発効率向上 を目的に選定しました。TypeScript Hero はメンテナンスが停止しているため、代替として TypeScript Toolbox（または公式の TypeScript Language Features）を使用してください。

拡張機能	主な役割	設定例
ESLint	Lint によるリアルタイム警告	`"eslint.validate": ["javascript","typescript","tsx"]`
Prettier - Code formatter	保存時自動コード整形	`"editor.formatOnSave": true`
TypeScript Toolbox（代替）	インポート自動補完、未使用コード検出	`"typescript-toolbox.autoImport.enabled": true`
React Refactor	コンポーネント抽出・Props 型生成支援	デフォルト設定で可
GitLens (optional)	コミット履歴の可視化	-

VSCode 設定例 (`.vscode/settings.json`)

{
  &quot;editor.formatOnSave&quot;: true,
  &quot;eslint.validate&quot;: [&quot;javascript&quot;, &quot;typescript&quot;, &quot;tsx&quot;],
  &quot;prettier.requireConfig&quot;: true,
  &quot;typescript.tsdk&quot;: &quot;node_modules/typescript/lib&quot;,
  &quot;typescript-toolbox.autoImport.enabled&quot;: true
}

{

"editor.formatOnSave": true,

"eslint.validate": ["javascript", "typescript", "tsx"],

"prettier.requireConfig": true,

"typescript.tsdk": "node_modules/typescript/lib",

"typescript-toolbox.autoImport.enabled": true

}

注意
拡張機能は頻繁に更新されます。インストール後は Marketplace の「更新」ボタンで定期的にバージョンを確認しましょう。

Vite で React + TypeScript プロジェクトを作成

Vite は 高速起動・軽量設定 が特徴のビルドツールです。公式テンプレートからプロジェクトを生成すれば、数十秒で開発サーバーが立ち上がります。この章では手順と生成されるファイル構造を詳しく見ていきます。

Vite プロジェクトの作成コマンド

以下のコマンドは React 18 + TypeScript の雛形を生成します（2026 年 4 月時点で最新のテンプレート）。React 19 のベータ版を試す場合は --template react-ts@next を付与してください。
※ベータ版は API が変わる可能性があるため、公式ドキュメントとリリースノートを必ず確認しましょう。

# npm (推奨)
npm create vite@latest my-app -- --template react-ts

# Yarn で作成したい場合
yarn create vite my-app --template react-ts

# npm (推奨)

npm create vite@latest my-app -- --template react-ts

# Yarn で作成したい場合

yarn create vite my-app --template react-ts

続いて依存パッケージのインストールと開発サーバー起動を行います。

cd my-app
npm ci               # lockfile に基づく高速インストール
npm run dev          # http://localhost:5173 で確認

cd my-app

npm ci # lockfile に基づく高速インストール

npm run dev # http://localhost:5173 で確認

生成されるプロジェクト構造と主要ファイル

パス/ファイル	内容・役割
`src/main.tsx`	アプリのエントリーポイント。ReactDOM.createRoot が呼ばれます。
`src/App.tsx`	デモ用コンポーネント（カウンタやルーティングの雛形）。
`tsconfig.json`	TypeScript のコンパイル設定。`jsx: "react-jsx"` がデフォルトです。
`vite.config.ts`	Vite 本体とプラグイン（React Refresh 等）の設定ファイル。
`public/`	静的アセット（favicon、画像等）を配置するディレクトリ。

ポイント
Vite では npm run dev が HMR (Hot Module Replacement) を自動で有効化し、コード変更が即座にブラウザへ反映されます。

TypeScript で安全に書く React コンポーネント

この章では Props の型定義・フックの型付け に焦点を当て、実務で役立つベストプラクティスとサンプルコードを提示します。
React 19 がプレリリース段階にあることから、API が変更される可能性がある点は 公式ドキュメント を随時確認してください。

JSX と TSX の違い（導入文）

JSX は .jsx ファイルで使える JavaScript 拡張子です。型情報は付与されません。
TSX は TypeScript が JSX を解釈できる拡張子で、コンパイラが型チェックを行います。

実務では 必ず .tsx に統一 することで IDE の支援を最大限に活かせます。

Props の型定義：interface と type の使い分け

以下は Todo アイテムの Props を interface で定義した例です。type はユニオンや交差が必要なときに選択します。

// src/components/TodoItem.tsx
import React from &quot;react&quot;;

export interface TodoItemProps {
  id: number;
  title: string;
  completed?: boolean;          // 任意プロパティは ? で明示
  onToggle: (id: number) =&gt; void;
}

const TodoItem: React.FC&lt;TodoItemProps&gt; = ({
  id,
  title,
  completed = false,
  onToggle,
}) =&gt; (
  &lt;li&gt;
    &lt;label&gt;
      &lt;input
        type=&quot;checkbox&quot;
        checked={completed}
        onChange={() =&gt; onToggle(id)}
      /&gt;
      {title}
    &lt;/label&gt;
  &lt;/li&gt;
);

export default TodoItem;

// src/components/TodoItem.tsx

import React from "react";

export interface TodoItemProps {

id: number;

title: string;

completed?: boolean; // 任意プロパティは ? で明示

onToggle: (id: number) => void;

}

const TodoItem: React.FC<TodoItemProps> = ({

id,

title,

completed = false,

onToggle,

}) => (

<li>

<label>

<input

type="checkbox"

checked={completed}

onChange={() => onToggle(id)}

{title}

</label>

</li>

);

export default TodoItem;

interface は 拡張が容易（extends が使える）ため、コンポーネントの Props に推奨。
type は ユニオン型・交差型 を表現したいときに便利です。

フックの型付け例（導入文）

React の組み込みフック (useState, useEffect) と自作フックを ジェネリクスで明示的に型指定 すると、IDE が引数・返り値を正確に補完できます。

import { useState, useEffect, useCallback } from &quot;react&quot;;

/* useState の例 */
const [count, setCount] = useState&lt;number&gt;(0);

/* useEffect のクリーンアップ関数の型は自動推論されますが、明示すると可読性向上 */
useEffect(() =&gt; {
  const timer = setInterval(() =&gt; setCount(c =&gt; c + 1), 1000);
  return () =&gt; clearInterval(timer); // 推論結果: () =&gt; void
}, []);

/* カスタムフックの例：Todo データ取得・追加 */
export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

/**
 * useTodos は Todo 配列と「タスクを追加する」関数を返す。
 * 戻り値は [todos, addTodo] のタプルで、型注釈を付与している点に注意。
 */
export const useTodos = (): [
  Todo[],
  (newTodo: Omit&lt;Todo, &quot;id&quot;&gt;) =&gt; void
] =&gt; {
  const [todos, setTodos] = useState&lt;Todo[]&gt;([]);

  const addTodo = useCallback((newTodo: Omit&lt;Todo, &quot;id&quot;&gt;) =&gt; {
    setTodos(prev =&gt; [...prev, { id: Date.now(), ...newTodo }]);
  }, []);

  return [todos, addTodo];
};

import { useState, useEffect, useCallback } from "react";

/* useState の例 */

const [count, setCount] = useState<number>(0);

/* useEffect のクリーンアップ関数の型は自動推論されますが、明示すると可読性向上 */

useEffect(() => {

const timer = setInterval(() => setCount(c => c + 1), 1000);

return () => clearInterval(timer); // 推論結果: () => void

}, []);

/* カスタムフックの例：Todo データ取得・追加 */

export interface Todo {

id: number;

title: string;

completed: boolean;

}

/**

* useTodos は Todo 配列と「タスクを追加する」関数を返す。

* 戻り値は [todos, addTodo] のタプルで、型注釈を付与している点に注意。

export const useTodos = (): [

Todo[],

(newTodo: Omit<Todo, "id">) => void

] => {

const [todos, setTodos] = useState<Todo[]>([]);

const addTodo = useCallback((newTodo: Omit<Todo, "id">) => {

setTodos(prev => [...prev, { id: Date.now(), ...newTodo }]);

}, []);

return [todos, addTodo];

};

useState<T> のように ジェネリクスで型を固定 すると、setXxx が受け取れる引数が限定され、ランタイムエラーの可能性が減ります。
カスタムフックは 戻り値のタプルに明示的な型注釈 を付与し、呼び出し側での誤用を防ぎます。

ハンズオン：Todo アプリで学ぶデータ受渡しとリフトアップ

実装演習を通じて Props の伝搬・状態管理パターン を体感します。ここでは Vite で作った雛形に、先ほど定義したフックとコンポーネントを組み込みます。

コンポーネント構成図（導入文）

src/
├─ components/
│  ├─ TodoList.tsx   // 配列 → 子コンポーネントへマッピング
│  └─ TodoItem.tsx   // 個別タスク表示・完了切替
├─ hooks/
│  └─ useTodos.ts    // カスタムフック（前節参照）
├─ App.tsx           // 状態リフトアップと全体レイアウト
└─ main.tsx

src/

├─ components/

│ ├─ TodoList.tsx // 配列 → 子コンポーネントへマッピング

│ └─ TodoItem.tsx // 個別タスク表示・完了切替

├─ hooks/

│ └─ useTodos.ts // カスタムフック（前節参照）

├─ App.tsx // 状態リフトアップと全体レイアウト

└─ main.tsx

TodoList コンポーネント：Props の受け渡し

// src/components/TodoList.tsx
import React from &quot;react&quot;;
import TodoItem, { TodoItemProps } from &quot;./TodoItem&quot;;
import { Todo } from &quot;../hooks/useTodos&quot;;

interface TodoListProps {
  /** 表示対象の Todo 配列 */
  todos: Todo[];
  /** 子コンポーネントから呼び出される完了切替ハンドラ */
  onToggle: (id: number) =&gt; void;
}

const TodoList: React.FC&lt;TodoListProps&gt; = ({ todos, onToggle }) =&gt; (
  &lt;ul&gt;
    {todos.map(todo =&gt; (
      &lt;TodoItem
        key={todo.id}
        id={todo.id}
        title={todo.title}
        completed={todo.completed}
        onToggle={onToggle}   // 同一ハンドラを全子へ伝搬
      /&gt;
    ))}
  &lt;/ul&gt;
);

export default TodoList;

// src/components/TodoList.tsx

import React from "react";

import TodoItem, { TodoItemProps } from "./TodoItem";

import { Todo } from "../hooks/useTodos";

interface TodoListProps {

/** 表示対象の Todo 配列 */

todos: Todo[];

/** 子コンポーネントから呼び出される完了切替ハンドラ */

onToggle: (id: number) => void;

}

const TodoList: React.FC<TodoListProps> = ({ todos, onToggle }) => (

<ul>

{todos.map(todo => (

<TodoItem

key={todo.id}

id={todo.id}

title={todo.title}

completed={todo.completed}

onToggle={onToggle} // 同一ハンドラを全子へ伝搬

))}

</ul>

);

export default TodoList;

TodoItemProps は別ファイルで定義済みなので 型の重複がなく保守性が高い のがポイントです。

App コンポーネント：状態リフトアップと UI

// src/App.tsx
import React, { useState } from &quot;react&quot;;
import TodoList from &quot;./components/TodoList&quot;;
import { useTodos, Todo } from &quot;./hooks/useTodos&quot;;

const App: React.FC = () =&gt; {
  const [todos, addTodo] = useTodos(); // カスタムフックで状態管理

  /** 子から呼び出される完了切替ロジック */
  const handleToggle = (id: number) =&gt; {
    // setTodos は useState&lt;Todo[]&gt; の型に合わせて推論
    addTodo(prev =&gt;
      prev.map(t =&gt; (t.id === id ? { ...t, completed: !t.completed } : t))
    );
  };

  /** 新規タスク追加用 UI */
  const [newTitle, setNewTitle] = useState(&quot;&quot;);
  const handleAdd = () =&gt; {
    if (!newTitle.trim()) return;
    addTodo({ title: newTitle, completed: false });
    setNewTitle(&quot;&quot;);
  };

  return (
    &lt;div style={{ padding: &quot;2rem&quot; }}&gt;
      &lt;h1&gt;Todo アプリ（React + TypeScript）&lt;/h1&gt;
      &lt;input
        value={newTitle}
        onChange={e =&gt; setNewTitle(e.target.value)}
        placeholder=&quot;新しいタスク&quot;
      /&gt;
      &lt;button onClick={handleAdd}&gt;追加&lt;/button&gt;

      {/* TodoList に Props を渡す */}
      &lt;TodoList todos={todos} onToggle={handleToggle} /&gt;
    &lt;/div&gt;
  );
};

export default App;

// src/App.tsx

import React, { useState } from "react";

import TodoList from "./components/TodoList";

import { useTodos, Todo } from "./hooks/useTodos";

const App: React.FC = () => {

const [todos, addTodo] = useTodos(); // カスタムフックで状態管理

/** 子から呼び出される完了切替ロジック */

const handleToggle = (id: number) => {

// setTodos は useState<Todo[]> の型に合わせて推論

addTodo(prev =>

prev.map(t => (t.id === id ? { ...t, completed: !t.completed } : t))

);

};

/** 新規タスク追加用 UI */

const [newTitle, setNewTitle] = useState("");

const handleAdd = () => {

if (!newTitle.trim()) return;

addTodo({ title: newTitle, completed: false });

setNewTitle("");

};

return (

<h1>Todo アプリ（React + TypeScript）</h1>

<input

value={newTitle}

onChange={e => setNewTitle(e.target.value)}

placeholder="新しいタスク"

{/* TodoList に Props を渡す */}

</div>

);

};

export default App;

addTodo の戻り値は 関数型（(prev: Todo[]) => Todo[]）として利用でき、型安全に状態更新が行えます。
UI 部分は最小構成ですが、実務ではアクセシビリティ属性 (aria-label 等) を付与するとさらに品質が向上します。

CI/CD 設定とエコシステム最新情報

コードをリモートにプッシュしたら自動で テスト・ビルド・デプロイ が走るように設定します。GitHub Actions と Vercel（または Netlify）を組み合わせたパターンをご紹介します。

GitHub Actions の CI ワークフロー（導入文）

以下の ci.yml は Node 22.x 環境で依存解決・Lint ・テスト・ビルドを実行し、成果物をアーティファクトとして保存します。
React 19 のベータ版を使用したい場合は npm install react@next react-dom@next などの追加手順をコメントに入れてください。

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [&quot;22.x&quot;]

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: &quot;npm&quot;

      # 依存関係インストール（lockfile に忠実）
      - run: npm ci

      # Lint 実行
      - run: npm run lint

      # テスト実行（Jest, Vitest 等設定済み前提）
      - run: npm test -- --watch=false

      # ビルド（Vite）
      - run: npm run build

      # 成果物をアップロード（後続デプロイで利用可）
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: vite-build
          path: dist/

# .github/workflows/ci.yml

name: CI

on:

push:

branches: [main]

pull_request:

branches: [main]

jobs:

build-test:

runs-on: ubuntu-latest

strategy:

matrix:

node-version: ["22.x"]

steps:

- uses: actions/checkout@v4

- name: Setup Node.js

uses: actions/setup-node@v3

with:

node-version: ${{ matrix.node-version }}

cache: "npm"

# 依存関係インストール（lockfile に忠実）

- run: npm ci

# Lint 実行

- run: npm run lint

# テスト実行（Jest, Vitest 等設定済み前提）

- run: npm test -- --watch=false

# ビルド（Vite）

- run: npm run build

# 成果物をアップロード（後続デプロイで利用可）

- name: Upload build artifact

uses: actions/upload-artifact@v4

with:

name: vite-build

path: dist/

Vercel / Netlify への自動デプロイ手順（導入文）

GitHub リポジトリを作成し、先ほどのコードをプッシュ。
Vercel にサインアップ後「Import Project」→ GitHub を選択。
ビルドコマンド：npm run build
出力ディレクトリ：dist
Netlify でも同様に「New site from Git」を選び、ビルド設定を入力すれば自動デプロイ完了。

ポイント
Vercel はプレビュー環境（PR ごとに別 URL）を自動生成するため、コードレビュー時に UI を即確認できます。

React 19 プレリリース情報と注意点（2026 年上期ベータ）

React 19 は 2026 年上期にベータ版が公開されており、以下の新機能・変更点が注目されています。ただし API が流動的であるため、本番環境への採用は 慎重に検討 してください。

新機能／変更	内容	実装時の留意点
Concurrent Root API 拡張	`createRoot` がデフォルトで Concurrent Mode に移行	従来の同期レンダリングが暗黙的に変わるため、状態更新ロジックや副作用のテストを追加実施
useEvent Hook（実験）	イベントハンドラの再生成コスト削減	型は `(...args: any[]) => void` と推論されがち。ジェネリクスで `<T extends (...a:any)=>any>` を明示すると安全
Server Components (beta)	サーバー側だけで描画できるコンポーネント	Vite 側で `@vitejs/plugin-react-swc` の最新版が必要。SSR 設定を別途構築する必要あり
新しい JSX Transform	`react-jsxdev` がデフォルトに近い形で提供	TypeScript の `jsxImportSource` オプション更新が必要になる場合があります

実務的なアドバイス

ベータ版は開発ブランチで試す：メインブランチには React 18 LTS を残し、React 19 用の実験ブランチを作成。
公式リリースノートと RFC を毎週チェックし、破壊的変更が出たらコードベースにマイグレーションガイドを書き込む。
Vite 側のプラグインは 2026‑04 以降に更新された vite-plugin-react が React 19 に対応したか公式ドキュメントで確認。

結論：React 19 の新機能は魅力的ですが、安定性が保証されていない点を踏まえて「学習・検証」目的に留め、本番では React 18 LTS をベースに開発を進めるのが安全です。

まとめ

Node.js 22 LTS と npm 10/Yarn 4 を公式サイトで最新バージョンを確認しインストール。nvm 等でバージョン管理すると便利です。
VSCode の拡張は ESLint、Prettier、TypeScript Toolbox（代替）, React Refactor などを設定し、型エラーを即時に検知できる環境を構築。
npm create vite@latest my-app -- --template react-ts により React 18 + TypeScript の雛形が数十秒で完成。React 19 ベータ版は --template react-ts@next で試すことも可能ですが、公式ドキュメントの注意点を必ず確認してください。
.tsx ファイルで JSX と型安全性 を統合し、Props は interface、フックはジェネリクスで明示的に型付けすることで、開発時のミスが大幅に減ります。
Todo アプリ実装を通じて Props の伝搬・状態リフトアップ を体感し、React DevTools と Vite HMR でリアルタイムデバッグが可能です。
GitHub Actions + Vercel/Netlify による CI/CD パイプライン を構築すれば、コード品質の自動検証と即時デプロイが実現できます。
React 19 のベータ機能 はまだ不安定なので、本番環境では React 18 LTS を使用しつつ、公式リリース情報を継続的にウォッチしていくことが重要です。

この手順通りに進めれば、数時間以内に 型安全な React アプリ の開発基盤が完成します。次のステップは、作成したリポジトリを GitHub で公開し、コミュニティからフィードバックを得ながら機能拡張へ挑戦してみましょう。