この記事で扱うこと
VS Code（ブイエス・コード）は、プログラムを書くための無料のアプリです。文字だけを書いて保存するアプリをエディタと呼び、VS Code はその1つです。
この記事では、VS Code を入れてメニューを日本語にし、作業用のフォルダを開いてファイルを1つ作り、保存するところまで進めます。途中で、画面の各部分の名前と、フォルダごと開いて使う理由も説明します。
VS Code をインストールする
公式サイト https://code.visualstudio.com/ から入れます。名前の似たサイトや広告のリンクからは入れません。
Windows の場合
- 「Download for Windows」を押す
- 「ダウンロード」フォルダの
VSCodeUserSetup-で始まる.exeをダブルクリックする - 「同意する」を選び、「次へ」で進めて「インストール」「完了」を押す
Mac の場合
- 「Download for macOS」を押す（
.zipのときは、ダブルクリックして展開する） - Finder で、「ダウンロード」の
Visual Studio Codeを左の「アプリケーション」へドラッグする - 「アプリケーション」の中から起動し、確認が出たら「開く」を押す
メニューを日本語にする
最初に起動すると、メニューは英語で出ます。右下に「表示言語を 日本語 に変更するには…」と出たら「インストールして再起動」を押します。出ないときは、次の手順で切り替えます。
- 左端の、四角が4つ並んだボタンを押す。拡張機能（VS Code に後から足せる追加の機能）の画面が開く
- 検索欄に
Japanese Language Packと打つ - 作者が Microsoft のものの「Install」を押す
- 右下の「Change Language and Restart」を押す
上のメニューが「ファイル」「編集」のように日本語で出ていれば、切り替わっています。
VS Code の画面の4つの部分
VS Code の画面は、次の4つの部分に分かれています。
| 番号 | 名前 | 役割 |
|---|---|---|
| 1 | アクティビティバー | 左端のボタンの列。押すと、右に出る内容が切り替わる |
| 2 | エクスプローラー | 開いたフォルダの中身の一覧 |
| 3 | エディター | ファイルを書く場所。開いたファイルは上にタブ（見出しの札）で並ぶ |
| 4 | パネル | 下の欄。ターミナル（文字でパソコンに命令を出す画面）などを出す |
フォルダごと開いて使う理由
VS Code では、作業に使うフォルダを開いてから、その中のファイルを編集します。
プログラムはたいてい複数のファイルでできています。フォルダごと開いておくと、左の一覧でファイルを行き来できます。ターミナルや AI の機能も、開いたフォルダを基準に動きます。
フォルダを作って開く
「ドキュメント」の中に vscode-practice というフォルダを作り、VS Code で開きます。名前は別のものでもかまいませんが、以下の説明はこの名前で進めます。
Windows の場合
- 「ファイル」から「フォルダーを開く...」を選ぶ
- 「ドキュメント」を選び、「新しいフォルダー」で
vscode-practiceを作る vscode-practiceを選んで「フォルダーの選択」を押す
Mac の場合
- 「ファイル」から「フォルダーを開く...」を選ぶ
- 「書類」（英語名は Documents）を選び、「新規フォルダ」で
vscode-practiceを作る vscode-practiceを選んで「開く」を押す
開くと、「このフォルダー内のファイルの作成者を信頼しますか?」と聞かれます。自分で作ったばかりのフォルダなので、「はい、作成者を信頼します」を押します。
「信頼する」を選ぶと、フォルダの中のプログラムを VS Code が自動で動かせるようになります。そのため、信頼するのは中身を知っているフォルダだけにします。中身を知らないフォルダでは「いいえ」を選びます。「いいえ」でも、ファイルの読み書きはできます。
ファイルを作る
左の一覧で VSCODE-PRACTICE の行にマウスを乗せると、「新しいファイル...」ボタンが出ます。押して memo.txt と名前を入れ、Enter を押すとファイルができます。memo.txt の .txt は拡張子（ファイルの種類を表す、名前の最後の部分）です。
左の一覧とパスの関係
左の一覧は、フォルダの階層をそのまま表しています。一覧で1段下がるごとに、パス（ファイルの住所）の区切りが1つ増えます。
図の灰色の部分は、開いたフォルダより上の場所なので、一覧には出ません。
ファイルを右クリックして「パスのコピー」を選ぶと、パスをコピーできます。同じメニューの「エクスプローラーで表示する」（Mac は「Finder で表示する」）を選ぶと、そのファイルがある場所をいつもの画面で開けます。VS Code で作ったファイルも、ふだん使っているエクスプローラーや Finder から見えるのと同じファイルです。
保存とタブの ● の印
memo.txt に何か文字を書いてみると、タブの名前の横に ● が付きます。
文字を打っただけでは、パソコンの中のファイルは変わりません。● は、まだ保存していない変更があるという印です。保存したときにファイルに書き込まれ、● が消えます。
| Windows | Mac |
|---|---|
| Ctrl + S | Command + S |
まとめ
VS Code は公式サイト https://code.visualstudio.com/ から入れ、Japanese Language Pack でメニューを日本語にします。画面は、アクティビティバー・エクスプローラー・エディター・パネルの4つに分かれています。
VS Code は作業用のフォルダごと開いて使います。左の一覧はフォルダの階層を表していて、1段下がるごとにパスが1区切り長くなります。書いた内容は保存したときにファイルに書き込まれ、保存するとタブの ● が消えます。
参考にした資料
- 「【初心者向き】VSCodeのインストールと日本語化する方法を画像で解説」は、OS ごとのインストールの節と「VSCodeを日本語化する方法」の節が、この記事の前半にあたります
- 「【初心者向け】VSCodeの使い方入門(1) 画面構成を見てみよう！」は、画面構成の図と「アクティビティバーとサイドバー」「パネル」の説明が、画面の4つの部分にあたります
- ともすた「Visual Studio Code入門」は動画の再生リストで、「001 インストールして日本語化しよう」と「003 エクスプローラーパネルを使いこなそう」の2本が関係します
- 「Tutorial: Get started with Visual Studio Code」は英語の公式ドキュメントで、「Open a folder in VS Code」と「Explore the user interface」の2節が、フォルダの開き方と画面の説明にあたります