チュートリアル: Visual Studio Code の基本

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

前提条件

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

VS Code でフォルダーを開く

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

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

1. Visual Studio Code を開きます。

   VS Code を初めて開くと、開始するためのさまざまなアクションが記載されたようこそページが表示されます。

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

   

3. 新しいフォルダーを選択し、vscode101 という名前の新しいフォルダーを作成し、フォルダーの選択 (macOS の場合は開く) を選択します。

   作成したフォルダーはワークスペースのルートになります。

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

   

   ご自身のコンピューターでフォルダーを作成したため、そのフォルダー内のコードを信頼できます。

   重要

   ワークスペースの信頼により、プロジェクトフォルダー内のコードを VS Code で実行できるかどうかを決定できます。インターネットからコードをダウンロードする場合、実行しても安全であることを確認するために、まずレビューする必要があります。ワークスペースの信頼に関する詳細情報を入手してください。

5. 左側にフォルダー名が表示されたエクスプローラービューが表示されます。

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

ユーザーインターフェイスを確認する

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

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

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

   

   ヒント

   アクティビティバーにカーソルを合わせると、各ビューの名前と対応するキーボードショートカットが表示されます。ビューをもう一度選択するか、キーボードショートカットを押すと、ビューを開いたり閉じたりすることができます。

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

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

   

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

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 つ選択します。

   

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

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

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

   

   ヒント

   コマンドパレットに、ショートカットがあるコマンドの既定のキーボードショートカットが表示されることに注意してください。キーボードショートカットを使用して、コマンドを直接実行できます。

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

   1. > 記号の後、入力を開始してコマンドリストをフィルター処理します。たとえば、move terminal と入力すると、ターミナルを新しいウィンドウに移動するコマンドを見つけることができます。

      

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

      

VS Code の設定を構成する

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

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

   

   ヒント

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

2. 既定では、VS Code は変更されたファイルを自動的に保存しません。この動作を変更するには、自動保存ドロップダウンから値を選択します。

   

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

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

   

   ヒント

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

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

   ユーザー設定はすべてのワークスペースに適用されます。ワークスペース設定は現在のワークスペースにのみ適用されます。ワークスペース設定はユーザー設定をオーバーライドします。VS Code の設定に関する詳細情報を入手してください。

コードを記述する

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

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

1. エクスプローラービューで、新しいファイル app.js を作成し、次の JavaScript コードを入力し始めます

   function sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   sayHello('VS Code');
   

   入力すると、コードの入力を完了するのに役立つ候補 (IntelliSense) が表示されます。上キーと下キーを使用して候補を移動し、Tab キーを使用して選択した候補を挿入できます。

   コードの異なる部分を区別できるように、コードの書式設定 (構文ハイライト) にも注意してください。

   

2. 文字列 Hello, にカーソルを置くと、コードアクションがあることを示す電球アイコンが表示されます。

   ⌃Space (Windows、Linux の場合は Ctrl+Space) キーボードショートカットを使用して、電球メニューを開くこともできます。

3. 電球アイコンを選択し、テンプレート文字列に変換を選択します。

   

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

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

ソース管理を使用する

Visual Studio Code には統合ソース管理 (SCM) があり、Git サポートがすぐに利用できます。

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

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

   

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

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

   

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

4. ファイルにカーソルを合わせ、ファイルの横にある + を選択することで、個々の変更をステージングできます。

   

   ヒント

   すべての変更をステージングするには、変更にカーソルを合わせ、すべての変更をステージングボタンを選択します。

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

   

   ヒント

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

VS Code のソース管理については、さらに多くの機能があります。VS Code のソース管理に関する詳細情報を入手してください。

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

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

Python または興味のある他のプログラミング言語のサポートを追加するために、言語拡張機能をインストールしましょう。

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

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

   

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

   

3. 次に、ワークスペースに新しい 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 プログラムをデバッグしてみましょう。

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

   コンピューターに Python インタープリターがインストールされていない場合、ウィンドウの右下隅に通知が表示されます。インタープリターの選択を選択してコマンドパレットを開き、使用する Python インタープリターを選択するか、インストールします。

2. hello.py ファイルで、print 行にカーソルを置き、F9 を押してブレークポイントを設定します。

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

   

3. F5 を押してデバッグセッションを開始します。

   1. Python デバッガーを選択する

      

   2. 現在の Python ファイルを実行することを選択する

      

4. プログラムが開始され、設定したブレークポイントで実行が停止することに注意してください。

   

   ヒント

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

5. デバッグツールバーの続行ボタンを押すか、F5 を押して実行を続行します。

   

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

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

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

Copilot からコードの提案を取得して始めましょう。

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

   ヒント

   まだ Copilot サブスクリプションをお持ちでない場合は、Copilot 無料プランにサインアップすることで Copilot を無料で利用でき、月ごとの補完とチャットインタラクションの制限を取得できます。

2. hello.py ファイルで、ファイルの末尾にカーソルを置き、この関数ヘッダーを入力します。

   def say_day_of_week(date)
   

   GitHub Copilot が関数の残りの部分を自動的に提案します。Tab を押してコードの提案を受け入れます。

3. 次に、新しい関数を呼び出してみましょう。

   say_day_of_week(date.today())
   

   date キーワードに波線があり、エラーがあることを示していることに注意してください。

4. date キーワードにカーソルを置き、電球アイコンを選択し、Copilot で修正を選択します。

   

   GitHub Copilot がエラーの修正を提案します。提案に満足している場合は、承諾を選択します。

   ヒント

   ⌘. (Windows、Linux の場合は Ctrl+.) キーボードショートカットを使用して、クイック修正を手動でトリガーすることもできます。

VS Code の Copilot では、さらに多くのことができます。当社のCopilot クイックスタートで、VS Code の GitHub Copilot の詳細をご覧ください。

次のステップ

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

• コードの単体テストを検出して実行する

• 統合ターミナルを使用する

• リモート開発環境をセットアップする