Chapter 4: テキストエディタ（VS Code）
VS Code のインストールから基本操作まで
4.1 VS Code のインストール
VS Code（Visual Studio Code） は、Microsoft が無料で提供するテキストエディタです。現在、世界中の開発者に最も広く使われているエディタで、多機能でありながら動作が軽いのが特徴です。
「テキストエディタ」という言葉には「メモ帳でいいのでは？」と思う方もいるでしょう。しかし VS Code は、メモ帳とは比べ物にならないほど多くの機能を持っています。
| 機能 | メモ帳 | VS Code |
|---|---|---|
| 文字の色付け（シンタックスハイライト） | なし | あり |
| 自動補完 | なし | あり |
| エラーの自動検出 | なし | あり |
| ターミナルの統合 | なし | あり |
| 拡張機能 | なし | 数千種類 |
インストール手順
- https://code.visualstudio.com/ にアクセスする
- 「Download for Mac」または「Download for Windows」をクリック
- ダウンロードされたファイルを開いてインストール
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - VS Code 公式サイトのダウンロードページ
Mac の追加設定（code コマンドを使えるようにする）:
VS Code を開いた後、Command + Shift + P でコマンドパレットを開き、「Shell Command: Install 'code' command in PATH」を選択します。これにより、ターミナルから code . と打つだけでVS Codeを開けるようになります。
code . # 今いるフォルダを VS Code で開く
code file.txt # 特定のファイルを VS Code で開く4.2 画面の見方
VS Code を起動すると、以下のような画面が表示されます。
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - VS Code の初期画面（各エリアに番号を付けた説明図）
各エリアの役割
① アクティビティバー（左端のアイコン列）
アイコンをクリックするとサイドバーの内容が切り替わります。
| アイコン | 機能 |
|---|---|
| ファイルアイコン | ファイルエクスプローラー（フォルダの中身を見る） |
| 虫眼鏡アイコン | テキスト検索 |
| Gitアイコン | バージョン管理（変更の追跡） |
| パズルアイコン | 拡張機能の管理 |
② サイドバー
ファイルやフォルダの一覧が表示されます。ここからファイルをクリックして開いたり、新規ファイルを作成したりできます。
③ エディタエリア
実際にコードやテキストを書く場所です。複数のファイルを「タブ」で開けます。
④ ターミナル
VS Code に内蔵されたターミナルです。Ctrl + `` （バッククォート）で開閉できます。別途ターミナルアプリを開かなくても、VS Code 内でコマンドを実行できます。
⑤ ステータスバー
画面下部にある情報バーです。現在開いているファイルの言語（JavaScript、Pythonなど）や文字コード（UTF-8）が表示されます。
4.3 ファイルの開き方・保存
フォルダを開く（推奨）
開発ではファイル単体ではなく、プロジェクト全体のフォルダを開くのが基本です。
# ターミナルで目的のフォルダに移動してから
cd ~/Documents/my-project
code . # このフォルダを VS Code で開くまたは、VS Code のメニューから「File」→「Open Folder...」でフォルダを選択します。
ファイルを開く
サイドバーのファイル一覧から、開きたいファイルをクリックするだけです。
Command + P（Mac）/ Ctrl + P（Windows）で「ファイル名を検索して素早く開く」ことができます。
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - Command + P でファイル検索している様子
ファイルを保存する
Command + S（Mac）/ Ctrl + S（Windows）保存されていないファイルはタブに「●（ドット）」が表示されます。保存後はドットが消えます。
自動保存の設定（おすすめ）: 「File」→「Auto Save」をオンにすると、編集するたびに自動で保存されます。
4.4 便利なショートカット
ショートカットを覚えると作業スピードが大幅に上がります。まず以下の10個から始めましょう。
| ショートカット（Mac） | ショートカット（Win） | 機能 |
|---|---|---|
Command + S | Ctrl + S | ファイルを保存 |
Command + Z | Ctrl + Z | 元に戻す（アンドゥ） |
Command + Shift + Z | Ctrl + Y | やり直し（リドゥ） |
Command + F | Ctrl + F | ファイル内検索 |
Command + H | Ctrl + H | 置換 |
Command + P | Ctrl + P | ファイルを素早く開く |
Command + Shift + P | Ctrl + Shift + P | コマンドパレット（全機能にアクセス） |
Command + / | Ctrl + / | 選択行をコメントアウト |
Command + D | Ctrl + D | 同じ単語を複数選択 |
Ctrl + ` | Ctrl + ` | ターミナルの開閉 |
コマンドパレット（Command + Shift + P）は特に重要です。「何かしたいけどメニューがどこか分からない」というときに、ここで日本語や英語で検索すると機能を見つけられます。
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - コマンドパレットを開いて「format」と入力した様子
4.5 拡張機能の入れ方
VS Code は拡張機能（プラグイン）を追加することで、さまざまな機能を追加できます。
インストール方法
- 左端のアクティビティバーで拡張機能アイコン（パズルのマーク）をクリック
- 検索ボックスに拡張機能名を入力
- 「Install」ボタンをクリック
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - 拡張機能の検索・インストール画面
研修でインストールする拡張機能
以下の拡張機能をインストールしておきましょう。
| 拡張機能名 | 用途 |
|---|---|
| Japanese Language Pack | VS Code の日本語化 |
| Prettier - Code Formatter | コードを自動で整形する |
| ESLint | JavaScriptのコードの問題を検出する |
| GitLens | Git の変更履歴を見やすく表示 |
| Markdown Preview Enhanced | Markdown をリアルタイムプレビュー |
Japanese Language Pack のインストール後：VS Code を再起動すると日本語表示になります。
4.6 統合ターミナルの使い方
VS Code にはターミナルが内蔵されています。外部のターミナルアプリを切り替える手間なく、コードを書きながらコマンドを実行できます。
ターミナルを開く
Ctrl + `（バッククォート） # 開く / 閉じるのトグルまたは「Terminal」メニュー → 「New Terminal」
出典: VS Code 公式ドキュメント
TODO: あとで実際のスクリーンショットに置き換え - VS Code の下半分にターミナルが開いた状態
複数のターミナルを使う
「＋」ボタンをクリックすると、新しいターミナルを追加できます。例えば、ひとつのターミナルでサーバーを起動しながら、別のターミナルでファイル操作をする、といった使い方ができます。
よくある使い方
# ターミナルで作業ディレクトリを確認
pwd
# ファイルを作成してすぐ VS Code で確認
touch index.html
# → サイドバーに index.html が現れる
# パッケージをインストール（後の章で詳しく学ぶ）
npm installまとめ
VS Code の基本をマスターすれば、コードを書く作業がぐっと快適になります。
次のChapterでは、ドキュメントを簡単に書ける「Markdown」を学びます。README や設計書など、開発現場で広く使われているフォーマットです。