この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第3回です。毎日1本ずつ公開します。
前の回: #02 ターミナル入門：cd・ls・mkdir で迷わない
この記事でできるようになること
VS Code でフォルダを開き、ファイルを作って、素早く書いて保存し、ターミナルで動かせるようになります。
説明：VS Code は「コード専用のメモ帳」
プログラムは、ただの文字のファイルです。メモ帳でも書けますが、VS Code（Visual Studio Code） は次のような手助けをしてくれます。
- 文字の色分け（コードが読みやすくなる）
- 打ち間違いの下線（間違いに早く気づける）
- 入力の候補表示（打つ量が減る）
- 画面の中でターミナルが使える
たとえるなら、メモ帳が「ふつうのノート」だとすると、VS Code は「マス目・色ペン・付箋つきの作業ノート」です。
画面の名前を覚える
- サイドバー（左）: フォルダとファイルの一覧
- エディタ（中央）: 文字を書く場所
- ターミナル（下）: 前回の文字の命令を打つ場所（あとで出します）
ショートカットとは
マウスで探すかわりに、キーを組み合わせて命令する方法です。この記事では Mac のキーで書きます。Cmd は ⌘ のキーです。
| やりたいこと | キー |
|---|---|
| 保存 | Cmd + S |
| ファイルをさがして開く | Cmd + P |
| 命令の一覧から選ぶ | Cmd + Shift + P |
| サイドバーを出す・隠す | Cmd + B |
| ターミナルを出す・隠す |
Ctrl + ` （Ctrl とバッククォート） |
| 行をコメントにする・戻す | Cmd + / |
| 行を上下に動かす |
Option + ↑ / Option + ↓
|
| 行を複製する | Shift + Option + ↓ |
| 行を消す | Cmd + Shift + K |
| 文字をさがす | Cmd + F |
| 同じ言葉を次々選ぶ | Cmd + D |
| 元に戻す | Cmd + Z |
最初から全部覚えなくて大丈夫です。まずは 保存（Cmd + S）・ファイルを開く（Cmd + P）・命令の一覧（Cmd + Shift + P） の3つだけ。わからなくなったら Cmd + Shift + P で命令の名前を打てば探せます。
手を動かす
コピーせず、自分で打ってください。 打つことで指が覚えます。
1. 練習用フォルダを作って VS Code で開く
ターミナル（#02 で使ったもの）で打ちます。
cd ~
mkdir vscode-practice
cd vscode-practice
code .
code . の . は「いまのフォルダ」です。VS Code がそのフォルダを開いて立ち上がります。
command not found: code と出たら、VS Code の中で Cmd + Shift + P を押し、Shell Command: Install 'code' command in PATH を選んでから、もう一度ターミナルを開き直して試してください。
2. ファイルを作る
サイドバーのフォルダ名の横にある「新しいファイル」のボタンを押し、hello.js と名前をつけます。拡張子（.js の部分）で VS Code は「JavaScript のファイルだ」と判断して、色分けを始めます。
3. 書いて、保存する
エディタに次を打ちます。
console.log("こんにちは、VS Code");
Cmd + S で保存します。保存すると、タブの白い丸（●）が消えます。丸がついているうちは保存されていません。
4. 行を増やす・動かす
次の練習をします。
- 1行目にカーソルを置き、
Shift + Option + ↓を3回押す（同じ行が3つ増える） - 各行の文字を
1行目2行目3行目に打ち直す - 3行目に
Option + ↑を押して、行が上に動くのを見る -
Cmd + Zで元に戻す - 2行目で
Cmd + /を押すと先頭に//がつく（これがコメント。実行されない行になります）。もう一度押すと戻る
5. VS Code の中でターミナルを開いて動かす
Ctrl + ` を押すと、下にターミナルが出ます。すでに練習フォルダの中にいます。次を打ってください。
node hello.js
コメントにした行はとばされるので、2行目を戻した状態なら次のように出ます。
こんにちは、VS Code
1行目
2行目
3行目
（node が入っていない人は #01 に戻ってください。）
練習問題
答えを見ずに解いてみてください。
-
Cmd + Pを使って、マウスなしでhello.jsを開き直してください。 -
hello.jsのすべてのconsoleという言葉を、Cmd + Dで一度に選んでから、何も変えずに選択を解除してください。（選択の動きを見るだけです） - 自動保存を ON にしてください。（ヒント: 上のメニューの「ファイル」の中）
よくあるエラーと直し方
保存し忘れ
node hello.js を動かしたのに、さっき書き換えたはずの内容が出ない。タブの白い丸（●）を確認してください。Cmd + S で保存してからもう一度動かします。
かっこの閉じ忘れ
console.log("閉じ忘れ" と最後の ) と ; を忘れて動かすと、こう出ます。
console.log("閉じ忘れ"
^^^^^^
SyntaxError: missing ) after argument list
SyntaxError は「書き方（文法）が間違っている」という意味です。矢印（^）の近くを見ると、直す場所の手がかりになります。VS Code でも、同じ場所に赤い波線が出ます。
command not found: code
上の「手を動かす」の1で書いた、Shell Command: Install 'code' command in PATH を実行してください。
答え
1. Cmd + P を押し、hello と打つと候補が出るので、Enter で開きます。
2. console の上にカーソルを置いて Cmd + D を押すたびに、同じ言葉が次々選ばれます。解除は Esc。
3. メニューの「ファイル」→「自動保存」にチェックを入れます。（メニューの名前は VS Code の言語設定によって少し違うことがあります）
次回予告
次回は「#04 HTML の骨組み：見出し・段落・リンク・画像」です。いよいよ1枚のページを書きます。