🚀 VS Code で で入手しましょう!

JavaScript の操作

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

IntelliSense

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

JavaScript IntelliSense がどのように動作するか、型推論、JSDoc アノテーション、TypeScript 宣言、および JavaScript と TypeScript プロジェクトの混在に基づく詳細については、JavaScript 言語サービスのドキュメント を参照してください。

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

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

型定義と自動型取得

JavaScript ライブラリとフレームワークの IntelliSense は、TypeScript 型宣言 (型定義) ファイルによって強化されています。型宣言ファイルは TypeScript で記述されており、パラメーターと関数のデータ型を表現できるため、VS Code は高性能な方法で豊富な IntelliSense エクスペリエンスを提供できます。

多くの一般的なライブラリには型定義ファイルが付属しているため、自動的に IntelliSense を取得できます。型定義を含まないライブラリの場合、VS Code の 自動型取得 は、コミュニティで管理されている型定義ファイルを自動的にインストールします。

自動型取得には、npmjs (Node.js パッケージマネージャー) が必要であり、これは Node.js ランタイムに含まれています。この画像では、一般的な 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 がインストールされているにもかかわらず警告メッセージが表示される場合は、typescript.npm 設定 を使用して、VS Code に npm がインストールされている場所を明示的に伝えることができます。これは、マシン上の npm 実行可能ファイルのフルパスに設定する必要があり、ワークスペースでパッケージを管理するために使用している npm のバージョンと一致する必要はありません。typescript.npm には TypeScript 2.3.4 以降が必要です。

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

{
  "typescript.npm": "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 の記述

以下は、jsconfig.json ファイルの簡単なテンプレートです。これは、JavaScript の target を ES6 に定義し、exclude 属性が node_modules フォルダーを除外します。このコードをコピーして 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 は tsconfig.json ファイルと同じですが、allowJs が true に設定されている点が異なります。利用可能なその他のオプションについては、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: 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 を使用しようとすると、グローバル変数の使用に関する多くのエラーが表示されます。

  1. 2 行目 - プロパティ 'webkitNotifications' は型 'Window' に存在しません。
  2. 2 行目 - 名前 'CAN_NOTIFY' が見つかりません。
  3. 3 行目 - プロパティ 'webkitNotifications' は型 '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 が存在し、webkitNotifications プロパティが window に存在することを TypeScript に知らせます。d.ts の記述の詳細については、TypeScript ドキュメント を参照してください。d.ts ファイルは JavaScript の評価方法を変更しません。JavaScript 言語サポートを向上させるためだけに使用されます。

タスクの使用

TypeScript コンパイラーの使用

TypeScript の重要な機能の 1 つは、最新の JavaScript 言語機能を使用し、それらの新しい機能をまだ理解していない JavaScript ランタイムで実行できるコードを出力できることです。JavaScript が同じ言語サービスを使用することで、この同じ機能を利用できるようになりました。

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

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

Babel の実行

Babel トランスパイラーは、ES6 ファイルをソースマップ付きの読みやすい ES5 JavaScript に変換します。ワークスペースの .vscode フォルダーにある tasks.json ファイルに以下の構成を追加することで、Babel をワークフローに簡単に統合できます。group 設定により、このタスクはデフォルトの タスク: ビルドタスクの実行 ジェスチャになります。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) (ビルドタスクの実行) コマンドで Babel を開始すると、src ディレクトリから lib ディレクトリにすべてのファイルがコンパイルされます。

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

JavaScript サポートの無効化

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

JavaScript/TypeScript サポートを無効にするには、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、組み込み拡張機能 (... その他のアクション ドロップダウンの 組み込み拡張機能を表示) でフィルター処理し、「typescript」と入力します。TypeScript および JavaScript 言語機能 拡張機能を選択し、無効にする ボタンを押します。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 の IntelliSense は 部分モード で動作します。部分モードは、開いている JavaScript または TypeScript ファイルに対して IntelliSense を提供するために最善を尽くしますが、制限されており、ファイル間の IntelliSense 機能を提供することはできません。

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

部分モードで無効になっているか、または機能が制限されている機能の不完全なリストを次に示します。

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

vscode.dev および github.dev では、いくつかの追加機能が無効になっています。

部分モードかどうかを確認する

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

Partial mode status item

現在のファイルが部分モードの場合、ステータス項目に 部分モード と表示されます。

04/03/2025