JavaScriptモダン開発環境セットアップガイド

1. Node.jsとnpmのインストール

Windows/macOS/Linux

1. Node.js公式サイトにアクセス
2. LTS（Long Term Support）バージョンをダウンロード（推奨）
3. インストーラーを実行し、指示に従ってインストール

インストールの確認

ターミナル（コマンドプロンプト）を開き、以下のコマンドを実行してインストールを確認します：

node -v  # Node.jsのバージョンを表示
npm -v   # npmのバージョンを表示

上記のコマンドでバージョン番号が表示されれば、インストールは成功しています。

2. プロジェクトの初期化

任意のディレクトリにプロジェクトフォルダを作成し、npm initコマンドでプロジェクトを初期化します。

# プロジェクトディレクトリを作成して移動
mkdir js-modern-tutorial
cd js-modern-tutorial

# プロジェクトの初期化（対話形式でpackage.jsonを作成）
npm init

# または、デフォルト設定で初期化する場合
npm init -y

npm initコマンドは対話形式でプロジェクト名やバージョンなどを尋ねてきますが、とりあえず学習用なのでnpm init -yで全てデフォルト値で進めても構いません。

初期化が完了すると、プロジェクトディレクトリにpackage.jsonファイルが作成されます。このファイルにはプロジェクトの基本情報、依存パッケージのリスト、実行スクリプトなどが記録されます。

3. 必要なパッケージのインストール

チュートリアルで使用する主要なパッケージをインストールします。

# 開発依存パッケージのインストール
npm install --save-dev vitest
npm install --save-dev typescript
npm install --save-dev ts-node
npm install --save-dev @types/node

インストールが完了すると、package.jsonのdevDependenciesセクションに追加されたパッケージが表示され、node_modulesディレクトリが作成されます。

4. サンプルコードの実行方法

JavaScriptファイルの実行

以下のようにexample.jsファイルを作成してみましょう：

// example.js
console.log("Hello, Modern JavaScript!");

// アロー関数のサンプル
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

このファイルをNode.jsで実行するには：

node example.js

対話型モード（REPL）の使用

Node.jsのREPL（Read-Eval-Print Loop）を使って対話形式でコードを試すこともできます：

node

REPLが起動したら、JavaScriptコードを直接入力して実行できます：

> const name = "JavaScript";
undefined
> console.log(`Hello, ${name}!`);
Hello, JavaScript!
undefined
> [1, 2, 3].map(x => x * 2)
[ 2, 4, 6 ]

終了するには .exit または Ctrl+C を2回押します。

5. ES Modulesの使用

モダンJavaScriptではES Modulesを使用してコードを分割します。以下のようにモジュールを作成して利用できます。

ES Modulesの有効化

まず、package.jsonファイルに"type": "module"を追加してES Modulesを有効にします：

{
  "name": "js-modern-tutorial",
  "version": "1.0.0",
  "type": "module",
  // 他の設定...
}

モジュールの作成と使用

次に、モジュールを作成します：

// math.js - モジュールファイル
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// デフォルトエクスポートの例
export default function subtract(a, b) {
  return a - b;
}

このモジュールを別のファイルからインポートして使用します：

// app.js - メインファイル
import subtract, { PI, add, multiply } from './math.js';

console.log(`円周率: ${PI}`);
console.log(`5 + 3 = ${add(5, 3)}`);
console.log(`4 * 6 = ${multiply(4, 6)}`);
console.log(`10 - 7 = ${subtract(10, 7)}`);

実行するには：

node app.js

6. TypeScriptの設定

TypeScriptを使用するための設定を行います。

tsconfig.jsonの作成

以下のコマンドでTypeScriptの設定ファイルtsconfig.jsonを生成します：

npx tsc --init

生成されたtsconfig.jsonを以下のように編集すると良いでしょう：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

TypeScriptファイルの作成と実行

TypeScriptファイルを作成してみましょう：

// src/example.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

// 配列操作の例
const numbers: number[] = [1, 2, 3, 4, 5];
const doubled: number[] = numbers.map((n: number) => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

TypeScriptファイルを直接実行するにはts-nodeを使います：

npx ts-node src/example.ts

コンパイルしてからJavaScriptとして実行する場合：

# TypeScriptをJavaScriptにコンパイル
npx tsc

# 生成されたJavaScriptを実行
node dist/example.js

7. Vitestによるテスト環境

Vitestを使ってテストを書き、実行する手順を説明します。

package.jsonにテストスクリプトを追加

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest"
  }
}

テスト対象のモジュールとテストファイルの作成

// src/utils.js または src/utils.ts (TypeScriptの場合)
export function sum(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// tests/utils.test.js または tests/utils.test.ts (TypeScriptの場合)
import { expect, test } from 'vitest';
import { sum, multiply } from '../src/utils';

test('sum関数は2つの数値を加算する', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
  expect(sum(0, 0)).toBe(0);
});

test('multiply関数は2つの数値を乗算する', () => {
  expect(multiply(2, 3)).toBe(6);
  expect(multiply(0, 5)).toBe(0);
  expect(multiply(-2, -3)).toBe(6);
});

テストの実行

# 一度だけテストを実行
npm test

# または、ファイル変更を監視して自動的にテストを再実行
npm run test:watch

8. 開発をサポートするツール

効率的な開発のためのツールとして、Visual Studio Codeの使用をお勧めします。

Visual Studio Code

Visual Studio Code（VS Code）は、Microsoft社が開発した無料の高機能コードエディタです。JavaScriptとTypeScript開発に特に最適化されており、以下の理由から強くお勧めします：

• IntelliSenseによる強力なコード補完
• 定義へのジャンプなどのコードナビゲーション機能
• 組み込みのターミナル
• Gitとの統合
• デバッグ機能
• 豊富な拡張機能

Visual Studio Codeの拡張機能

VS Codeの機能を拡張するために、以下の拡張機能をインストールすることをお勧めします：

• ESLint - コード品質チェック
• Prettier - コードフォーマッタ
• JavaScript (ES6) code snippets - コードスニペット
• Path Intellisense - ファイルパスの補完
• Error Lens - エラー・警告の強調表示
• Live Server - 静的ファイルをローカルサーバーで提供
• GitLens - Gitの機能強化
• Debugger for Chrome - ブラウザデバッグ連携

VS Codeの設定

VS Codeの設定をカスタマイズするには、Ctrl+,（macOSではCmd+,）を押すか、メニューから「File」→「Preferences」→「Settings」を選択します。以下の設定が便利です：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

これらの設定により、ファイル保存時に自動的にコードがフォーマットされ、ESLintの問題が修正されます。

9. トラブルシューティング

よくある問題とその解決策です。

「module not found」エラー

Error: Cannot find module 'xxx'

解決策：

• パッケージがインストールされているか確認 (npm list xxx)
• ローカルパスの場合、相対パスが正しいか確認（./または../から始まっているか）

ES Modulesでインポートエラー

SyntaxError: Cannot use import statement outside a module

解決策：

• package.jsonに"type": "module"を追加
• ファイル拡張子.mjsを使用する
• CommonJSのrequire()構文を使用する

TypeScriptのコンパイルエラー

error TS2307: Cannot find module 'xxx' or its corresponding type declarations.

解決策：

• 対応する型定義パッケージをインストール：npm install --save-dev @types/xxx
• tsconfig.jsonの設定を確認（特にmoduleResolutionとesModuleInterop）