JavaScript の操作

このトピックでは、Visual Studio Codeでサポートされているいくつかの高度なJavaScript機能について説明します。TypeScript言語サービスを使用することで、VS CodeはJavaScript用の高度な補完（IntelliSense）や型チェックを提供できます。

IntelliSense

Visual Studio CodeのJavaScript IntelliSenseは、インテリジェントなコード補完、パラメーター情報、参照検索、その他多くの高度な言語機能を提供します。VS CodeのJavaScript IntelliSenseは、TypeScriptチームによって開発されたJavaScript言語サービスによって動作しています。IntelliSenseは、ほとんどのJavaScriptプロジェクトで設定なしでそのまま動作しますが、JSDocを使用するか、jsconfig.jsonプロジェクトを設定することで、IntelliSenseをさらに便利にすることができます。

型推論、JSDocアノテーション、TypeScript宣言、JavaScriptとTypeScriptプロジェクトの混在に基づくものなど、JavaScript IntelliSenseの仕組みの詳細については、JavaScript言語サービスのドキュメントを参照してください。

型推論で目的の情報が得られない場合は、JSDocアノテーションを使用して明示的に型情報を提供できます。このドキュメントでは、現在サポートされているJSDocアノテーションについて説明します。

オブジェクト、メソッド、プロパティに加えて、JavaScript IntelliSenseウィンドウはファイル内のシンボルの基本的な単語補完も提供します。

型定義と型の自動取得

JavaScriptライブラリやフレームワークのIntelliSenseは、TypeScriptの型宣言（型定義）ファイルによって動作しています。型宣言ファイルはTypeScriptで記述されているため、パラメーターや関数のデータ型を表現でき、VS Codeは高いパフォーマンスで豊富なIntelliSense体験を提供できます。

多くの人気のあるライブラリには型定義ファイルが同梱されているため、自動的にIntelliSenseが有効になります。型定義が含まれていないライブラリの場合、VS Codeの型の自動取得（Automatic Type Acquisition）が、コミュニティによって管理されている型定義ファイルを自動的にインストールします。

型の自動取得には、Node.jsランタイムに含まれているNode.jsパッケージマネージャーのnpmjsが必要です。この画像では、人気の高いlodashライブラリのメソッドシグネチャ、パラメーター情報、およびメソッドのドキュメントを含むIntelliSenseを確認できます。

lodash typings

型宣言ファイルは、プロジェクトのpackage.jsonに記載されているパッケージ、またはJavaScriptファイルにインポートしたパッケージについて、Visual Studio Codeによって自動的にダウンロードおよび管理されます。

{
  "dependencies": {
    "lodash": "^4.17.0"
  }
}

または、jsconfig.jsonで型宣言ファイルを取得するパッケージを明示的に指定することもできます。

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

ほとんどの一般的なJavaScriptライブラリは、宣言ファイルが同梱されているか、利用可能な型宣言ファイルが存在します。

「型の自動取得」におけるnpmがインストールされていないという警告の修正

型の自動取得は、Node.jsパッケージマネージャーであるnpmを使用して、型宣言（型定義）ファイルをインストールおよび管理します。型の自動取得が正しく機能するように、まずお使いのマシンにnpmがインストールされていることを確認してください。

ターミナルまたはコマンドプロンプトからnpm --versionを実行して、npmがインストールされて利用可能であることをすばやく確認します。

npmはNode.jsランタイムと一緒にインストールされます。ランタイムはNodejs.orgからダウンロードできます。現在のLTS（長期サポート）バージョンをインストールすると、npm実行ファイルがデフォルトでシステムパスに追加されます。

npmがインストールされているにもかかわらず警告メッセージが表示される場合は、js/ts.tsserver.npm.path設定を使用して、VS Codeにnpmがインストールされている場所を明示的に指定できます。これにはお使いのマシンのnpm実行ファイルのフルパスを設定する必要があり、ワークスペースでパッケージを管理するために使用しているnpmのバージョンと一致している必要はありません。js/ts.tsserver.npm.pathにはTypeScript 2.3.4以降が必要です。

たとえば、Windowsでは、settings.jsonファイルに以下のようなパスを追加します。

{
  "js/ts.tsserver.npm.path": "C:\\Program Files\\nodejs\\npm.cmd"
}

JavaScript プロジェクト (jsconfig.json)

ディレクトリ内にjsconfig.jsonファイルが存在することは、そのディレクトリがJavaScriptプロジェクトのルートであることを示します。jsconfig.jsonは、JavaScript言語サービスによって提供される言語機能のルートファイルとオプションを指定します。一般的なセットアップではjsconfig.jsonファイルは不要ですが、jsconfig.jsonを追加した方がよい状況もあります。

すべてのファイルがJavaScriptプロジェクトに含まれるべきではない場合（たとえば、一部のファイルをIntelliSenseの表示から除外したい場合）。この状況は、フロントエンドコードとバックエンドコードの混在でよく見られます。
ワークスペースに複数のプロジェクトコンテキストが含まれている場合。この状況では、各プロジェクトのルートフォルダにjsconfig.jsonファイルを追加する必要があります。
TypeScript コンパイラを使用して JavaScript ソースコードをダウンレベルコンパイルしている場合。

jsconfig.jsonの場所

コードをJavaScriptプロジェクトとして定義するには、以下に示すようにJavaScriptコードのルートにjsconfig.jsonを作成します。JavaScriptプロジェクトとはプロジェクトのソースファイルのことであり、派生ファイルやパッケージ化されたファイル（distディレクトリなど）を含めるべきではありません。

jsconfig setup

より複雑なプロジェクトでは、ワークスペース内に複数のjsconfig.jsonファイルが定義されている場合があります。これは、あるプロジェクトのソースコードが別のプロジェクトのIntelliSenseに表示されないようにするために行います。

以下に示すのは、clientフォルダとserverフォルダを持つプロジェクトで、2つの個別のJavaScriptプロジェクトを表しています。

multiple jsconfigs

jsconfig.jsonの記述

以下は、JavaScriptのtargetをES6に定義し、exclude属性でnode_modulesフォルダを除外する、jsconfig.jsonファイルのシンプルなテンプレートです。このコードをコピーしてjsconfig.jsonファイルに貼り付けることができます。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

exclude属性は、どのファイルがソースコードの一部でないかを言語サービスに伝えます。IntelliSenseの動作が遅い場合は、excludeリストにフォルダを追加してください（補完の遅延が検出されると、VS Codeがこれを実行するよう促します）。ビルドプロセスによって生成されたファイル（distディレクトリなど）はexcludeに指定することをお勧めします。これらのファイルが存在すると、候補が二重に表示され、IntelliSenseの速度が低下する原因になります。

include属性を使用して、プロジェクト内のファイルを明示的に設定できます。include属性が存在しない場合、デフォルトで格納ディレクトリとそのサブディレクトリ内のすべてのファイルが含まれます。include属性が指定されている場合、それらのファイルのみが含まれます。

以下は、明示的なinclude属性を使用した例です。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

最も推奨され、エラーが発生しにくい方法は、単一のsrcフォルダでinclude属性を使用することです。excludeおよびincludeのファイルパスは、jsconfig.jsonの場所からの相対パスであることに注意してください。

詳細については、完全なjsconfig.jsonドキュメントを参照してください。

TypeScriptへの移行

TypeScriptとJavaScriptが混在するプロジェクトを作成することも可能です。TypeScriptへの移行を開始するには、jsconfig.jsonファイルの名前をtsconfig.jsonに変更し、allowJsプロパティをtrueに設定します。詳細については、JavaScriptからの移行を参照してください。

注意： jsconfig.jsonは、allowJsがtrueに設定されている点を除き、tsconfig.jsonファイルと同じです。その他の利用可能なオプションについては、こちらのtsconfig.jsonのドキュメントを参照してください。

JavaScriptの型チェック

VS Codeでは、通常のJavaScriptファイルでTypeScriptの高度な型チェックやエラーレポート機能の一部を活用できます。これは、一般的なプログラミングの誤りを検出するのに優れた方法です。これらの型チェックにより、JavaScript用のいくつかの強力なクイック修正（欠落しているインポートの追加や欠落しているプロパティの追加など）も有効になります。

Using type checking and Quick Fixes in a JavaScript file

TypeScriptは、.tsファイルと同様に.jsファイル内の型を推論できます。型を推論できない場合は、JSDocコメントを使用して指定できます。TypeScriptがJavaScriptの型チェックにJSDocをどのように使用するかについての詳細は、JavaScriptファイルの型チェックを参照してください。

JavaScriptの型チェックはオプションであり、オプトイン（選択制）です。ESLintなどの既存のJavaScript検証ツールを、新しい組み込みの型チェック機能と併用できます。

ニーズに応じて、いくつかの異なる方法で型チェックを開始できます。

ファイル単位

JavaScriptファイルで型チェックを有効にする最も簡単な方法は、ファイルの先頭に// @ts-checkを追加することです。

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

数ファイルだけで型チェックを試したいが、コードベース全体ではまだ有効にしたくない場合、// @ts-checkを使用するのが適したアプローチです。

設定の使用

コードを変更せずにすべてのJavaScriptファイルに対して型チェックを有効にするには、ワークスペースまたはユーザー設定に"js/ts.implicitProjectConfig.checkJs": trueを追加するだけです。これにより、jsconfig.jsonまたはtsconfig.jsonプロジェクトに含まれていないすべてのJavaScriptファイルに対して型チェックが有効になります。

ファイルの先頭に// @ts-nocheckコメントを追加することで、個々のファイルを型チェックの対象外にすることができます。

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

エラーの前の行に// @ts-ignoreコメントを使用することで、JavaScriptファイル内の個々のエラーを無効にすることもできます。

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

jsconfigまたはtsconfigの使用

jsconfig.jsonまたはtsconfig.jsonに含まれているJavaScriptファイルの型チェックを有効にするには、プロジェクトのコンパイラオプションに"checkJs": trueを追加します。

jsconfig.json:

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

これにより、プロジェクト内のすべてのJavaScriptファイルの型チェックが有効になります。ファイル単位で型チェックを無効にするには、// @ts-nocheckを使用できます。

JavaScriptの型チェックにはTypeScript 2.3が必要です。現在ワークスペースで有効になっているTypeScriptのバージョンが不明な場合は、TypeScript: Select TypeScript Version（TypeScript: TypeScript バージョンの選択）コマンドを実行して確認してください。このコマンドを実行するには、エディターで.js/.tsファイルを開いている必要があります。TypeScriptファイルを開いている場合、バージョンは右下に表示されます。

グローバル変数と型チェック

グローバル変数や非標準のDOM APIを使用するレガシーなJavaScriptコードを扱っているとしましょう。

window.onload = function() {
  if (window.webkitNotifications.requestPermission() === CAN_NOTIFY) {
    window.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
  } else {
    alert('Could not notify');
  }
};

上記のコードで// @ts-checkを使用しようとすると、グローバル変数の使用に関するいくつかのエラーが表示されます。

2行目 - Property 'webkitNotifications' does not exist on type 'Window'.
2行目 - Cannot find name 'CAN_NOTIFY'.
3行目 - Property 'webkitNotifications' does not exist on type 'Window'.

// @ts-checkを使い続けたいが、これらがアプリケーションの実際の不具合ではないと確信している場合は、これらのグローバル変数についてTypeScriptに知らせる必要があります。

まず、プロジェクトのルートにjsconfig.jsonを作成します。

{
  "compilerOptions": {},
  "exclude": ["node_modules", "**/node_modules/*"]
}

その後、変更が適用されたことを確認するためにVS Codeを再読み込みします。jsconfig.jsonが存在することで、TypeScriptはJavaScriptファイルがより大きなプロジェクトの一部であることを認識します。

次に、ワークスペースのどこかにglobals.d.tsファイルを作成します。

interface Window {
  webkitNotifications: any;
}

declare var CAN_NOTIFY: number;

d.tsファイルは型宣言ファイルです。この場合、globals.d.tsは、グローバルなCAN_NOTIFYが存在すること、およびwindowにwebkitNotificationsプロパティが存在することをTypeScriptに知らせます。d.tsの記述方法に関する詳細については、TypeScriptドキュメントを参照してください。d.tsファイルはJavaScriptがどのように評価されるか（実行時の挙動）を変更するものではなく、より優れたJavaScript言語サポートを提供するためだけに使用されます。

タスクの使用

TypeScriptコンパイラの使用

TypeScriptの主な機能の1つは、最新のJavaScript言語機能を使用し、それらの新しい機能をまだ理解していないJavaScriptランタイムで実行できるコードを出力できることです。JavaScriptも同じ言語サービスを使用しているため、この同じ機能の恩恵を受けることができます。

TypeScriptコンパイラtscは、JavaScriptファイルをES6から別の言語レベルにダウンレベルコンパイルできます。目的のオプションでjsconfig.jsonを設定し、-p引数を使用してtscにjsconfig.jsonファイルを使用させます。たとえば、ダウンレベルコンパイルを行うにはtsc -p jsconfig.jsonを実行します。

ダウンレベルコンパイル用のコンパイラオプションの詳細については、jsconfigのドキュメントを参照してください。

Babelの実行

Babelトランスパイラは、ES6ファイルをソースマップ付きの読み取り可能なES5 JavaScriptに変換します。ワークスペースの.vscodeフォルダ配下にあるtasks.jsonファイルに以下の設定を追加することで、Babelをワークスペースに簡単に統合できます。group設定により、このタスクがデフォルトのTask: Run Build Task（タスク：ビルドタスクの実行）アクションになります。isBackgroundは、VS Codeにこのタスクをバックグラウンドで実行し続けるよう指示します。詳細については、タスクを参照してください。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch",
      "command": "${workspaceFolder}/node_modules/.bin/babel",
      "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
      "type": "shell",
      "group": { "kind": "build", "isDefault": true },
      "isBackground": true
    }
  ]
}

これを追加すると、⇧⌘B（Windows、LinuxはCtrl+Shift+B）（Run Build Task（ビルドタスクの実行））コマンドでBabelを開始でき、srcディレクトリ内のすべてのファイルがlibディレクトリにコンパイルされます。

ヒント： Babel CLIの詳細については、Babelの使用方法の手順を参照してください。上記の例ではCLIオプションを使用しています。

JavaScriptサポートの無効化

Flowなどの他のJavaScript言語ツールでサポートされているJavaScript言語機能を使用したい場合は、VS Codeの組み込みJavaScriptサポートを無効にすることができます。これを行うには、JavaScript言語サポートも提供している組み込みのTypeScript言語拡張機能であるTypeScript and JavaScript Language Features（vscode.typescript-language-features）を無効にします。

JavaScript/TypeScriptサポートを無効にするには、拡張機能ビュー（⇧⌘X（Windows、LinuxはCtrl+Shift+X））に移動し、組み込み拡張機能でフィルター（「...」の「More Actions（その他のアクション）」ドロップダウンにある「Show Built-in Extensions（組み込み拡張機能の表示）」）を適用し、'typescript' と入力します。TypeScript and JavaScript Language Features拡張機能を選択し、[無効にする]ボタンを押します。VS Codeの組み込み拡張機能はアンインストールできず、無効化のみが可能で、いつでも再有効化できます。

TypeScript and JavaScript Language Features extension

部分的IntelliSenseモード

VS Codeは、JavaScriptとTypeScriptに対してプロジェクト全体のIntelliSenseを提供しようとします。これにより、自動インポートや定義へ移動などの機能が可能になります。ただし、VS Codeが現在開いているファイルのみに制限され、JavaScriptまたはTypeScriptプロジェクトを構成する他のファイルを読み込めない場合があります。

これは、以下のような場合に発生する可能性があります。

vscode.devまたはgithub.devでJavaScriptまたはTypeScriptコードを扱っており、VS Codeがブラウザで実行されている場合。
仮想ファイルシステムからファイルを開く場合（GitHub Repositories拡張機能を使用している場合など）。
プロジェクトを現在読み込み中の場合。読み込みが完了すると、プロジェクト全体のIntelliSenseが提供され始めます。

これらの場合、VS Code'sのIntelliSenseは部分的モード（partial mode）で動作します。部分的モードは、開いているすべてのJavaScriptまたはTypeScriptファイルに対して最大限IntelliSenseを提供しようとしますが、制限があり、ファイル間をまたぐIntelliSense機能を提供することはできません。

どの機能が影響を受けますか？

以下は、部分的モードで無効になる、または機能がより制限される機能の一部（すべてではありません）のリストです。

開いているすべてのファイルが、単一のプロジェクトの一部として扱われます。
jsconfigまたはtsconfigの構成オプション（targetなど）は無視されます。
構文エラーのみが報告されます。セマンティック（意味的）エラー（未知のプロパティへのアクセスや、関数への誤った型の引き渡しなど）は報告されません。
セマンティックエラーに対するクイック修正は無効になります。
シンボルは現在のファイル内でのみ解決できます。他のファイルからインポートされたシンボルは、any型として扱われます。
定義へ移動やすべての参照の検索などのコマンドは、プロジェクト全体ではなく、開いているファイルに対してのみ機能します。これは、node_modulesの下にインストールしたパッケージのシンボルも解決されないことを意味します。
ワークスペースのシンボル検索には、現在開いているファイルからのシンボルのみが含まれます。
自動インポートは無効になります。
名前変更は無効になります。
多くのリファクタリングが無効になります。

vscode.devおよびgithub.devでは、さらにいくつかの機能が無効になります。

現在、型の自動取得はサポートされていません。

部分的モードであるかどうかの確認

現在のファイルがプロジェクト全体のIntelliSenseではなく部分的モードのIntelliSenseを使用しているかどうかを確認するには、ステータスバーにあるJavaScriptまたはTypeScriptの言語ステータス項目にホバーします。

Partial mode status item

現在のファイルが部分的モードである場合、ステータス項目にPartial mode（部分的モード）と表示されます。

5/28/2026