VS Codeとは？基本の使い方を覚えよう
Visual Studio Code（VS Code）は、プログラムを書くためのエディターです。無料で使え、たくさんの機能が備わっています。
この章で学べること
- VS Codeとは何かを理解する
- VS Codeの便利な機能を知る
- VS Codeをダウンロード・インストールする
- 日本語化など基本的な設定を行う
VS Codeって何？
Visual Studio Code（VS Code）は、Microsoftが作った無料のコードエディタです。
「コードエディタ」って難しく聞こえるかもしれませんが、簡単に言うと「プログラムを書くための高機能なメモ帳」のようなものです。
VS Codeの便利な機能
VS Codeには、プログラミングを楽にしてくれるたくさんの機能があります。
色分け表示
コードが色分けされて見やすい
自動補完
入力の途中で候補を表示してくれる
エラー検出
間違いを自動で見つけてくれる
拡張機能
必要な機能を後から追加できる
多言語対応
HTML、CSS、JavaScript、PHPなど
軽くて高速
すぐに起動して快適に動作
VS Codeをダウンロードしよう
まずは公式サイトからVS Codeをダウンロードしましょう。
Tips
公式サイトにアクセスすると、あなたのパソコンに合ったバージョンが自動的に表示されます。「Download」ボタンをクリックするだけでOKです。
VS Codeをインストールしよう
ダウンロードしたファイルを使って、VS Codeをパソコンにインストールします。
Windowsの場合
- ダウンロードした
.exeファイルをダブルクリック - 「実行」ボタンをクリック
- ライセンス条項に同意して「次へ」
- インストール場所はそのままで「次へ」
- 「デスクトップにショートカットを作成」にチェックを入れて「次へ」
- 「インストール」をクリックして完了を待つ
macOSの場合
- ダウンロードした
.zipファイルをダブルクリックして展開 - 「Visual Studio Code.app」をアプリケーションフォルダにドラッグ
- アプリケーションフォルダから VS Code を起動
セキュリティの警告が出た場合
初回起動時に「開発元が未確認」などの警告が出ることがありますが、これは正常です。「開く」を選択して続行してください。
最初の設定をしよう
VS Codeをインストールしたら、使いやすくするための基本設定を行いましょう。
1. 日本語化しよう
VS Codeは最初は英語表示ですが、日本語に変更できます。
- VS Codeを起動
- メニューから「表示」→「コマンドパレット」を選択
- 「>Configure Display Language」と入力してEnterキーを押す
- 「日本語」を選択
- VS Codeを再起動
「>Configure Display Language」と入力してEnterキーを押す
日本語パックのインストール
日本語化するときに「Japanese Language Pack」のインストールを求められる場合があります。その場合は「Install」をクリックしてインストールしてください。
2. テーマを変更してみよう
VS Codeの見た目（色）を変更できます。
- メニューから「Code」→「基本設定」→「テーマ」→「配色テーマ」を選択
- 好きな色のテーマを選択
好きな色のテーマを選択
おすすめのテーマ
- ダーク モダン：黒い背景で目に優しい
- ライト モダン：白い背景で明るい
3. フォントサイズを調整しよう
文字の大きさを見やすく調整できます。
- メニューから「Code」→「基本設定」→「設定」を選択
- 検索ボックスに「font size」と入力
- 「Editor: Font Size」の数値を変更（12〜16がおすすめ）
- フォントサイズが小さい方がたくさんのコードを画面に表示できます
「Editor: Font Size」の数値を変更（12〜16がおすすめ）
これでVS Codeの基本的な準備が整いました。次のレッスンでは、実際にファイルを作成してコードを書く方法を学んでいきます。