Tech Select 学習サイト

# Visual Studio Code

Visual Studio Code のインストール方法を説明します。

# 摘要

  • Visual Studio Code のインストールを完了する。
  • ターミナルで code コマンドを使用して起動できるようにする。
  • Visual Studio Code の基本操作を行う。
  • ワークスペースについて知る。

# ダウンロード

ダウンロードのページには Windows ・ Linux ・ Mac といった、それぞれ OS 別のインストーラーが用意されていますので、自分のコンピュータにあったものを選択しましょう。

image

# インストール

WIN

Windows ユーザー向けのインストール方法です。

インストールの流れ（動画）

以下の内容が含まれています。

  • インストーラーのダウンロード
  • インストール
  • 日本語拡張機能のインストール
  • code コマンドによる起動確認

インストールの流れ

  1. ダウンロードしたインストーラーの起動
    ダウンロードできたらインストーラーを開いてください。おそらくデスクトップに表示されているはずです。

  2. 規約に同意
    インストールするための規約に同意します。ここでは「同意する」にチェックを入れた状態で、「次へ」をクリックしまします。

  3. インストール先を指定
    特別に必要がなければ、ここは初期値のままで問題ありません。「次へ」をクリックします。

  4. スタートメニューフォルダーの指定
    Windows のスタートメニューにショートカットを作成するかの選択ができますが、ここも初期値のままで問題ありません。

  5. 追加タスクの選択
    ここでは、デスクトップ上にアイコンを作成するか、などの選択が出来ます。次の 3 つにチェックを入れ、全てチェックが入った状態にします。

    • デスクトップ上にアイコンを作成する。
    • エクスプローラーのファイルコンテキストメニューに[Code で開く]アクションを追加する。
    • エクスプローラーのディレクトリコンテキストメニューに[Code で開く]アクションを追加する。 チェックを入れたら「次へ」をクリックします。

  6. インストール準備完了
    以上で Visual Studio Code のセットアップは完了です。問題が無ければインストールを開始します。インストールには数秒ほどかかります。

  7. インストールの完了
    インストールが終わると次の画面が表示されますので、最後に「完了」をクリックします。 最後に、起動ができるかどうかを確認しておきましょう。画像のとおりに表示されたら完了です。

    image

MAC

Mac ユーザー向けのインストール方法です。

  1. ダウンロードしたファイルを「アプリケーション」フォルダに移動します。 Finder から「アプリケーション」フォルダを開いておき、 ダウンロードしたファイルをドラッグ&ドロップして、 「アプリケーション」フォルダへ移動します。

  2. 最後に、起動ができるかどうかを確認しておきましょう。画像のとおりに表示されたら完了です。 image

# code コマンドによる起動確認

ターミナルから Visual Studio Code が起動できることを確認します。

WIN
  1. PowerShell を起動します。
    Windows の検索欄で「powershell」と入力し、 「Windows PowerShell」アプリを選択して起動します。 image
  2. code と入力し Enter キーを押します。 image
  3. Visual Studio Code が起動します。 image

エラーが出る場合は、以下のことが考えられます。

  • 入力ミス
  • インストール後にコンピュータを再起動していない。
  • インストール時に「PATH への追加」にチェックを入れていない。

エラーの例（入力ミス） image

MAC
  1. ターミナルを開きます。
  2. code と入力し Enter キーを押します。
  3. Visual Studio Code が起動します。

エラーが出る場合は、以下のことが考えられます。

  • 入力ミス
  • code コマンドの path が通っていない

code コマンドの path が通っていないと考えられる場合は以下の手順を行います。

  1. 通常通り Vistual Studio Code を起動します。
  2. Command + Shift + P を押し、コマンドパレット開きます。
  3. 上部に表示され入力欄に shell と入力し、Enter を押します。
  4. ターミナルで code を入力し、Enter を押して、起動することを確認します。

# 基本操作

Visual Studio Code の画面構成は以下の通りです。レイアウトをカスタマイズしている場合は、スクリーンショットと異なる場合があります。 サイドバーが表示されていない場合は、左のアクティビティーバーにある 5 個のアイコンのうちどれかを押すと表示されます。（エクスプローラーを押すとスクリーンショットと同じサイドバーが表示されます。）エディター領域は、初回は Welcome 画面が表示されているか、Visual Studio Code のロゴが表示されているかもしれません。パネルは、メニューバーの「表示」から「ターミナル」を選択すると表示されます。

image

# ワークスペースについて

Visual Studio Code を通常通り起動した状態は、テキストエディタの状態です。 しかし、 Visual Studio Code には、ワークスペースという考え方があり、特定のディレクトリ配下をプロジェクトとして扱うことができます。 「フォルダーを開く」という方法と、コマンドから起動する際に「引数にパスを指定する」方法があります。

Web 開発においては、1 つのプロジェクトに対して、1 つのワークスペースを割り当て、そのウィンドウで作業します。 この場合の 1 つのプロジェクトというのは、一般的に想像されるプロジェクトという単語とは異なる意味を持つ場合があります。 ある取り組み（プロジェクト）の中で、2 つの Web サービスを開発し、ソースコードも全く異なる場合は、2 つのプロジェクト（ワークスペース）として考えることもあります。 場合によっては、その中の共通のソースコードを別のライブラリとして扱えるようにするために、更にワークスペースを分ける場合もあります。 規模や用途に応じて、プロジェクト（ワークスペース）を分けて使用します。 はじめのうちは、GitHub で 1 つのリポジトリとして扱う範囲を 1 つのプロジェクトとし、ワークスペースに割り当てることをおすすめします。 具体的な例は、この開発環境構築編後半にある、動作確認のページ で実際に行います。

# おわりに

VS Code のインストール作業は終わりです。 VS Code には様々な拡張機能があります。おすすめの拡張機能を、Visual Studio Code 拡張機能 のページで紹介しています。 ただし Windows を使用している方は、 拡張機能をインストールする前に WSL のインストールを完了しておくことをおすすめします。

← WSL (Windows) →