【TypeScript入門シリーズ】第2章：TypeScriptの開発環境を整える

第2章TypeScriptの開発環境を整える TypeScript
PR

TypeScriptを使って効率的に開発を行うためには、適切な開発環境を整えることが重要です。TypeScriptはJavaScriptにトランスパイルされて実行されるため、基本的なツールセットを整え、正しく設定する必要があります。この記事では、TypeScriptの開発環境の構築方法をステップバイステップで解説します。特に、Visual Studio CodeやTypeScriptコンパイラの設定について詳しく紹介します。

2.1 TypeScriptのインストール

まず、TypeScriptの開発を始めるためには、TypeScriptコンパイラ（tsc）をインストールする必要があります。TypeScriptはNode.jsのパッケージ管理ツールであるnpmを通じてインストールできます。

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

TypeScriptをインストールする前に、Node.jsがインストールされていることを確認しましょう。Node.jsにはnpmが含まれており、これを使ってTypeScriptをインストールします。

  1. Node.jsの公式サイト（https://nodejs.org/）にアクセスし、最新版のNode.jsをダウンロードします。
  2. インストール後、ターミナルやコマンドプロンプトを開き、次のコマンドを実行してNode.jsとnpmが正しくインストールされているか確認します。
    • node -v
    • npm -v
  3. これでNode.jsとnpmのバージョンが表示されれば、インストールが正常に完了しています。

2.1.2 TypeScriptのインストール

次に、npmを使ってTypeScriptコンパイラをインストールします。TypeScriptはグローバルにインストールすることをお勧めします。

  1. ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。
    • npm install -g typescript
  2. インストールが完了したら、次のコマンドでTypeScriptのバージョンを確認します。
    • tsc -v
  3. これでTypeScriptが正しくインストールされたか確認できます。

2.2 TypeScriptコンパイラ（tsc）の使い方

TypeScriptコンパイラ（tsc）は、TypeScriptファイルをJavaScriptに変換（トランスパイル）するために使用します。tscコマンドを使って、手動でTypeScriptコードをコンパイルすることができます。

2.2.1 TypeScriptファイルの作成

まず、簡単なTypeScriptファイルを作成し、コンパイルしてみましょう。

  1. 任意のディレクトリに移動し、次のコマンドで新しいTypeScriptファイルを作成します。
    • echo "let message: string = 'Hello, TypeScript!'; console.log(message);" > hello.ts
  2. 次に、tscコマンドを使ってこのファイルをJavaScriptにコンパイルします。
    • tsc hello.ts
  3. コンパイルが完了すると、同じディレクトリにhello.jsファイルが生成されます。これがJavaScriptに変換されたファイルです。
    • var message = 'Hello, TypeScript!'; console.log(message);
  4. 最後に、このJavaScriptファイルを実行します。
    • node hello.js
    • これで、コンソールに「Hello, TypeScript!」と表示されれば成功です。

2.2.2 コンパイルオプション

tscコマンドには、いくつかの便利なオプションがあります。特に、TypeScriptをコンパイルする際に特定の設定を適用することができます。

  • --watch オプション：ファイルが変更されるたびに自動的に再コンパイルします。
    • tsc hello.ts --watch
  • --outDir オプション：出力ファイルを指定のディレクトリに保存します。
    • tsc hello.ts --outDir ./dist
  • これにより、コンパイルされたファイルがdistフォルダ内に保存されます。

2.3 tsconfig.jsonの設定

TypeScriptプロジェクトを本格的に始める際には、tsconfig.json という設定ファイルを作成するのが一般的です。このファイルには、TypeScriptコンパイラに関する設定がまとめて記述されています。

2.3.1 tsconfig.jsonの生成

tsconfig.json ファイルは、以下のコマンドを実行することで自動的に生成できます。

tsc --init

このコマンドを実行すると、現在のディレクトリに tsconfig.json というファイルが作成されます。このファイルには、TypeScriptプロジェクト全体に適用するコンパイルオプションが定義されています。

2.3.2 tsconfig.jsonの基本設定

tsconfig.jsonには多くの設定項目がありますが、基本的な設定としてよく使われるオプションをいくつか見ていきます。

{
  "compilerOptions": {
    "target": "ES6",             // 出力するJavaScriptのバージョン（ES5, ES6など）
    "module": "commonjs",        // モジュールシステム（Node.jsの場合はcommonjs）
    "strict": true,              // 型チェックを厳密に行う
    "esModuleInterop": true,     // ESモジュールとの互換性を提供
    "outDir": "./dist",          // 出力するファイルのディレクトリ
    "rootDir": "./src",          // ソースファイルのルートディレクトリ
    "forceConsistentCasingInFileNames": true  // 大文字・小文字の不一致をエラーにする
  },
  "include": ["src/**/*.ts"],    // コンパイル対象のファイル
  "exclude": ["node_modules"]    // 除外するファイルやフォルダ
}
  • target：TypeScriptをどのバージョンのJavaScriptに変換するかを指定します。ES6を指定すると、ES6の構文が使用可能になります。
  • module：モジュールシステムを指定します。Node.js環境ではcommonjsが一般的です。
  • strict：型チェックを厳密に行うモードを有効にします。これにより、型安全性が高まり、バグの発生が減少します。
  • outDir：コンパイル後のJavaScriptファイルが保存されるディレクトリを指定します。
  • rootDir：TypeScriptソースファイルのルートディレクトリを指定します。
  • include と exclude：コンパイルの対象となるファイルやフォルダを指定します。includeではコンパイル対象を、excludeではコンパイルから除外するものを設定します。

2.3.3 プロジェクトディレクトリの構成

TypeScriptのプロジェクト構成は、規模に応じてさまざまですが、基本的なディレクトリ構造は次のように整理するのがおすすめです。

my-project/
├── src/                 # TypeScriptソースファイル
│   └── index.ts
├── dist/                # コンパイル後のJavaScriptファイル
├── node_modules/        # npmパッケージ
├── tsconfig.json        # TypeScriptの設定ファイル
└── package.json         # プロジェクトの依存関係

このように整理することで、ソースファイルとコンパイル後のファイルを分離し、プロジェクトの管理がしやすくなります。

2.4 Visual Studio Codeでの開発環境構築

TypeScriptの開発を効率化するためには、優れたエディタが必要です。Visual Studio Code（VSCode）は、TypeScriptとの相性が非常に良く、インテリセンス（コード補完機能）やデバッグ機能が充実しています。ここでは、Visual Studio Codeを使ったTypeScriptの開発環境構築について説明します。

2.4.1 Visual Studio Codeのインストール

まず、Visual Studio Codeをインストールします。公式サイト（https://code.visualstudio.com/）から最新版をダウンロードし、インストールを行います。

2.4.2 TypeScriptプラグインのインストール

Visual Studio CodeにはTypeScriptサポートが標準で含まれていますが、さらに利便性を高めるために、次のプラグインをインストールしておくと良いでしょう。

  • TSLint：TypeScriptコードの静的解析を行うツール
  • Prettier – Code formatter：コードフォーマットを自動的に行うツール

これらのプラグインは、VSCodeの「拡張機能」タブから簡単にインストールできます。

2.4.3 エディタの設定

TypeScriptのコード補完や型チェックを効率化するために、いくつかの設定を確認します。settings.json で次のような設定を行います。

{
  "editor.formatOnSave": true,   // ファイル保存時に自動でフォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true        // 保存時に自動で全ての警告を修正
  }
}

これで、TypeScript開発時にコードが自動的にフォーマットされ、警告やエラーが自動的に修正されるようになります。

まとめ

この章では、TypeScriptの開発環境を整えるための手順について詳しく解説しました。TypeScriptをインストールし、tscを使ってコンパイルを行う方法、そしてtsconfig.jsonを利用したプロジェクト設定や、Visual Studio Codeを使った効率的な開発環境構築を学びました。

次章では、TypeScriptの基本的な型と型注釈について解説していきます。型注釈を理解することで、TypeScriptの最大の利点である型安全性をより活用できるようになります。