【Visual Studio Code】VSCodeでTypeScript開発環境を構築する（初心者向け）

はじめに

TypeScriptは、JavaScriptに型安全性を加えた強力な言語です。最近ではReactやNode.jsなどの開発でも主流となりつつあります。

本ブログでは、初心者でも迷わずVSCodeでTypeScript開発環境を構築できるように、手順をおって紹介します。

TypeScriptとは？　なぜ使用するのか？

TypeScriptは、型定義やクラスベースの構文などを追加することで、保守性・可読性・安全性を向上させます。

例えば、以下のようなコードで型エラーを防ぐことが可能です。

function greet(name: string) {
  return `Hello, ${name}`;
}
greet(42); // エラー：number型はstring型に代入できません

開発環境の準備

VSCodeのインストール

VSCodeのインストールは、以下のブログを参考にして下さい。

VSCodeのインストール

Node.jsのインストール

TypeScriptはNode.js環境で動作します。Node.jsは下記の公式サイトからインストールしてください。

Node.jsの公式サイト

インストール後、ターミナルで以下を確認します。各バージョンが表示されれば正常です。

  • npm（エヌピーエム）コマンドは Node Package Manager の略で、Node.jsのためのパッケージ管理ツールです。
node -v   # Node.jsのバージョン確認
npm -v    # npmのバージョン確認

Node.js 環境とは

通常、JavaScriptはブラウザ上でしか動作しません（例：Chromeの開発者ツールなど）。しかし、Node.jsを使用する事で、JavaScriptをPC上で直接実行できるようになります。

PC上で実行する事により、以下が可能となります。

  • ブラウザでは制限されていた「ファイル操作」「ネットワーク通信」「プロセス管理」
  • サーバーアプリケーションやCLIツール（コマンドラインインタフェースで動作するツール）の開発
// ファイルを読み込む例（Node.js環境）
import { readFileSync } from 'fs';
const data = readFileSync('data.txt', 'utf-8');
console.log(data);

TypeScriptのインストール

本ブログでは、「TypeScript_prj」フォルダを作成し、プロジェクトにTypeScriptを適用させる方式で進めます。

以下のコマンドを実行し、TypeScriptをインストールします。

mkdir TypeScript_prj
cd TypeScript_prj
npm init -y
npm install --save-dev typescript
npx tsc --init
  • 補足：グローバル環境にTypeScriptを適用させる場合は以下のコマンドでインストールします。
npm install -g typescript

tsconfig.jsonの基本設定

tsconfig.jsonはTypeScriptコンパイラ（tsc）の動作を制御するための設定ファイルです。これにより、どのファイルをどう変換するか、どんな型チェックを行うか、成果物をどこに出力するかなどを一元管理できます。

  • 基本構成
    以下は「ESM対応」「型安全性」「ライブラリ公開」などを意識したTypeScript設計です。
{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",
    "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "esnext",
    "target": "esnext",
    "types": [],

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
  • パラメータの内容
パラメータ設定値目的・効果補足
rootDir“./src”ソースコードの起点ディレクトリ.ts ファイルはここに配置
outDir“./dist”コンパイル後の出力先.js, .d.ts, .map などが生成される
module“esnext”ESモジュール形式で出力import / export を保持
target“esnext”最新のJS構文で出力Node.js v20+ やモダンブラウザ向け
types[]グローバル型定義を読み込まない明示的な型管理を前提とした設計
sourceMaptrueソースマップを生成.ts と .js の対応が可能になる
declarationtrue.d.ts 型定義ファイルを生成ライブラリ公開や補完に有効
declarationMaptrue.d.ts.map を生成型安全性が向上するが記述は冗長に
noUncheckedIndexedAccesstrueインデックスアクセスに undefined を含めるnull を含めない厳密設計に
exactOptionalPropertyTypestrueオプショナルは undefined のみ許容null を含めない厳密設計に
stricttrue型チェックを一括強化noImplicitAny などが有効化される
jsx“react-jsx”React 17以降のJSX変換方式import React 不要で簡潔な構文に
verbatimModuleSyntaxtrueimport / export をそのまま出力バンドラーとの整合性が向上
isolatedModulestrue各ファイルを単体でコンパイル可能に暗黙的なモジュール化を防止
noUncheckedSideEffectImportstrue副作用のある import に警告安全性と可読性が向上
moduleDetection“force”明示的な import / export のみをモジュールと判定暗黙的なモジュール化を防止
skipLibChecktruenode_modules の型チェックをスキップビルド高速化に有効
forceConsistentCasingInFileNamestrueファイル名の大文字・小文字を厳密に扱うOS間の互換性を保つ（特にLinux）

パラメータの詳細については、以下のサイトを参照ください。

package.json の設定

  • 役割
    Node.js／JavaScriptプロジェクトの構成・依存関係・スクリプトを管理する中心ファイル。
{
  "devDependencies": {
    "typescript": "^5.9.2"
  },
  "name": "typescript_prj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

プロジェクトのディレクトリ構成を整える

tsconfig.json の基本設定が完了したら、TypeScriptプロジェクトとしての土台が整った状態です。ここからは、実際にコードを書いて、コンパイル・実行・開発環境を整えるステップに進みます。

・TypeScript_prj内をtsconfig.jsonに合わせて構成します。

TypeScript_prj/
├── src/                ← TypeScriptファイルを置く場所
│   └── index.ts       ← エントリーポイント
├── dist/               ← コンパイル後の出力先（tsconfigで指定済み）
├── tsconfig.json       ← コンパイラ設定ファイル
├── package.json        ← npm管理ファイル
├── package-lock.json   ← npmの依存パッケージと構成を記録する自動生成するファイル
├── .vscode/　　　　　　← （VSCode）でプロジェクトごとの開発環境設定を保存
├── node_modules/　　　 ← npmでインストールしたパッケージを保存

以上で、TypeScript環境の構築は完了です。

サンプルプログラムの動作確認

サンプルプログラムの作成・コンパイル・デバッグ

  • サンプルプログラムの作成
    index.ts をsrcディレクトの中に以下の内容で作成します。
// src/index.ts
const greet = (name: string): string => {
  return `こんにちは、${name}さん！`;
};

console.log(greet("太郎"));
  • コンパイル
    VSCodeのターミナルで以下のコマンドを実行。今回の設定では、src/ディレクト内の全ての.tsファイルがコンパイルされ、dist/ディレクトに出力されます。
npx tsc
  • コンパイルされた、index.js

launch.jsonの設定

  • 役割
    Visual Studio Codeで、デバッグの構成を設定するためのファイルで、どのファイルをどう実行するか、どの環境で動かすか、引数や環境変数などを定義します。
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/index.js",
      /* "preLaunchTask": "tsc: build - tsconfig.json",　←　自動コンパイルを
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　コメントアウト */
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}
  • launch.jsonの作成方法
    • ①デバッグアイコンをクリック
    • ②「launch.json ファイルを作成します。」をクリック
    • ③内容を入力。”program”パラメーターには今回デバッグする.jsの名称が入る。
  • デバッグ
    • ①index.js を開いて、ブレークポイントを設定
    • ②「デバッグ開始」をクリック
    • ブレークポイントでブレークし、デバッグ可能となる

「VSCodeでTypeScript開発環境を構築する」　まとめ

ここまで、VSCodeでTypeScriptを使用できる環境の設定方法を紹介してきました。

  • TypeScriptは、JavaScriptに型安全性を加えた強力な言語であること
  • TypeScriptは、Node.js環境で動作すること
  • TypeScriptのインストール方法と、プロジェクトの初期化
  • tsconfig.jsonの基本設定
  • .tsファイルのコンパイル
  • VSCodeにTypeScript環境を構築
  • コンパイルした.jsファイルをVSCodでデバッグ

超初心者の方は、インストールや設定ファイルが多くあり、苦労されたかもしれません。基本をしっかりと身に着けたあとは、ReactやVueと組み合わせたTypeScript開発に挑戦してみて下さい。

タイトルとURLをコピーしました