VS Codeをインストールしよう

学習の目標

本章では、プログラミングに必要な基本ツールであるVisual Studio Code（VS Code）のインストール方法と日本語化の手順を学びます。VS Codeは世界中の開発者が利用する使いやすいコードエディタで、これからのプログラミング学習でよく使用するツールです。

VS Codeとは

VS Codeは、Microsoftが開発・提供している無料のコードエディタです。多くの機能を備えており、プログラミング初心者から上級者まで幅広く利用されています。

VS Codeの主な特徴は以下の通りです。

  • 無料で使える高機能なコードエディタ
  • さまざまなプログラミング言語に対応
  • 多数の拡張機能によって機能を追加できる
  • Windows、Mac、Linuxなど様々なOSで利用可能

インストール前の準備

インストールを始める前に、お使いのパソコンがインターネットに接続されていることを確認してください。VS Codeは公式サイトからダウンロードします。

インストーラーのダウンロード手順

公式サイトにアクセスする

まずは、VS Codeの公式サイトにアクセスしましょう。ブラウザでGoogle検索を開き、「vs code」と検索します。

検索結果の一番上に表示される「Visual Studio Code - Code Editing. Redefined」というMicrosoftの公式サイトをクリックします。

以下のURLからも直接アクセスできます。

https://code.visualstudio.com/

インストーラーをダウンロードする

公式サイトにアクセスすると、画面中央に大きなダウンロードボタンが表示されます。自動的にお使いのOS（WindowsまたはMac）に合わせたダウンロードボタンが表示されます。

  • Macをお使いの方：「Download for Mac」をクリック
  • Windowsをお使いの方：「Download for Windows」をクリック

OSごとのインストール手順

Macの場合

  1. ダウンロードした「VSCode.zip」をダブルクリックして解凍します。
  2. 解凍されたアプリケーション「Visual Studio Code」をダブルクリックして起動します。
  3. 初回起動時に「開発元が未確認のため開けません」という警告が表示された場合は、以下の手順で対応します。
    • 「キャンセル」をクリック
    • 「システム環境設定」→「セキュリティとプライバシー」を開く
    • 「このまま開く」ボタンをクリック
  4. VS Codeが起動したら、インストール完了です。

Windowsの場合

  1. ダウンロードした「VSCodeSetup.exe」をダブルクリックして実行します。
  2. 「使用許諾契約書」が表示されるので、内容を確認して「同意する」を選択し、「次へ」をクリックします。
  3. インストール先のフォルダを確認します。通常はデフォルトのままで問題ありませんので、「次へ」をクリックします。
  4. スタートメニューへの登録を確認し、「次へ」をクリックします。
  5. 追加タスクの選択画面では、以下の項目にチェックを入れておくことをおすすめします。
    • 「デスクトップ上にアイコンを作成する」
    • 「PATHへの追加」
    • 「すべてのユーザーに対してインストールする」
  6. 「次へ」をクリックし、「インストール」ボタンをクリックしてインストールを開始します。
  7. インストールが完了したら「完了」をクリックして、VS Codeを起動します。

起動の確認

インストールが完了したら、VS Codeを起動して正常に動作するか確認しましょう。

Macの場合

「アプリケーション」フォルダから「Visual Studio Code」をダブルクリックします。

Windowsの場合

デスクトップに作成されたショートカットアイコンをダブルクリックするか、スタートメニューから「Visual Studio Code」を探してクリックします。

正常に起動すると、VS Codeのウェルカム画面が表示されます。画面の左側にはファイルエクスプローラーが配置され、中央部分には「Welcome」というタブが開いた状態になります。

VS Codeの日本語化

VS Codeは初期状態では英語表示になっています。日本語で使用したい場合は、以下の手順で日本語化を行いましょう。

拡張機能のインストール

まず、画面左側にある「Extensions」アイコン（四角いパズルピースのようなアイコン）をクリックします。

VSCodeの拡張機能アイコン

次に、検索バーに「Japanese」と入力して検索します。

すると、検索結果に「Japanese Language Pack for Visual Studio Code」が表示されますので「Install」ボタンをクリックしてインストールします。

Japanese Language Pack for Visual Studio Code

インストールが完了すると、画面右下に「Change Language and Restart」というメッセージが表示されますので、これをクリックしてVS Codeを再起動します。

VS Codeの基本的な使い方

VS Codeの基本的な使い方について簡単に紹介します。

ファイルを開く

  1. 「ファイル」→「開く」メニューを選択するか、「Ctrl+O」（Macでは「Cmd+O」）を押します。
  2. ファイル選択ダイアログが表示されるので、開きたいファイルを選択して「開く」をクリックします。

フォルダを開く

  1. 「ファイル」→「フォルダを開く」メニューを選択するか、「Ctrl+K Ctrl+O」（Macでは「Cmd+K Cmd+O」）を押します。
  2. フォルダ選択ダイアログが表示されるので、開きたいフォルダを選択して「フォルダの選択」をクリックします。

新規ファイルの作成

  1. 「ファイル」→「新規ファイル」メニューを選択するか、「Ctrl+N」（Macでは「Cmd+N」）を押します。
  2. 新しい無題のファイルが作成されます。

まとめ

本章では、開発環境の第一歩としてVS Codeのインストールと日本語化を行いました。VS Codeは無料で使える高機能なコードエディタで、プログラミング学習の基本ツールとして活用していきます。

次の章からは、このVS Codeを使って実際にプログラミングを始めていきましょう。

Rubyコースの完了状況を確認
Previous
【Windows向け】 RubyをPCにインストールしよう
Next
VS Codeの基本操作を学ぼう