クイック スタート: JavaScript のVisual Studio IDEを調べる

このクイック スタートでは、Visual Studio統合開発環境 (IDE) について説明します。 この記事では、JavaScript 開発に使用できるウィンドウ、メニュー、その他の機能を理解するのに役立つ 5 分から 10 分の概要について説明します。

Visual Studioがない場合は、Visual Studioダウンロード ページから 無料試用版をインストールできます。

スタート ウィンドウを使用する

Visual Studioを起動した後に最初に表示されるのが、スタート ウィンドウです。 スタート ウィンドウは、"コードの取得" を迅速に行うのに役立ちます。 コードを複製またはチェックアウトしたり、既存のプロジェクトまたはソリューションを開いたり、新しいプロジェクトを作成したり、コード ファイルを含むフォルダーを開いたりするオプションがあります。

Visual Studioで既に作業している場合は、File>Start Window を選択して、スタート ウィンドウを開くことができます。

Visual Studioが開いたときのスタート ウィンドウのスクリーンショット.

Visual Studio 2022 を開いたときの [スタート] ウィンドウのスクリーンショット。

Visual Studioを初めて使用する場合は、最近使用したプロジェクトの一覧が空である可能性があります。

MSBuild ベース以外のコードベースを使用する場合は、フォルダーを開く オプションを使用してVisual Studioでコードを開きます。 詳細については、「プロジェクトやソリューションをせずに Visual Studio でコードを開発する」を参照してください。 それ以外の場合は、新しいプロジェクトを作成したり、GitHub や Azure DevOps などのソース プロバイダーからプロジェクトを複製したりすることができます。

MSBuild ベース以外のコードベースを使用する場合は、[ ローカル フォルダーを開く ] オプションを使用して Visual Studio でコードを開きます。 詳細については、「プロジェクトやソリューションをせずに Visual Studio でコードを開発する」を参照してください。 それ以外の場合は、新しいプロジェクトを作成したり、GitHub や Azure DevOps などのソース プロバイダーからプロジェクトを複製したりすることができます。

Visual Studioを起動すると、スタート ウィンドウに Continue without code オプションが含まれます。 このアクションにより、特定のプロジェクトやコードを読み込まずにVisual Studio開発環境を開くことができます。 このオプションを使用して 、Live Share セッションに参加したり、デバッグ用のプロセスにアタッチしたりできます。 Esc キーを押してスタート ウィンドウを閉じ、IDE を開くこともできます。

プロジェクトを作成する

Visual Studioの機能を引き続き探索するには、新しいプロジェクトを作成します。 Visual Studio には、コーディングをすぐに開始するのに役立つさまざまな種類のプロジェクト テンプレートが用意されています。

  1. スタート ウィンドウで、[ 新しいプロジェクトの作成] を選択します。 ウィンドウが更新され、新しいプロジェクトを作成するためのオプションが表示されます。

  2. [ テンプレートの検索 ] ボックスに「 javascript 」または 「typescript」と入力します。

    入力テキストでは、プロジェクトの種類の一覧がフィルター処理され、名前または言語の種類に "JavaScript" または "TypeScript" が含まれるテンプレートが表示されます。

    Visual Studioスタート ウィンドウで [テンプレートの検索] フィルターを使用して JavaScript テンプレートを検索する方法を示すスクリーンショット。

    Visual Studio 2022 の [スタート] ウィンドウで [テンプレートの検索] フィルターを使用して JavaScript テンプレートを見つける方法を示すスクリーンショット。

  3. JavaScript Express Application プロジェクト テンプレートを選択し、[次へ] を選択します。

  4. [ 新しいプロジェクトの構成] ウィンドウで、既定のプロジェクト名をそのまま使用し、[ 作成] を選択します。

Visual Studioプロジェクトを作成し、IDE で開きます。 プロジェクトのファイルとフォルダーは、ソリューション エクスプローラーに表示されます。

ソリューション エクスプローラーでプロジェクトを参照する

通常、ソリューション エクスプローラー ペインはVisual Studio IDEの右側に開きます。 このウィンドウには、プロジェクト、ソリューション、またはコード フォルダー内のファイルとフォルダーの階層がグラフィカルに表示されます。

Visual Studio のソリューション エクスプローラーで開かれている新しいプロジェクトのスクリーンショット。

Visual Studio 2022 で新しいプロジェクトのソリューション エクスプローラーを開いた画面のスクリーンショット。

階層を参照し、特定のファイルまたはフォルダーを検索し、ファイルを選択して開くことができます。

コード エディターでファイルを開く

ソリューション エクスプローラーで、app.js ファイルを選択して、Editor ウィンドウでファイルを開きます。 エディターにはファイルの内容が表示され、Visual Studio でほとんどのコーディング作業を行います。

Visual Studio のエディターで開かれているアプリケーション ファイルのスクリーンショット。

Visual Studio 2022 のエディターで開かれているアプリケーション ファイルのスクリーンショット。

メイン メニューを調べる

Visual Studio IDEの上部にあるメニュー バーを使用すると、カテゴリ別に配置されたコマンドのグループにすばやくアクセスできます。 たとえば、[ プロジェクト ] メニューには、作業中のプロジェクトに関連するコマンドが含まれています。 [ ツール ] メニューで、[ オプション] を選択して Visual Studio の動作をカスタマイズしたり、[ ツールと機能の取得] を選択してインストールに機能を追加したりできます。

Visual Studio のメニュー バーのスクリーンショット。

Visual Studio 2022 のメニュー バーのスクリーンショット。

[表示] を選択してビュー関連のコマンドの一覧を表示し、[エラー一覧] を選択して [エラー一覧] ウィンドウを開きます。

エラー一覧でエラーと警告を確認する

エラー一覧には、コードの現在の状態に関するエラー、警告、メッセージが表示されます。 ファイルまたはプロジェクト内の任意の場所にエラー (中かっこやセミコロンがないなど) がある場合は、ここに一覧表示されます。

Visual Studio のエラー一覧のスクリーンショット。

Visual Studio 2022 のエラー一覧のスクリーンショット

[出力] ウィンドウでビルド メッセージを確認する

[出力] ウィンドウには、プロジェクトのビルドとソース管理プロバイダーからの出力メッセージが表示されます。

[出力] ウィンドウでビルド メッセージを調べることができるように、新しいプロジェクトをビルドします。 メニュー バーで、[ ビルド>ソリューションのビルド] を選択します。

[出力] ウィンドウは自動的にフォーカスを取得し、正常なビルド メッセージを表示します。

最小ビルド出力を示すVisual Studioの出力ウィンドウのスクリーンショット。

最小ビルド出力を示す Visual Studio 2022 の出力ウィンドウのスクリーンショット。

コマンドと機能を検索する

検索ボックスは、Visual Studioでほとんどのことを行うための迅速かつ簡単な方法です。 実行する操作に関連するテキストを入力すると、検索結果に入力テキストに関連するオプションの一覧が表示されます。

ビルドが何をしているかをより詳しく確認するために、ビルド出力の詳細レベルを上げたいとします。 以下の手順に従います。

  1. [検索] ボックスが表示されない場合は、 Ctrl+Q キーボード ショートカットを使用します。 検索ボックスに verbosity を入力します。

  1. 結果の一覧で、 MSBuild プロジェクトのビルド出力の詳細度 (projectsAndSolutions.buildAndRun.outputVerbosity) エントリをダブルクリックします。

    Visual Studio で検索ボックスを使用する方法を示すスクリーンショット。

    [オプション] ウィンドウが開き>プロジェクトとソリューション>Build and Run セクションが開きます。

  2. ドロップダウンを使用して、 MSBuild プロジェクトのビルド出力の詳細オプション を [標準] に設定します。

  1. 結果の一覧で、[ MSBuild の詳細度の変更 ] ([プロジェクトとソリューション] > ビルドと実行) エントリをダブルクリックします。

    Visual Studio で検索ボックスを使用する方法を示すスクリーンショット。

    [オプション] ダイアログボックスが開き、[プロジェクトとソリューション>Build and Run]\(ビルドと実行\) セクションが開きます。

  2. ドロップダウンを使用して、 MSBuild プロジェクトのビルド出力の詳細オプション を [標準] に設定し、[ OK] を選択します。

  1. ソリューション エクスプローラーコンテキスト メニューで Rebuild を選択して、プロジェクトをもう一度ビルドします。

    今回は、[ 出力 ] ウィンドウに、ビルド プロセスからのより詳細なログが表示されます。

    Visual Studio での詳細なビルド出力のスクリーンショット。

    Visual Studio 2022 の詳細なビルド出力のスクリーンショット。

フィードバックを送信する

Visual Studioの使用中に問題が発生した場合、または製品の改善方法について提案がある場合は、Visual Studio ウィンドウの上部にある Send Feedback メニューを使用できます。

Visual Studio の [フィードバックの送信] メニューにアクセスする方法を示すスクリーンショット。

Visual Studio 2022 で [フィードバックの送信] メニューにアクセスする方法を示すスクリーンショット。

関連するコンテンツ

  • Last updated on