Visual Studio CodeをTypeScriptプロジェクトに活用する方法

Visual Studio Codeは、その幅広い機能とオープンソースという性質を高く評価する多くのプログラマーに支持されている統合開発環境（IDE）です。Visual Studio Codeはコーディングを簡単、高速、スムーズなものにしてくれます。IDEがサポートする言語の1つであるTypeScriptに関しては特にその傾向が顕著です。

コード補完、パラメータヒント、シンタックスハイライトなどにより、Visual Studio CodeでTypeScriptを用いた開発の生産性が向上します。また、Node.jsデバッグ機能が組み込まれており、エディタからコードを実行可能なJavaScriptに変換する機能もあります。しかし、これらの機能のほとんどは、活用できるように設定する必要があります。

TypeScript向けにVisual Studio Codeを設定する方法

それでは、TypeScript用にVisual Studio Codeを設定する方法をご紹介します。TypeScriptでNode.jsプロジェクトを初期化し、コードを書き、TypeScriptのコンパイル、実行、デバッグを行います。

前提条件

説明を読み進める前に、以下を確認してください。

• Node.jsがローカルにインストールされ、設定されていること
• Visual Studio Codeがダウンロード、インストールされていること

TypeScriptプロジェクトをビルドするには、Node.jsとnpm（Nodeパッケージマネージャ）が必要です。Node.jsがPCにインストールされているかどうかは、以下のターミナルコマンドで確認できます。

node -v

このコマンドを実行すると、以下のようにPC上のNode.jsのバージョンが返されます。

v21.6.1

それでは、Visual Studio CodeでTypeScriptを使ってみましょう。

TypeScriptコンパイラをインストールする

Visual Studio CodeはTypeScriptの開発をサポートしているものの、TypeScriptコンパイラは含まれていません。TypeScriptコンパイラは、TypeScriptのコードをJavaScriptに変換（トランスパイル）するため、TypeScriptのコードをテストするために必要です。言い換えれば、入力としてTypeScriptコードを受け取り、出力としてJavaScriptコードを生成し、そのJavaScriptコードをNode.jsやウェブブラウザで実行することができます。

ターミナルで以下のコマンドを実行すると、TypeScriptコンパイラがコンピュータにグローバルでインストールされます。

npm install -g typescript

インストールしたTypeScriptコンパイラのバージョンを確認しましょう。

tsc --version

このコマンドでエラーが返されなければ、TypeScriptコンパイラが利用可能であることがわかります。これでTypeScriptプロジェクトのビルドに必要なものがすべて揃いました。

TypeScriptプロジェクトの作成

hello-worldというシンプルなNode.jsのTypeScriptプロジェクトを作成してみましょう。ターミナルを開き、プロジェクトのフォルダを作成します。

mkdir hello-world
cd hello-world

hello-worldの中で、以下のnpmコマンドでプロジェクトを初期化します。

npm init -y

これでNode.jsプロジェクトのpackage.json設定ファイルが作成されます。Visual Studio Codeでプロジェクトの構成を見てみましょう。

Visual Studio Codeを起動し「ファイル」＞「フォルダーを開く…」を選択します。

開いたウィンドウで「hello-world」プロジェクトフォルダを選択し、「フォルダーの選択」 をクリックします。プロジェクトがこのように表示されるはずです。

現在、プロジェクトはnpm initで初期化したためpackage.jsonファイルのみで構成されています。

Visual Studio Codeのメニューから「表示」＞「ターミナル」を選択し、エディタの統合ターミナルを開きます。そこで、以下のコマンドを実行してください。

npx tsc --init

これによりtsconfig.jsonという名前のTypeScript設定ファイルの初期化が行えます。

tsconfig.jsonファイルによって、TypeScriptコンパイラの動作をカスタマイズすることができます。具体的には、TypeScriptコンパイラにTypeScriptコードのトランスパイルについての指示を出します。tsconfig.jsonがないと、指定した通りにTypeScriptプロジェクトをコンパイルすることができません。

Visual Studio Codeでtsconfig.jsonを開くと、各設定が記述されていることがわかります。tsconfig.jsonファイルではこれらの項目を使って設定を行います。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./build"
  }
}

上記と同じコードになるように編集してください。生成するJavaScriptのソースマッピングを有効にし、出力ディレクトリを追加する必要があります。

    "sourceMap": true,
    "outDir": "./build"

tsconfig.jsonファイルにこれらの変更を加えてください。

ソースマッピングは、Visual Studio Codeコンパイラに必要になります。

outDir設定により、コンパイラがトランスパイルしたファイルの保存場所を定義しています。デフォルトでは、プロジェクトのルートフォルダです。コンパイルのたびにプロジェクトフォルダがビルドファイルでいっぱいになるのを避けるには、buildなどの別のフォルダを指定してください。

TypeScriptプロジェクトのコンパイルの準備がほぼ整いました。次にTypeScriptのコードを用意します。

「エクスプローラー」セクションを右クリックし「新規ファイル…」を選択します。index.tsと入力し、Enterキーを押します。するとプロジェクトにindex.tsというTypeScriptファイルが追加されます。

次のTypeScriptコードでを記述してみましょう。

const message: string = "Hello, World!"
console.log(message)

このコードにより「Hello, World!」というメッセージが表示されます。

インテリセンスによるコード補完

上の行をVisual Studio Codeで記述する際には、エディタによりコードが提案されます。これは、Visual Studio Codeの優れた機能の1つであるインテリセンスによるものです。

インテリセンスには、コード補完、ドキュメント情報、関数のパラメータ情報などの機能があります。インテリセンスでは、コードを入力する際に、どのようにコードを完成させるかを自動で提案してくれるため、生産性と正確性が大幅に向上します。実際の動作は以下の通りです。

Visual Studio Codeでは、TypeScriptプロジェクト用のインテリセンスがデフォルトでサポートされています。手動で後から設定する必要はありません。

Visual Studio CodeでTypeScriptを効率的に記述する便利な機能について理解したところで、実際にコンパイルが動作するか確認してみましょう。

Visual Studio CodeでTypeScriptをコンパイルする

Visual Studio Codeの統合ターミナルを開き、以下を実行してください。

tsc -p .

これにより、プロジェクト内のすべてのTypeScriptファイルがJavaScriptにトランスパイルされます。-p .がカレントディレクトリにあるtsconfig.jsonファイルを使用するようコンパイラに指示する役割を果たします。出力（この場合、index.jsとソースマップindex.js.map）は、./buildディレクトリに配置されます。

ターミナルで以下のコマンドを実行することで、トランスパイルしたJavaScriptコードが動作することを確認できます。

node ./build/index.js

Node.jsによりindex.jsが無事に解釈され、ターミナルには以下が出力されます。

Hello, World!

トランスパイラを起動する別の方法として、Visual Studio Codeメニューの「ターミナル」＞「タスクの実行」から「tsc: build – tsconfig.json」をクリックすることもできます。

この操作によりtsc -p .が実行され、エディタで直接コードのビルドを開始できます。

ここまでがVisual Studio CodeでTypeScriptプロジェクトをコンパイルする方法です。あとはコードを起動してデバッグする方法を見てみましょう。

Visual Studio CodeでTypeScriptを実行してデバッグする

Visual Studio Codeは、組み込みのNode.jsデバッガによりTypeScriptのデバッグをサポートしています。これを利用するにはセットアップを行う必要があります。サイドバーの「実行とデバッグ」アイコンをクリックし「launch.jsonファイルを作成します」をクリックし「Node.js」を選択します。

これにより、デフォルトの Node.js launch.jsonファイルが作成されます。Visual Studio Codeのアプリケーションの起動とデバッグにこの設定ファイルが使用されます。この設定ファイルが、アプリケーションの起動方法、使用するコマンドライン引数、および設定する環境変数を指定します。

「エクスプローラー」のセクションからわかるように、launch.jsonはプロジェクトの.vscodeフォルダに保存されています。

そのファイルを開き、以下のように編集してください。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "node_modules/**"
            ],
            "program": "${workspaceFolder}/index.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

program、preLaunchTask、outFilesの各オプションを調整してください。

• program：デバッグするアプリケーションのエントリーポイントへのパスを指定します。TypeScriptでは、アプリケーションの起動時に実行されるメインファイルが含まれている必要があります。
• preLaunchTask：アプリケーションを起動する前に実行するVisual Studio Codeのビルドタスクの名前を指定します。TypeScriptプロジェクトでは、ビルドタスクとなります。
• outFiles：ビルドプロセスによって生成されるトランスパイル後のJavaScriptファイルのパスを指定します。"sourceMap": trueにより生成されたソースマップファイルを使用して、TypeScriptソースコードと生成されたJavaScriptコードのマッピングが行われます。この仕組みによりTypeScriptのコードを直接デバッグできるようになります。

launch.jsonファイルを保存しindex.tsを開きます。console.log()の行の前の空白をクリックしてブレークポイントを設定します。すると以下のように、行の横に赤い点が表示されます。

コンパイラでコードを実行すると、実行は赤い点（ブレークポイント）で止まります。このブレークポイントのおかげで、Visual Studio CodeのNode.jsデバッガーが問題なく動作していることを確認できます。

「実行とデバッグ」セクションに再度移動し、緑色の再生ボタンをクリックしてデバッグを実行してみましょう。preLaunchTaskの実行を待ちます。コードがコンパイルされた後、プログラムが起動し、上で設定したブレークポイントでコードの実行が停止します。

上の画像の左側には、ブレーク時の変数の値が表示されています。また、Visual Studio Codeのデバッグドキュメントに記載されているように、一時停止、ステップオーバー、ステップイン/アウト、再開、停止を行うことができます。

F5キーを押して実行を再開すると、「デバッグ コンソール」タブに以下のようなメッセージが表示されるはずです。

Hello, World!

これが表示されていれば、プログラムが正しく実行されたことがわかります。

TypeScriptプログラミングのためにVisual Studio Codeをセットアップする方法をご紹介しました。解説をここで終えてもいいのですが、もう1つ重要なことがあります。TypeScriptで質の高いコードを書くために、Visual Studio Codeの拡張機能を利用することができます。これの設定方法もご紹介します。

Visual Studio CodeでESLintを設定する方法

Visual Studio Codeのコアを拡張するには拡張機能を使用します。これを組み合わせることで、コードエディタに好みの機能を追加することができます。

TypeScriptの開発を助ける、人気のVisual Studio Code拡張機能であるESLintを見てみましょう。

ESLintはJavaScriptとTypeScriptに対応した定番静的コード解析ツールで、コーディングエラーの特定と修正、コーディング標準への準拠に有用です。エディタ内でESLintを直接実行できます。

Visual Studio CodeにESLintを導入してみましょう。

まず、以下のターミナルコマンドでプロジェクトのESLintを初期化します。

npm init @eslint/config

これに際しESLintの設定ファイル生成に関わる質問が表示されます。次のように答えてください。

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSON

依存関係がチェックされ、不足するパッケージをインストールするかどうか尋ねられます。次のように答えてください。

√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm

この手順を進んでいくと、以下のコードを含む.eslintrc.jsonファイルが用意されます。

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

.eslintrc.jsonファイルには、ESLintが特定のコード、スタイル、品質基準を強制するために使用する設定が含まれます。Node.js TypeScriptプロジェクトの基本的な.eslintrc.jsonは以下のようになります。

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        // enable node support
        "node": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "tsconfig.json"
    },
    "rules": {
        // force the code to be indented with 2 spaces
        "indent": ["error", 2],
        // mark extra spaces as errors
        "no-multi-spaces": ["error"]
    }
}

それでは、Visual Studio CodeにESLint拡張機能をインストールしましょう。左メニューの「拡張機能」アイコンをクリックし、ESLintと入力します。ESLintを見つけ「インストール」をクリックします。

ESLintがTypeScriptファイルを保存するたびに自動的に検査を行うように、.vscode内に以下の内容のsettings.jsonファイルを作成します。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.validate": [
        "typescript"
      ],
      "eslint.codeActionsOnSave.rules": null
}

settings.jsonファイルには、Visual Studio Codeがエディタとその拡張機能の動作をカスタマイズするために使用する設定が含まれます。

Visual Studio Codeを再起動すると、拡張機能と設定の読み込みが行われます。

index.tsを開いてコードを編集すると、IDEでのエラー検知が機能します。コードスタイルのエラーについては、ファイルを保存するたびに、ESLintが自動で.eslintrc.jsonで定義されているようにコードを調整します。

これで、質の高いコードを効率よく作り上げていくことができます。あとは、Kinstaのような最新のクラウドホスティングサービスにNode.jsアプリケーションをデプロイするだけです。

まとめ

今回は、TypeScriptでNode.jsプロジェクトを作成し、それをVisual Studio Codeで開き、IDEを使用してインテリセンスを活用しながらコードを記述する方法をご紹介しました。また、TypeScriptコードのデバッグのためにTypeScriptコンパイラの設定を行い、ESLintの導入も実施しました。

ウェブアプリケーションの開発を次のレベルに引き上げるには、Kinstaのウェブアプリケーションホスティングとマネージドデータベースホスティングがおすすめです。Kinstaは、スピード、セキュリティ、およびスケーラビリティの面で徹底的に最適化されたソリューションを通じて、高性能アプリケーションの構築とデプロイを後押しします。