編集

チュートリアル: Visual Studio Code を使ってみる

このチュートリアルでは、Visual Studio Code の主要な機能について学び、すぐにコーディングを開始できるようにします。ユーザーインターフェイスのさまざまなコンポーネントと、それを好みに合わせてカスタマイズする方法について学びます。次に、いくつかのコードを記述し、IntelliSense やコードアクションなどの組み込みのコード編集機能を使用します。また、コードの実行とデバッグについても学びます。言語拡張機能をインストールすることで、別のプログラミング言語のサポートを追加します。

ヒント

ビデオで手順を追いたい場合は、このチュートリアルと同じ手順を説明している「入門」ビデオを視聴できます。

前提条件

コンピューターに Visual Studio Code をダウンロードしてインストールする

VS Code でフォルダーを開く

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

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

Visual Studio Code を開きます。

初めて VS Code を開くと、開始するためのさまざまなアクションが表示された [ようこそ] ページが表示されるはずです。
メニューから [ファイル] > [フォルダーを開く...] を選択してフォルダーを開きます。
[新しいフォルダー] を選択し、vscode101 という名前の新しいフォルダーを作成し、[フォルダーの選択] (macOS では [開く]) を選択します。

作成したフォルダーがワークスペースのルートになります。
[ワークスペースの信頼] ダイアログで、[はい、作成者を信頼します] を選択して、ワークスペース内のすべての機能を有効にします。

このフォルダーはコンピューター上で作成したものなので、フォルダー内のコードは信頼できます。

重要
ワークスペースの信頼を使用すると、プロジェクトフォルダー内のコードを VS Code で実行できるかどうかを決定できます。インターネットからコードをダウンロードした場合は、まずコードを確認して安全に実行できるかを確認する必要があります。ワークスペースの信頼についての詳細はこちらをご覧ください。
左側に [エクスプローラー] ビューが表示され、フォルダーの名前が表示されているはずです。

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

ヒント

VS Code でフォルダーを開くと、VS Code はそのフォルダーの UI の状態 (開いているファイル、アクティブなビュー、エディターのレイアウトなど) を復元できます。また、そのフォルダーにのみ適用される設定を構成したり、デバッグ構成を定義したりすることもできます。ワークスペースについての詳細はこちらをご覧ください。

ユーザーインターフェイスを調べる

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

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

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

ヒント
アクティビティバーにカーソルを合わせると、各ビューの名前と対応するキーボードショートカットが表示されます。ビューをもう一度選択するか、キーボードショートカットを押すと、ビューの開閉を切り替えることができます。
アクティビティバーでビューを選択すると、プライマリサイドバーが開き、ビュー固有の情報が表示されます。

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

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

アクティビティバーでエクスプローラービューを選択し、[新しいファイル...] ボタンを選択して、ワークスペースに新しいファイルを作成します。
index.html という名前を入力し、Enter を押します。

ファイルがワークスペースに追加され、ウィンドウのメイン領域にエディターが開きます。
index.html ファイルに HTML コードの入力を開始します。

入力すると、コードの補完に役立つ候補 (IntelliSense) がポップアップ表示されるはずです。Up キーと Down キーを使用して候補をナビゲートし、Tab キーで選択した候補を挿入できます。
ワークスペースにさらにファイルを追加すると、各ファイルが新しいエディタータブで開かれることに注意してください。

好きなだけエディターを開き、縦または横に並べて表示できます。並べて編集についての詳細はこちらをご覧ください。

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

VS Code には統合ターミナルがあります。⌃` (Windows, Linux Ctrl+`) を押して開きます。

オペレーティングシステムの構成に応じて、PowerShell、コマンドプロンプト、Bash など、さまざまなシェルから選択できます。
ターミナルで、次のコマンドを入力してワークスペースに新しいファイルを作成します。
```
echo "Hello, VS Code" > greetings.txt
```
既定の作業フォルダーはワークスペースのルートです。エクスプローラービューが自動的に新しいファイルを認識して表示することに注意してください。
複数のターミナルを同時に開くことができます。[プロファイルの起動] ドロップダウンを選択して、利用可能なシェルを表示し、1 つを選択します。

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

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

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

ヒント
コマンドパレットには、キーボードショートカットがあるコマンドの既定のショートカットが表示されることに注意してください。キーボードショートカットを使用してコマンドを直接実行できます。
コマンドパレットはさまざまな操作モードをサポートしています
1. > 記号の後に、入力を開始してコマンドリストをフィルター処理します。たとえば、move terminal と入力すると、ターミナルを新しいウィンドウに移動するコマンドが見つかります。
2. > 文字を削除して入力を開始すると、ワークスペース内のファイルを検索できます。⌘P (Windows, Linux Ctrl+P) キーボードショートカットを使用して、コマンドパレットを開き、直接ファイルの検索を開始できます。

ヒント

VS Code はあいまい検索を使用してファイルやコマンドを検索します。たとえば、odks と入力すると Open Default Keyboard Shortcuts コマンドが返されます。

VS Code の設定を構成する

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

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

ヒント
検索ボックスを使用して、表示される設定のリストをフィルター処理します。
既定では、VS Code は変更されたファイルを自動的に保存しません。[自動保存] ドロップダウンから値を選択して、この動作を変更します。

VS Code は設定の変更を自動的に適用します。ワークスペース内のファイルを変更すると、自動的に保存されるはずです。
設定を既定値に戻すには、設定の横にある歯車アイコンを選択し、[設定をリセット] を選択します。

ヒント
検索ボックスに @modified と入力するか、[変更済み] フィルターを選択すると、変更されたすべての設定をすばやく見つけることができます。
設定エディターのタブを使用して、[ユーザー] 設定と [ワークスペース] 設定を切り替えることができます。

ユーザー設定はすべてのワークスペースに適用されます。ワークスペース設定は現在のワークスペースにのみ適用されます。ワークスペース設定はユーザー設定を上書きします。VS Code の設定についての詳細はこちらをご覧ください。

コードを記述する

VS Code には、JavaScript、TypeScript、HTML、CSS などのサポートが組み込まれています。このチュートリアルでは、サンプルの JavaScript ファイルを作成し、VS Code が提供するコード編集機能の一部を使用します。

VS Code は多くのプログラミング言語をサポートしており、次のステップでは、言語拡張機能をインストールして、別の言語、つまり Python のサポートを追加します。

エクスプローラービューで、新しいファイル app.js を作成し、次の JavaScript コードの入力を開始します。
```
function sayHello(name) {
  console.log('Hello, ' + name);
}

sayHello('VS Code');
```
入力すると、コードの補完に役立つ候補 (IntelliSense) がポップアップ表示されるはずです。Up キーと Down キーを使用して候補をナビゲートし、Tab キーで選択した候補を挿入できます。

コードのさまざまな部分を区別しやすくするためのコードの書式設定 (構文の強調表示) にも注意してください。
文字列 Hello, にカーソルを置くと、コードアクションがあることを示す電球アイコンが表示されるはずです。

⌃Space (Windows, Linux Ctrl+Space) キーボードショートカットを使用して、電球メニューを開くこともできます。
電球アイコンを選択し、[テンプレート文字列に変換] を選択します。

コードアクションは、コードにクイックフィックスを適用するための提案です。この場合、コードアクションは ""Hello, " + name を、文字列に式を埋め込むための特殊な JavaScript 構造であるテンプレート文字列 `Hello, ${name}` に変換します。

VS Code でのコード編集機能、IntelliSense、コードナビゲーション、リファクタリングについての詳細はこちらをご覧ください。

ソース管理を使用する

Visual Studio Code には統合されたソース管理 (SCM) があり、すぐに使える Git サポートが含まれています。

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

アクティビティバーの [ソース管理] ビューを選択して、ソース管理ビューを開きます。
お使いのコンピューターに Git がインストールされていることを確認してください。Git がインストールされていない場合は、ソース管理ビューに、マシンにインストールするためのボタンが表示されます。
[リポジトリの初期化] を選択して、ワークスペース用の新しい Git リポジトリを作成します。

リポジトリを初期化すると、ソース管理ビューにワークスペースで行った変更が表示されます。
ファイルにカーソルを合わせ、ファイルの横にある + を選択することで、個々の変更をステージングできます。

ヒント
すべての変更をステージングするには、[変更] にカーソルを合わせ、[すべての変更をステージ] ボタンを選択します。
Add hello function などのコミットメッセージを入力し、[コミット] を選択して変更を Git リポジトリにコミットします。

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

VS Code のソース管理には、他にも多くの機能があります。VS Code のソース管理についての詳細はこちらをご覧ください。

言語拡張機能をインストールする

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

言語拡張機能をインストールして、Python やその他の興味のあるプログラミング言語のサポートを追加してみましょう。

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

拡張機能ビューを使用すると、VS Code 内から拡張機能を参照およびインストールできます。
拡張機能ビューの検索ボックスに Python と入力して、Python 関連の拡張機能を検索します。Microsoft が公開している Python 拡張機能を選択し、[インストール] ボタンを選択します。
次に、ワークスペースに新しい Python ファイル hello.py を作成し、次の Python コードの入力を開始します。
```
def say_hello(name):
    print("Hello, " + name)

say_hello("VS Code")
```
これで、Python コードの候補と IntelliSense も表示されることに注意してください。

コードを実行してデバッグする

VS Code には、Node.js アプリケーションの実行とデバッグのサポートが組み込まれています。このチュートリアルでは、前の手順でインストールした Python 拡張機能を使用して Python プログラムをデバッグします。

前の手順で作成した hello.py プログラムをデバッグしてみましょう。

お使いのコンピューターに Python 3 がインストールされていることを確認してください。

コンピューターに Python インタープリターがインストールされていない場合は、ウィンドウの右下隅に通知が表示されます。[インタープリターの選択] を選択して コマンドパレット を開き、使用したい Python インタープリターを選択するか、インストールします。
hello.py ファイルで、print 行にカーソルを置き、F9 を押してブレークポイントを設定します。

エディターの左余白に赤い点が表示され、ブレークポイントが設定されたことを示します。ブレークポイントを使用すると、特定のコード行でプログラムの実行を一時停止できます。
F5 を押してデバッグセッションを開始します。
1. Python デバッガーを選択する
2. 現在の Python ファイルを実行することを選択する
プログラムが開始され、設定したブレークポイントで実行が停止することに注意してください。

ヒント
実行が一時停止している間に、エディターで name 変数にカーソルを合わせてその値を調べます。変数の値はいつでも [実行とデバッグ] ビューの [変数] ビューで表示できます。
デバッグツールバーの [続行] ボタンを押すか、F5 を押して実行を続行します。

VS Code には、ウォッチ変数、条件付きブレークポイント、起動構成など、他にも多くのデバッグ機能があります。VS Code でのデバッグの詳細についてはこちらをご覧ください。

AI と GitHub Copilot でコーディングを強化する

GitHub Copilot は、コードをより速く記述するのに役立つ AI 搭載のアシスタントであり、コード補完、コードリファクタリング、エラー修正など、さまざまなタスクで役立ちます。

まず、Copilot からコードの提案を取得してみましょう。

VS Code で Copilot をセットアップしていることを確認してください。Copilot セットアップガイドの手順に従ってください。

ヒント
まだ Copilot のサブスクリプションをお持ちでない場合は、Copilot Free プランにサインアップすることで、月間の補完とチャットの対話の上限付きで Copilot を無料で使用できます。
hello.py ファイルで、ファイルの末尾にカーソルを置き、この関数ヘッダーを入力します。
```
def say_day_of_week(date)
```
GitHub Copilot は、関数の残りの部分を自動的に提案します。Tab を押してコードの提案を受け入れます。
次に、新しい関数を呼び出してみましょう。
```
say_day_of_week(date.today())
```
date キーワードに波線が表示され、エラーがあることを示していることに注意してください。
date キーワードにカーソルを置き、電球アイコンを選択し、[Copilot で修正] を選択します。

GitHub Copilot がエラーの修正を提案します。提案に満足したら、[承認] を選択します。

ヒント
⌘. (Windows, Linux Ctrl+.) キーボードショートカットを使用して、手動でクイックフィックスをトリガーすることもできます。

VS Code で Copilot を使用してできることは他にもたくさんあります。Copilot クイックスタートで VS Code の GitHub Copilot の詳細をご覧ください。

次のステップ

おめでとうございます! チュートリアルを完了し、Visual Studio Code の主要な機能の一部を学びました。Visual Studio Code の基本を学んだので、次の方法についての詳細情報を入手してください。

08/07/2025