チュートリアル: 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 Free プラン にサインアップして、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 の基本を学習したので、次の方法の詳細について説明します

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

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

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