VS CodeでTypeScript開発環境を整えよう

学習の目標

本章では、以下の内容を学習します。

TypeScript開発に役立つVS Code拡張機能を理解する
自動補完とエラー表示の動作を確認する
デバッグ環境の基本設定を学ぶ
ファイル保存時の自動コンパイル設定を習得する

TypeScript用の便利な拡張機能

VS Codeは、そのままでもTypeScript開発に対応していますが、拡張機能を追加することでさらに快適な開発環境を構築できます。

TypeScript開発で特に役立つ拡張機能をインストールしていきましょう。

基本的な拡張機能のインストール方法

VS Codeで拡張機能をインストールするには、サイドバーの拡張機能アイコンをクリックします。

左側のアクティビティバーにある四角が4つ組み合わさったようなアイコンが拡張機能の画面です。

拡張機能の画面が開いたら、検索ボックスに拡張機能の名前を入力して検索できます。

TypeScript関連の推奨拡張機能

以下の拡張機能をインストールすることをお勧めします。

Error Lens

TypeScriptのエラーメッセージをコードの横に直接表示してくれる拡張機能です。

拡張機能の検索ボックスに「Error Lens」と入力して検索し、「インストール」ボタンをクリックしてください。

この拡張機能により、エラーがある行で即座に問題の内容を確認できるようになります。

Prettier - Code formatter

コードの整形を自動で行ってくれる拡張機能です。

「Prettier」と検索してインストールしてください。

Prettierは、コードの見た目を統一し、読みやすくしてくれます。

Auto Rename Tag

HTMLやJSXのタグ名を変更した際に、対応する終了タグも自動で変更してくれる拡張機能です。

「Auto Rename Tag」と検索してインストールしてください。

後でReactを学習する際に特に役立ちます。

Bracket Pair Colorizer 2

対応する括弧を色分けして表示してくれる拡張機能です。

「Bracket Pair Colorizer 2」と検索してインストールしてください。

ネストが深いコードでも、どの括弧が対応しているかが一目で分かるようになります。

拡張機能の有効化確認

拡張機能をインストールした後は、VS Codeを再起動することをお勧めします。

再起動後、インストールした拡張機能が有効になっているかを確認しましょう。

拡張機能の画面で「インストール済み」のタブを選択すると、現在インストールされている拡張機能の一覧が表示されます。

各拡張機能の右下に「有効」と表示されていれば、正常に動作しています。

自動補完とエラー表示の確認

VS CodeとTypeScriptの連携がどのように動作するかを実際に確認してみましょう。

前章で作成したプロジェクトを使って、自動補完とエラー表示の機能を体験します。

自動補完機能の確認

VS Codeで前章のプロジェクトを開いてください。

「ファイル」メニューから「フォルダーを開く」を選択し、my-typescript-projectフォルダを開きます。

src/index.tsファイルを開いて、新しいコードを追加してみましょう。

// 既存のコード
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const userName: string = "TypeScript";
const message: string = greet(userName);
console.log(message);

// 新しく追加するコード
const numbers: number[] = [1, 2, 3, 4, 5];

// ここで自動補完を試してみる
numbers.

numbers.と入力した時点で、VS Codeが自動的に補完候補を表示します。

push、pop、length、forEachなど、配列で使用できるメソッドやプロパティが表示されるはずです。

この自動補完機能により、メソッド名を覚えていなくても適切なコードを書くことができます。

さらに、補完候補を選択すると、そのメソッドの詳細な説明も表示されます。

型情報の表示確認

変数や関数にマウスを置くと、型情報が表示されることも確認してみましょう。

userName変数にマウスカーソルを合わせてみてください。

以下のような情報が表示されるはずです。

(local var) userName: string

このように、変数の型情報を即座に確認できるため、コードの理解が深まります。

エラー表示の確認

次に、エラー表示の動作を確認してみましょう。

src/index.tsファイルに以下のコードを追加してください。

// エラーを発生させるコード
function addNumbers(a: number, b: number): number {
  return a + b;
}

// 型エラーが発生する例
const result: number = addNumbers("1", "2"); // 文字列を数値型の引数に渡している
console.log(result);

このコードを保存すると、VS Codeがすぐにエラーを検出して表示してくれます。

Error Lens拡張機能をインストールしている場合、エラーがある行の右側に赤いテキストでエラーメッセージが表示されます。

また、VS Code下部の「問題」タブをクリックすると、プロジェクト内のすべてのエラーが一覧で表示されます。

IntelliSenseの活用

VS CodeのIntelliSense機能は、コードを書きながらリアルタイムで支援してくれます。

以下のコードを追加して、この機能を体験してみましょう。

// オブジェクトの型定義
interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: "田中太郎",
  age: 30,
  // ここでeを入力してみる
  e
};

eと入力した時点で、VS Codeがemailプロパティを候補として表示してくれます。

Enterキーを押すか候補をクリックすることで、自動的にemail:が補完されます。

このように、オブジェクトのプロパティ名も型定義に基づいて自動補完されるため、タイプミスを防ぐことができます。

デバッグ環境の設定

VS Codeには強力なデバッグ機能が搭載されています。

TypeScriptのデバッグ環境を設定することで、コードの動作をより詳しく確認できるようになります。

launch.jsonファイルの作成

デバッグ設定を行うために、VS Codeのデバッグ設定ファイルを作成しましょう。

VS Codeのサイドバーから「実行とデバッグ」のアイコンをクリックします。

三角形のアイコンに虫のマークが付いたアイコンです。

「実行とデバッグ」の画面が開いたら、「launch.jsonファイルを作成します」をクリックしてください。

環境の選択画面が表示されたら、「Node.js」を選択します。

すると、プロジェクトの.vscodeフォルダ内にlaunch.jsonファイルが作成されます。

デバッグ設定の調整

作成されたlaunch.jsonファイルを以下の内容に変更してください。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "TypeScript Debug",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "typescript: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "console": "integratedTerminal"
    }
  ]
}

この設定により、TypeScriptファイルをコンパイルしてからデバッグが実行されるようになります。

ブレークポイントの設定

デバッグの基本的な使い方を確認してみましょう。

src/index.tsファイルを開いて、任意の行番号の左側をクリックしてください。

クリックした行に赤い丸（ブレークポイント）が表示されます。

ブレークポイントを設定した状態で、VS Codeの「実行とデバッグ」画面から「TypeScript Debug」を選択し、再生ボタンをクリックしてください。

プログラムがブレークポイントで一時停止し、変数の値や実行状況を詳しく確認できるようになります。

ファイル保存時の自動コンパイル設定

開発効率を向上させるために、ファイルを保存するたびに自動的にTypeScriptがコンパイルされるよう設定しましょう。

VS Code Tasks の設定

VS Codeのタスク機能を使って、自動コンパイルを設定します。

「表示」メニューから「コマンドパレット」を選択するか、Ctrl+Shift+P（MacではCmd+Shift+P）を押してコマンドパレットを開きます。

コマンドパレットに「Tasks: Configure Task」と入力して選択してください。

「テンプレートからtasks.jsonを作成」を選択し、「TypeScript - tsc: watch」を選択します。

すると、.vscodeフォルダ内にtasks.jsonファイルが作成されます。

自動コンパイルの実行

作成されたタスクを実行してみましょう。

再度コマンドパレットを開いて、「Tasks: Run Task」と入力して選択します。

タスクの一覧から「tsc: watch」を選択してください。

これで、TypeScriptファイルを変更して保存するたびに、自動的にコンパイルが実行されるようになります。

VS Code下部のターミナルに「Watching for file changes.」と表示されれば、監視モードが正常に動作しています。

設定の動作確認

自動コンパイルが正しく動作するかテストしてみましょう。

src/index.tsファイルに簡単な変更を加えて保存してください。

// テスト用のコメントを追加
console.log("自動コンパイルのテストです");

ファイルを保存すると、VS Code下部のターミナルに「File change detected. Starting incremental compilation...」のようなメッセージが表示され、自動的にコンパイルが実行されます。

distフォルダ内のindex.jsファイルも自動的に更新されているはずです。

ファイル保存時の自動整形設定

Prettier拡張機能を活用して、ファイル保存時に自動的にコードが整形されるよう設定しましょう。

VS Codeの設定を開くために、「ファイル」メニューから「基本設定」、「設定」を選択します。

設定画面の検索ボックスに「format on save」と入力してください。

「Editor: Format On Save」の項目が表示されるので、チェックボックスにチェックを入れてください。

この設定により、ファイルを保存するたびにPrettierが自動的にコードを整形してくれるようになります。

テストとして、わざと不適切なインデントでコードを書いて保存してみてください。

自動的に適切な形式に整形されることが確認できるはずです。

まとめ

本章では、VS CodeでのTypeScript開発環境を整える方法について学習しました。

習得できた内容は以下の通りです。

TypeScript開発に役立つVS Code拡張機能のインストール方法を理解しました
自動補完機能とIntelliSenseの活用方法を学びました
エラー表示機能によるリアルタイムな問題検出を体験しました
デバッグ環境の基本設定と使用方法を習得しました
ファイル保存時の自動コンパイル設定を理解しました
Prettierを使った自動コード整形の設定を学びました

これで、効率的なTypeScript開発環境が完成しました。

エディタとTypeScriptの連携により、コードの品質向上と開発効率の大幅な改善が期待できます。

次章からは、いよいよTypeScriptの型システムについて詳しく学んでいきましょう。

型注釈の基本的な書き方から始めて、TypeScriptの真価を実感できるようになります。