コードエディタとは？VS Codeの使い方を初心者向けにわかりやすく解説

プログラミングにおいて必需品となるコードエディタ。なぜ使うのかと、その使い方を初学者に向けてわかりやすく解説します。そして、コードエディタの王者、VS Codeの解説をします。

なぜコードエディタを使うのか

そもそもプログラミングってどうやって行うの？

プログラミングは、テキストファイルに命令文（コード）を書き、そのファイルをコンピュータに実行させることで動作します。

プログラミングの流れを具体例で見てみよう

例えば、Pythonで「青山学院大学は箱根駅伝で総合優勝しました。」と画面に表示（出力）したいとします。

ステップ1: テキストファイルを作成する

まず、テキストファイルを作成します。テキストファイルとは、文字情報のみを保存するシンプルなファイルのことです。

ここでポイントなのがファイルの拡張子です。

拡張子	意味
.txt	通常のテキストファイル
.py	Pythonのプログラムファイル
.js	JavaScriptのプログラムファイル
.html	HTMLファイル（Webページ）

今回はPythonのプログラムなので、ファイル名を aoyama_celebrate.py とします。

ステップ2: コードを書く

作成したファイルをテキストエディタで開き、以下のコードを書きます：

print("青山学院大学は箱根駅伝で総合優勝しました。")

print() は、カッコ内の文字を画面に表示する命令です。

ステップ3: プログラムを実行する

ファイルを保存したら、ターミナル（Windowsではコマンドプロンプト）で以下のコマンドを実行します：

python aoyama_celebrate.py

すると、以下のように出力されます：

青山学院大学は箱根駅伝で総合優勝しました。

🎉 これでプログラムの実行完了です！

💡 ターミナルの使い方については「ターミナル入門ガイド」で詳しく解説しています。

プログラミングの流れまとめ

1. ファイルを作成（適切な拡張子をつける）
       ↓
2. コードを書く
       ↓
3. ファイルを保存
       ↓
4. ターミナルで実行
       ↓
5. 結果が表示される

この一連の流れを効率よく行うために使うのが、コードエディタなのです。

メモ帳じゃダメなの？

「プログラムってテキストファイルでしょ？メモ帳で書けばいいんじゃない？」

確かに、プログラムはテキストファイルなので、メモ帳でも書くことは可能です。しかし、メモ帳でコードを書くのは、自宅で筋トレするようなものです。

できなくはないけど、ジムに行けば、専用の器具（ダンベル、マシン）が揃っている、トレーナーがフォームを教えてくれる。

コードエディタも同じです。プログラミングを効率よく行うための「器具」や「サポート機能」が揃った環境なのです。

コードエディタを使うメリット

コードエディタには、プログラミングを快適にする機能がたくさん備わっています。

1. シンタックスハイライト（色分け）

コードの種類によって自動で色分けしてくれる機能です。

メモ帳の場合：

function sayHello() {<br> console.log("Hello!");<br> }

全部同じ黒文字で、どこが何かわかりにくい...

コードエディタの場合：

function sayHello() {
    console.log("Hello!");
}

• function → 紫色（キーワード）
• sayHello → 黄色（関数名）
• "Hello!" → オレンジ色（文字列）

色分けされることで、コードの構造が一目でわかります！

2. 自動補完（入力候補の表示）

文字を入力すると、「もしかしてこれ？」と候補を表示してくれます。

例えば con と入力すると：

• console
• const
• confirm

といった候補が表示され、選ぶだけで入力完了。タイプミスも減り、入力スピードも爆上がりです。

3. エラーの検出

コードに間違いがあると、赤い波線で教えてくれます。

pritn("Hello")  # ← 赤い波線が表示される

「pritn じゃなくて print では？」と、実行する前にミスに気づけます。

4. ファイル管理

プロジェクト内のファイルやフォルダを、サイドバーで一覧表示。クリックするだけでファイルを切り替えられます。メモ帳だと、毎回「ファイル→開く」をしないといけませんよね。

5. ターミナル統合

コードエディタの中でターミナル（コマンドを実行する画面）を開けます。別のアプリを立ち上げる必要がなく、コードを書く→実行するがシームレスにできます。

6. Git連携

Git（バージョン管理システム）との連携機能。「いつ、どこを変更したか」を記録できます。これは少し上級者向けなので、最初は気にしなくてOKです。

---

まとめると：

機能	メモ帳	コードエディタ
シンタックスハイライト	❌	✅
自動補完	❌	✅
エラーの検出	❌	✅
ファイル管理	❌	✅
ターミナル統合	❌	✅
Git連携	❌	✅

コードエディタを使うと、これらの機能が使えるようになり、コーディングの効率が格段に上がります。

コードエディタの種類

代表的なコードエディタをいくつか紹介します。

1. Visual Studio Code（VS Code）

• 開発元: Microsoft
• 価格: 無料
• 特徴: 最も人気のあるエディタ。拡張機能が豊富で、あらゆる言語に対応。

2. Cursor

• 開発元: Cursor Inc.
• 価格: 無料プランあり（有料プランあり）
• 特徴: VS Codeをベースに、AIアシスタント機能を強化したエディタ。

3. Sublime Text

• 開発元: Sublime HQ
• 価格: 有料（無料で試用可能）
• 特徴: 軽量で高速。シンプルなUIが特徴。

4. Vim / Neovim

• 開発元: オープンソース
• 価格: 無料
• 特徴: ターミナルベースで動作。習得は難しいが、慣れると最速。

初心者には圧倒的に VS Code をおすすめします。 無料で、使いやすく、情報も豊富だからです。

VS Codeとは

VS Code（Visual Studio Code）は、Microsoftが開発した無料のコードエディタです。2015年にリリースされて以来、急速に普及し、現在では世界で最も使われているコードエディタとなっています。

VS Codeの特徴

1. 無料で使える - 完全無料。商用利用もOK。
2. 軽量で高速 - 起動が速く、サクサク動く。
3. 拡張機能が豊富 - 3万以上の拡張機能で、どんな言語・フレームワークにも対応。
4. クロスプラットフォーム - Windows、Mac、Linuxで使える。
5. Git統合 - バージョン管理がエディタ内で完結。
6. AI機能 - GitHub Copilotとの連携で、AIによるコード補完が可能。

VS Codeのインストール方法

Windowsの場合

1. VS Code公式サイトにアクセス
2. 「Download for Windows」をクリック
3. ダウンロードしたインストーラーを実行
4. 指示に従ってインストール

Macの場合

方法1: 公式サイトからダウンロード

1. VS Code公式サイトにアクセス
2. 「Download for Mac」をクリック
3. ダウンロードした.zipファイルを展開
4. 「Visual Studio Code.app」をApplicationsフォルダにドラッグ

方法2: Homebrewを使う

brew install --cask visual-studio-code

💡 Homebrewについては「Homebrewとは？Macユーザー必見のパッケージ管理ツール」の記事をご覧ください。

VS Codeの画面構成

VS Codeを起動すると、以下のような画面が表示されます。

各部分の説明

1. アクティビティバー（左端）: ファイル、検索、Git、拡張機能などの切り替え
2. サイドバー: アクティビティバーで選択した内容を表示
3. エディタエリア: コードを書く場所
4. パネル: ターミナル、出力、問題などを表示
5. ステータスバー: 現在のファイル情報、行番号などを表示（小さくてすみません💦）

VS Codeの基本操作

フォルダを開く

1. File → Open Folder...（Mac: Cmd + O）
2. 作業したいフォルダを選択
3. 「開く」をクリック

💡 ポイント: VS Codeでは、ファイル単体ではなくフォルダ（プロジェクト）単位で開くのが基本です。

ファイルの作成

1. サイドバーのファイルエクスプローラーで、新規ファイルアイコンをクリック
2. ファイル名を入力（例: index.html）
3. Enterキーで確定

よく使うショートカットキー

操作	Windows	Mac
ファイルを開く	Ctrl + P	Cmd + P
コマンドパレット	Ctrl + Shift + P	Cmd + Shift + P
保存	Ctrl + S	Cmd + S
検索	Ctrl + F	Cmd + F
置換	Ctrl + H	Cmd + Option + F
行のコピー	Alt + Shift + ↓	Option + Shift + ↓
行の移動	Alt + ↑/↓	Option + ↑/↓
コメントアウト	Ctrl + /	Cmd + /
ターミナルを開く	Ctrl + `	Cmd + `

初心者におすすめの拡張機能

VS Codeは拡張機能をインストールすることで、さらに便利になります。

必須級の拡張機能

1. Japanese Language Pack for Visual Studio Code

VS Codeを日本語化する拡張機能。

拡張機能ID: MS-CEINTL.vscode-language-pack-ja

2. Prettier - Code formatter

コードを自動で整形してくれる。インデントや改行を揃えてくれます。

拡張機能ID: esbenp.prettier-vscode

3. ESLint

JavaScriptのコードをチェックして、問題を指摘してくれます。

拡張機能ID: dbaeumer.vscode-eslint

4. Live Server

HTMLファイルをブラウザでリアルタイムプレビューできます。

拡張機能ID: ritwickdey.LiveServer

拡張機能のインストール方法

1. アクティビティバーの拡張機能アイコン（四角が4つ）をクリック
2. 検索ボックスに拡張機能名を入力
3. 「インストール」ボタンをクリック

実際にコードを書いてみよう

簡単なHTMLファイルを作成して、VS Codeの便利さを体験してみましょう。

1. フォルダを作成して開く

mkdir my-first-project
cd my-first-project
code .

code . は現在のフォルダをVS Codeで開くコマンドです。

2. HTMLファイルを作成

1. 新規ファイルを作成し、index.html と名付ける
2. ! を入力してTabキーを押す（Emmet機能）

すると、HTMLの雛形が自動で展開されます！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

3. コードを書いてプレビュー

<body> タグ内に以下を追加：

<body>
    <h1>Hello, World!</h1>
    <p>VS Codeでプログラミングを始めました！</p>
</body>

Live Server拡張機能をインストールしていれば、右下の「Go Live」をクリックするだけでブラウザでプレビューできます。

よくあるトラブルと解決法

Q: 日本語が文字化けする

A: ファイルのエンコーディングを確認しましょう。ステータスバー右下の「UTF-8」をクリックして、「UTF-8 with BOM」を選択してみてください。

Q: ターミナルでコマンドが認識されない

A: PATHの設定が必要かもしれません。VS Codeを再起動するか、コマンドパレット（Cmd + Shift + P）で「Shell Command: Install 'code' command in PATH」を実行してください。

Q: 拡張機能が動かない

A: VS Codeを再起動してみてください。それでも動かない場合は、拡張機能を一度アンインストールして再インストールしてみましょう。

まとめ

• コードエディタはプログラミングに必須のツール
• VS Codeは無料で高機能、初心者に最もおすすめ
• 拡張機能をインストールすることで、さらに便利に
• ショートカットキーを覚えると効率アップ

VS Codeは最初は機能が多くて戸惑うかもしれませんが、使っていくうちに自然と慣れていきます。まずは基本的な操作を覚えて、少しずつ便利な機能を使いこなしていきましょう！