チュートリアル: Visual Studio Code を始める

このチュートリアルでは、すぐに使い始めることができるように、Visual Studio Code の主な機能について説明します。ユーザー インターフェイスのさまざまなコンポーネントについて学び、AI エージェントを使用して Web アプリをビルドし、拡張機能を使用してセットアップを強化する方法を探ります。また、VS Code の設定の構成、ソース管理の使用、およびコードの実行とデバッグについても学びます。

前提条件

• コンピューターに Visual Studio Code をダウンロードしてインストールする
• VS Code で GitHub Copilot をセットアップする
• Node.js のインストール (JavaScript の実行とデバッグ用)

VS Code でフォルダーを開く

VS Code を使用して個々のファイルで素早い編集を行ったり、ワークスペースとも呼ばれるフォルダーを開いたりすることができます。

まずは、フォルダーを作成して VS Code で開いてみましょう。このフォルダーは、チュートリアル全体を通して使用します。

1. Visual Studio Code を開き、メニューから ファイル > フォルダーを開く... を選択してフォルダーを開きます。

2. 新しいフォルダー を選択し、vscode101 という名前の新しいフォルダーを作成します。次に、フォルダーの選択 (macOS では 開く) を選択して、VS Code でフォルダーを開きます。

   これで、開いたフォルダーが VS Code でワークスペースとして認識されます。

3. [ワークスペースの信頼] ダイアログで、はい、作成者を信頼します を選択して、ワークスペース内のすべての機能を有効にします。

   

   重要

   ワークスペースの信頼機能を使用すると、プロジェクト フォルダー内のコードを VS Code で実行可能にするかどうかを決定できます。インターネットからコードをダウンロードしたときは、安全に実行できるかまず確認する必要があります。詳細については、ワークスペースの信頼に関するドキュメントを参照してください。

4. 左側にフォルダー名が表示された エクスプローラー ビューが表示されるはずです。

   エクスプローラー ビューを使用して、ワークスペース内のファイルやフォルダーを表示および管理します。

   

ユーザー インターフェイスの探索

VS Code でフォルダーを開いたので、ユーザー インターフェイスを簡単に見てみましょう。

アクティビティ バーでビューを切り替える

1. アクティビティ バーを使用して、さまざまなビューを切り替えます。

   

   ヒント

   アクティビティ バーの上にホバーすると、各ビューの名前と対応するキーボード ショートカットが表示されます。ビューをもう一度選択するか、キーボード ショートカットを押すことで、ビューの開閉を切り替えることができます。

2. アクティビティ バーでビューを選択すると、プライマリ サイド バー が開き、ビュー固有の情報が表示されます。

   たとえば、[実行とデバッグ] ビューを使用すると、デバッグ セッションを構成して開始できます。

   

   ヒント

   アクティビティ バーの チャット ビューに注目してください。ここでは、AI エージェントとやり取りして、コードの生成、質問などを行うことができます。次のステップで、これを使用してアプリをビルドします。

エディターでファイルを表示および編集する

1. アクティビティ バーでエクスプローラー ビューを選択し、新しいファイル... ボタンを選択して、ワークスペースに新しいファイルを作成します。

   

2. 「index.html」と入力し、Enter キーを押します。

   ファイルがワークスペースに追加され、ウィンドウのメイン領域にエディターが開きます。

   

3. index.html ファイルに HTML コードの入力を開始します。

   入力を進めると、コードの完成を支援する候補が表示されます (IntelliSense)。上 キーと 下 キーを使用して候補を移動し、Tab キーを押して選択した候補を挿入できます。

4. ワークスペースにさらにファイルを追加すると、各ファイルが新しいエディター タブで開くことに注目してください。

   エディターはいくつでも開くことができ、左右または上下に並べて表示できます。詳細については、並べて編集に関するドキュメントを参照してください。

   

パネル領域からターミナルにアクセスする

1. VS Code には統合ターミナルがあります。⌃` (Windows, Linux は Ctrl+`) キーを押して開きます。また、表示 > ターミナル メニュー項目を使用することもできます。

   オペレーティング システムの構成に応じて、PowerShell、コマンド プロンプト、Bash などのさまざまなシェルから選択できます。

   

2. ターミナルで次のコマンドを入力して、ワークスペースに新しいファイルを作成します。

   echo "Hello, VS Code" > greetings.txt
   

   デフォルトの作業フォルダーはワークスペースのルートです。エクスプローラー ビューが新しいファイルを自動的に検出して表示することに注目してください。

   

3. 複数のターミナルを同時に開くことができます。プロファイルの起動 ドロップダウンを選択して、使用可能なシェルを表示し、いずれかを選択します。

   

コマンド パレットでコマンドにアクセスする

1. ⇧⌘P (Windows、Linux は Ctrl+Shift+P) を押して コマンド パレット を開きます。表示 > コマンド パレット メニュー項目を使用することもできます。

   VS Code のコマンドの多くは、コマンド パレットから利用できます。拡張機能をインストールすると、コマンド パレットに新しいコマンドを追加できます。

   

   ヒント

   コマンド パレットには、対応するショートカット キーが存在するコマンドのデフォルトのキーボード ショートカットが表示されます。キーボード ショートカットを使用すると、コマンドを直接実行できます。

2. コマンド パレットは、さまざまな動作モードをサポートしています。

   1. コマンド モード (>): > 記号の後に文字を入力してコマンド一覧を絞り込みます。たとえば、「move terminal」と入力すると、ターミナルを新しいウィンドウに移動するコマンドを検索できます。

      

   2. クイック オープン モード: > 文字を削除して文字を入力すると、ワークスペース内のファイルを検索できます。⌘P (Windows、Linux は Ctrl+P) のキーボード ショートカットを使用してコマンド パレットを開き、直接ファイルの検索を開始できます。

      

   3. シンボル検索モード (#): > 文字を # に置き換えることで、コード内の変数や関数などのシンボルを検索できます。

AI エージェントでアプリをビルドする

Visual Studio Code は、AI 支援によるコーディングをサポートする GitHub Copilot の機能を組み込んでいます。AI エージェントは、1 つの自然言語プロンプトから自主的にソリューションを計画し、複数のファイルの作成と編集、ターミナル コマンドの実行、エラーの修正を繰り返すことができます。目的を説明するだけで、エージェントがジョブを完了するために必要なすべての処理を実行します。

エージェントを使用して、1 つのプロンプトからレシピ一覧の Web アプリをビルドしてみましょう。

1. ⌃⌘I (Windows、Linux は Ctrl+Alt+I) を押してチャット ビューを開きます。

2. チャット ビューのドロップダウンから エージェント を選択します。エージェントにより、AI はファイルの作成と編集、ターミナル コマンドの実行などを自主的に行うことができます。

   

3. チャットの入力ボックスに次のプロンプトを入力します

   Create a recipe list app with HTML, CSS, and JavaScript in separate files. Include an input field to add recipes with a name and description, a list to display them, and a delete button for each item. Use modern styling. Add some sample recipes to the list.
   

   注意

   GitHub Copilot をまだセットアップしていない場合は、プロンプトを送信する前に、GitHub アカウントへのサインインと Copilot のセットアップを求めるメッセージが表示されます。Copilot のサブスクリプションをお持ちでない場合、月々の上限内でコード補完やチャットとのやり取りができる無料アカウントが適用されます。

4. Enter キーを押してプロンプトを送信します。

   エージェントがアプリの生成を開始します。どのようにして複数のファイルを作成し、提案された変更を表示し、ターミナル コマンドを実行するための承認を求めるかを確認してください。

   

5. 生成されたファイルを確認し、チャット ビューで 保持 を選択して、すべての変更を確定します。

次のステップでは、統合ブラウザーでアプリをホストするための拡張機能をインストールします。

拡張機能で環境を強化する

VS Code には、開発ワークフローをサポートするための言語、デバッガー、およびツールを追加できる拡張機能の豊富なエコシステムがあります。Visual Studio Marketplace では、何千もの拡張機能が利用可能です。

作成したレシピ一覧アプリに役立つ拡張機能をインストールしてみましょう。

1. アクティビティ バーで 拡張機能 ビューを選択します。

   拡張機能ビューを使用すると、VS Code 内から拡張機能を参照およびインストールできます。

   

2. 拡張機能ビューの検索ボックスに「Live Preview」と入力します。Microsoft が公開している Live Preview 拡張機能を選択し、インストール ボタンを選択します。

   Live Preview は、静的および動的ページのライブ リロード機能を備えたローカル開発サーバーを起動します。

3. index.html ファイルを開き、エディター内を右クリックして、Show Preview (プレビューの表示) を選択します。

   作成したレシピ一覧アプリがブラウザーで開きます。コードを変更すると、ブラウザーが自動的に更新され、最新バージョンが表示されます。

   

4. エージェントに機能の追加を依頼して、チャットの会話を続けます。次のプロンプトを入力してください

   Add the ability to mark recipes as favorites with a star icon. Favorite recipes should appear at the top of the list.
   

   エージェントは既存のファイルを変更して、新しい機能を追加します。これにより、後続のプロンプトを使用してアプリを反復的にビルドできることがわかります。

Copilot クイックスタート で、VS Code のその他の AI 機能を確認してください。

VS Code の設定を構成する

設定を構成することで、VS Code のほぼすべての部分をカスタマイズできます。設定エディター を使用して VS Code の設定を変更するか、settings.json ファイルを直接変更することができます。

1. ⌘, (Windows、Linux は Ctrl+,) を押して設定エディターを開きます (または、メニュー項目 ファイル > ユーザー設定 > 設定 を選択します)。

   

   ヒント

   検索ボックスを使用して、表示される設定の一覧をフィルター処理します。

2. デフォルトでは、VS Code は変更されたファイルを自動的に保存しません。[Auto Save] (自動保存) ドロップダウンから値を選択して、この動作を変更します。

   

   VS Code は設定の変更を自動的に適用します。ワークスペース内のファイルを変更すると、自動的に保存されるようになります。

3. 設定をデフォルト値に戻すには、設定の横にある歯車アイコンを選択し、設定のリセット を選択します。

   

   ヒント

   検索ボックスに「@modified」と入力するか、[Modified] (変更済み) フィルターを選択することで、変更されたすべての設定をすばやく見つけることができます。

4. 設定エディターのタブを使用して、ユーザー 設定と ワークスペース 設定を切り替えることができます。

   ユーザー設定は、すべてのワークスペースに適用されます。ワークスペース設定は、現在のワークスペースにのみ適用されます。ワークスペース設定はユーザー設定よりも優先されます。詳細については、VS Code の設定に関するドキュメントを参照してください。

ソース管理を使用する

Visual Studio Code は、統合されたソース管理 (SCM) を備えており、標準で Git をサポートしています。

組み込みの Git サポートを使用して、以前に行った変更をコミットしてみましょう。

1. アクティビティ バーで ソース管理 ビューを選択して、ソース管理ビューを開きます。

   

2. コンピューターに Git がインストールされていることを確認してください。Git がインストールされていない場合は、ソース管理ビューにインストールするためのボタンが表示されます。

3. リポジトリを初期化する を選択して、ワークスペース用の新しい Git リポジトリを作成します。

   

   リポジトリを初期化した後、ソース管理ビューにワークスペースで行った変更が表示されます。

4. ファイルの上にホバーし、ファイルの横にある + を選択することで、個々の変更をステージングできます。

   

   ヒント

   すべての変更をステージングするには、変更 の上にホバーし、すべての変更をステージング ボタンを選択します。

5. コミット メッセージ (例: Add recipe list app) を入力し、コミット を選択して、Git リポジトリに変更をコミットします。

   

   ヒント

   ソース管理ビューで Graph (グラフ) を選択して、Git リポジトリのコミット履歴を視覚的に表示します。

VS Code のソース管理については、さらに多くの機能があります。詳細については、VS Code のソース管理に関するドキュメントを参照してください。

コードの実行とデバッグ

VS Code は、JavaScript および Node.js アプリケーションの実行とデバッグを組み込みでサポートしています。デバッガーを使用して、エージェントが生成したレシピ一覧アプリをステップ実行してみましょう。

1. エージェントがレシピ一覧アプリ用に作成した JavaScript ファイル (例: app.js または script.js) を開きます。

2. レシピの追加を処理する関数 (例: addRecipe) を見つけます。関数本体の最初の行にカーソルを置き、F9 キーを押してブレークポイントを設定します。

   エディターの左端の余白に赤い点が表示され、ブレークポイントが設定されたことを示します。ブレークポイントを使用すると、コードの特定の行でプログラムの実行を一時停止できます。

   

3. アクティビティ バーで [実行とデバッグ] ビューを開き、URL のデバッグ を選択し、レシピ一覧アプリのプレビューの URL (例: https://:3000) を入力します。

   

   デバッガーが起動し、アプリのブラウザー ウィンドウが開きます。

4. ブレークポイントに達すると、実行が一時停止し、VS Code が現在の行をハイライトします。

   

   ヒント

   実行が一時停止している間、エディター内の変数の上にホバーすることで、変数の値を検査できます。実行とデバッグ ビュー内の 変数 ビューで、いつでもすべての変数を表示できます。

5. デバッグ ツールバーを使用して、コードをステップ実行します。ステップ オーバー (F10) を押して現在の行を実行し、次の行に移動するか、続行 (F5) を押して実行を再開します。

   

VS Code には、ウォッチ変数、条件付きブレークポイント、起動構成など、他にも多くのデバッグ機能があります。詳細については、VS Code でのデバッグに関するドキュメントを参照してください。

次のステップ

おめでとうございます！ チュートリアルを完了し、Visual Studio Code の主要な機能の一部を学びました。Visual Studio Code の基本を学習したところで、以下の方法についての詳細情報を取得してください。

• AI を使用した最初のアプリのビルド

• さまざまなエージェント タイプの探索

• コードの単体テストの検出と実行

• 統合ターミナルの使用

• リモート開発環境のセットアップ