Node.js と TypeScript の環境構築と“Hello, World!”の表示方法

JavaScript経験者で、TypeScriptをこれから学びたい方に向けて、Windows 11とmacOSでのNode.jsおよびTypeScriptのインストールから“Hello, World!”を表示する方法を解説します。プロジェクトの基本構成やtsconfig.jsonの役割も詳しく説明します。

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

Windows 11 の場合

Node.js公式サイトにアクセスします。
LTS（推奨版） をダウンロードしてインストールします。
インストール中、npmをインストールするオプションを有効にします。
コマンドプロンプト（cmd）またはPowerShellを開き、以下のコマンドでインストールを確認します。

node -v 
npm -v

Node.jsとnpmのバージョンが表示されれば成功です。

macOS の場合

Node.js公式サイトにアクセスし、LTS（推奨版） をダウンロードします。
インストーラを実行してインストールを完了します。
ターミナルを開き、以下を実行してバージョンを確認します

node -v
npm -v

2. TypeScript のインストール

Node.jsに付属しているnpmを使用して、TypeScriptをグローバルインストールします

npm install -g typescript

インストールが成功したら、以下でバージョンを確認します

tsc -v

3. プロジェクトの準備

新しいプロジェクトフォルダを作成します。

mkdir typescript-project 
cd typescript-project

プロジェクトの中に以下のフォルダを準備します

typescript-project/ 
├── src/ # TypeScriptファイルを配置するフォルダ 
├── dist/ # コンパイル後のJavaScriptを配置するフォルダ

4. tsconfig.json の作成

tsconfig.jsonは、TypeScriptプロジェクトのコンパイル設定を管理するファイルです。以下の手順で作成します。

プロジェクトのルートで、以下のコマンドを実行して初期化します。

tsc --init

作成されたtsconfig.jsonを編集し、次のように設定します

{
  "compilerOptions": {
    "outDir": "./dist",         // コンパイル後の出力先
    "target": "ES6",           // 出力するJavaScriptのバージョン
    "module": "CommonJS",      // モジュール形式（Node.jsで使用）
    "strict": true               // 厳密な型チェック
  },
  "include": ["src/**/*"],       // コンパイル対象のファイル
  "exclude": ["node_modules"]  // 除外するファイルやフォルダ
}

5. サンプルコードの作成

srcフォルダ内にindex.tsファイルを作成します。
以下のサンプルコードを記述します。

const greet = (name: string): string => {
    return `Hello, ${name}!`;
};

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

6. コンパイルと実行

TypeScript のコンパイル

プロジェクトのルートで、以下のコマンドを実行します：

tsc

dist/index.js というJavaScriptファイルが生成されます。

JavaScript の実行

Node.jsで生成されたJavaScriptを実行します。

node dist/index.js

以下の出力が表示されます。

Hello, World!

7. tsconfig.json の役割

tsconfig.jsonは、TypeScriptコンパイラの挙動を制御する設定ファイルです。主な役割は以下の通りです：

コンパイル対象のファイル指定：includeやexcludeで明示的に設定。
JavaScriptバージョン指定：targetで出力するJavaScriptのバージョンを設定。
型チェックの制御：strictを有効にすると、厳密な型チェックが行われます。
出力先指定：outDirで生成されたファイルの出力ディレクトリを指定。

典型的な構成例

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES6",
    "module": "CommonJS",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

8. 特定ファイルだけを手動でコンパイルする方法

特定のTypeScriptファイルだけをコンパイルする場合、tscに直接ファイル名を指定します：

tsc src/index.ts --outDir dist --target ES6

このコマンドでは、src/index.tsだけをコンパイルして、dist/index.jsに出力します。

まとめ

これで、Windows 11やmacOSでNode.jsとTypeScriptの環境を構築し、基本的なHello, World!プログラムを動かすことができるようになりました。TypeScriptの強力な型チェックとプロジェクト管理機能を活かして、より安全で効率的なJavaScript開発を始めてみましょう！