Visual Studio IDE for JavaScript の概要

この 5 ~ 10 分間の Visual Studio 統合開発環境 (IDE) の概要では、一部のウィンドウ、メニュー、およびその他の UI 機能について説明します。

Visual Studio をインストールしていない場合は、 Visual Studio のダウンロード ページに移動して無料でインストールします。

スタート ウィンドウ

Visual Studio を起動した後に最初に表示されるのがスタート ウィンドウです。 スタート ウィンドウは、"コードにアクセスする" 時間を短縮できるように設計されています。 コードを閉じたりチェックアウトしたり、既存のプロジェクトやソリューションを開いたり、新しいプロジェクトを作成したり、コード ファイルを含むフォルダーを開いたりするオプションがあります。 スタート ウィンドウが開かない場合は、[ ファイル] > [スタート ウィンドウ] を選択して開きます。

Visual Studio を初めて使用する場合、最近使用したプロジェクトの一覧は空になります。

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

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

プロジェクトを作成する

Visual Studio の機能を引き続き調べるために、新しいプロジェクトを作成しましょう。

1. スタート ウィンドウで [ 新しいプロジェクトの作成] を選択し、検索ボックスに 「javascript 」または 「typescript 」と入力して、プロジェクトの種類の一覧をフィルター処理して、名前または言語の種類に "javascript" または "typescript" が含まれるものにフィルター処理します。

   Visual Studio には、コーディングをすぐに開始するのに役立つさまざまな種類のプロジェクト テンプレートが用意されています。

   

   

3. 表示される [ 新しいプロジェクトの構成 ] ダイアログ ボックスで、既定のプロジェクト名をそのまま使用し、[ 作成] を選択します。

   プロジェクトが作成されます。 右側のウィンドウで app.jsを選択 し、[ エディター ] ウィンドウでファイルを開きます。 エディターにはファイルの内容が表示され、Visual Studio でほとんどのコーディング作業を行います。

   

   プロジェクトが作成され、 server.js という名前のファイルが エディター ウィンドウに開きます。 エディターにはファイルの内容が表示され、Visual Studio でほとんどのコーディング作業を行います。

   

ソリューション エクスプローラー

通常は Visual Studio の右側にあるソリューション エクスプローラーには、プロジェクト、ソリューション、またはコード フォルダー内のファイルとフォルダーの階層がグラフィカルに表示されます。 階層を参照し、 ソリューション エクスプローラーでファイルに移動できます。

メニュー

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

[表示] メニューを選択し、[エラー一覧] を選択して、[エラー一覧] ウィンドウを開きます。

エラー リスト

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

出力ウィンドウ

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

プロジェクトをビルドして、ビルド出力を確認しましょう。 [ ビルド ] メニューの [ ソリューションのビルド] を選択します。 [出力] ウィンドウは自動的にフォーカスを取得し、正常なビルド メッセージを表示します。

検索ボックス

検索ボックスは、Visual Studio でほとんど何でも簡単に実行できる簡単な方法です。 実行する操作に関連するテキストを入力すると、テキストに関連するオプションの一覧が表示されます。 たとえば、ビルド出力の詳細度を上げて、ビルドの正確な動作に関する詳細を表示するとします。 その方法を次に示します。

1. 検索ボックスが表示されない場合は、 Ctrl キーを押しながら Q キー を押して開きます。

2. 冗長性を検索ボックスに入力します。 表示された結果から、[プロジェクトとソリューション] -- [ビルドと実行] >選択します。

   

   

   [ オプション] ダイアログ ボックスが開き、[ ビルドと実行 ] オプション ページが表示されます。

3. MSBuild プロジェクトのビルド出力の詳細度で、[標準] を選択し、[OK] をクリックします。

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

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

   

   

[フィードバックの送信] メニュー

Visual Studio の使用中に問題が発生した場合、または製品の改善方法に関する提案がある場合は、Visual Studio ウィンドウの上部にある [ フィードバックの送信 ] メニューを使用できます。

次のステップ

Visual Studio の機能のほんの一部を見て、ユーザー インターフェイスを理解しました。 さらに探求するために：

こちらも参照ください

• Visual Studio IDE の概要
• Visual Studio 2017 のその他の機能
• テーマとフォントの色を変更する