【初心者向け】VSCodeでJavaScript開発環境を整える5ステップ

みなさん、JavaScriptを勉強していて、こんなことを思ったことはありませんか？

「どのエディタを使えばいいの？」「開発環境って、どうやって整えるの？」

JavaScriptを学び始めた方や、より効率的な開発環境を整えたい方にとって、エディタの選択は重要ですよね。特に初心者の方は、どんなツールを使えばいいか迷ってしまうことが多いです。

でも大丈夫です！

この記事では、Visual Studio Code（VSCode）でJavaScript開発環境を整える方法を5つのステップで詳しく解説します。初心者の方でも迷わず進められるよう、具体的な設定方法を交えて説明していきます。

一緒に快適な開発環境を作っていきましょう！

なぜVSCodeがJavaScript開発に最適なの？

VSCodeの魅力を理解しよう

**Visual Studio Code（VSCode）**は、JavaScriptの開発において最も人気のあるエディタの一つです。

簡単に言うと、無料で使えて、とても高機能なプログラミング用のエディタなんです。 Microsoftが開発していて、世界中の開発者に愛用されています。

VSCodeがJavaScript開発者に選ばれる理由をご紹介します。

無料で高機能
軽量で動作が速い
豊富な拡張機能
Git統合機能
デバッグ機能が充実
IntelliSenseによる自動補完
多言語対応

これらの特徴により、初心者から上級者まで、幅広い層に支持されています。特にJavaScript開発では、これ以上ないほど優秀なツールです。

ステップ1: VSCodeのインストールと基本設定

VSCodeをダウンロードしてインストールしよう

まずはVSCodeをパソコンにインストールします。

# 公式サイトからダウンロード
https://code.visualstudio.com/

# macOSの場合（Homebrewを使用）
brew install --cask visual-studio-code

# Windowsの場合（Chocolateyを使用）
choco install vscode

# Ubuntuの場合
sudo snap install code --classic

公式サイトからダウンロードするのが最も確実です。お使いのOSに合わせてダウンロードして、指示に従ってインストールしてください。

コマンドラインを使う場合は、上記のコマンドが便利です。

基本設定を行おう

VSCodeを開いて、まずは基本的な設定を行いましょう。

// settings.json の基本設定
{
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

この設定では、以下のような項目を指定しています。

editor.fontSizeでフォントサイズを14に設定しています。 editor.tabSizeでタブの幅を2文字分に設定しています。 editor.formatOnSaveで保存時に自動フォーマットが有効になります。

設定手順は以下の通りです。

Ctrl/Cmd + , で設定画面を開く
右上の「設定を開く（JSON）」をクリック
上記の設定をコピー&ペースト

日本語化をしよう（オプション）

英語が苦手な方は、日本語化することができます。

1. 拡張機能タブ（Ctrl+Shift+X）を開く
2. "Japanese Language Pack" を検索
3. インストール後、VSCodeを再起動

日本語化すると、メニューやメッセージが日本語で表示されます。英語に慣れたい方は、そのまま英語版を使うのもおすすめです。

ステップ2: JavaScript開発に必須の拡張機能をインストール

必ずインストールしたい拡張機能

JavaScript開発を効率的に行うために、以下の拡張機能をインストールしましょう。

JavaScript (ES6) code snippets

作者: charalampos karypidis
説明: ES6のコードスニペットを提供

この拡張機能では、よく使うJavaScriptのコードを簡単に入力できます。例えば、clと入力してTabキーを押すとconsole.log()が自動で入力されます。

Prettier - Code formatter

作者: Prettier
説明: コードの自動フォーマット

Prettierは、コードを美しく整形してくれる拡張機能です。保存するたびに、インデントや改行を自動で整えてくれます。

ESLint

作者: Microsoft
説明: JavaScriptのコード品質チェック

ESLintは、コードの問題点を指摘してくれる拡張機能です。構文エラーやベストプラクティスに反するコードを教えてくれます。

Bracket Pair Colorizer 2

作者: CoenraadS
説明: 括弧をカラフルに色分け

この拡張機能では、括弧の対応関係が色で分かりやすくなります。ネストが深いコードでも、どの括弧が対応しているかが一目で分かります。

Auto Rename Tag

作者: Jun Han
説明: HTMLタグの自動リネーム

HTMLタグの開始タグを変更すると、終了タグも自動で変更してくれます。 HTMLを扱う場合にとても便利です。

Live Server

作者: Ritwick Dey
説明: ローカルサーバーの簡単起動

Live Serverは、HTMLファイルをブラウザで簡単に確認できる拡張機能です。ファイルを変更すると、ブラウザが自動で更新されます。

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

拡張機能のインストールは、以下の手順で行います。

# コマンドパレット（Ctrl+Shift+P）で一括インストール
ext install ms-vscode.vscode-json
ext install esbenp.prettier-vscode
ext install dbaeumer.vscode-eslint
ext install coenraads.bracket-pair-colorizer-2
ext install formulahendry.auto-rename-tag
ext install ritwickdey.liveserver

コマンドラインでまとめてインストールする方法もあります。ただし、最初は一つずつGUIでインストールすることをおすすめします。

用途別の追加拡張機能

プロジェクトの内容に応じて、以下の拡張機能も検討してみてください。

Node.js開発用の拡張機能

npm Intellisense
Node.js Modules Intellisense
REST Client

React開発用の拡張機能

ES7+ React/Redux/React-Native snippets
React PropTypes Intellisense
Reactjs code snippets

Vue.js開発用の拡張機能

Vetur
Vue 3 Snippets

これらは、特定のフレームワークを使う場合に便利です。

ステップ3: 開発環境の詳細設定とカスタマイズ

ワークスペース設定を行おう

プロジェクトごとの設定ファイルを作成しましょう。

// .vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "files.associations": {
        "*.js": "javascript"
    }
}

この設定では、プロジェクト固有の設定を指定しています。 editor.defaultFormatterで、Prettierをデフォルトのフォーマッターに設定しています。

editor.codeActionsOnSaveで、保存時にESLintの修正も自動で行われます。 emmet.includeLanguagesで、JavaScriptファイルでもEmmetが使えるようになります。

Prettierの設定をカスタマイズしよう

Prettierの詳細な設定を行います。

// .prettierrc
{
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false
}

この設定では、コードフォーマットのルールを指定しています。 semiでセミコロンを付けるかどうかを設定します。

singleQuoteで、文字列をシングルクォートで囲むように設定しています。 printWidthで、1行の最大文字数を80文字に制限しています。

ESLintの設定を行おう

ESLintでコード品質をチェックする設定を行います。

// .eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "no-unused-vars": "warn",
        "no-console": "off",
        "indent": ["error", 2],
        "quotes": ["error", "single"],
        "semi": ["error", "always"]
    }
}

この設定では、JavaScriptのコードチェックルールを指定しています。 envで、ブラウザとNode.jsの環境を有効にしています。

rulesで、具体的なチェック項目を設定しています。 no-unused-varsで、使われていない変数を警告します。

タスクの自動化を設定しよう

よく使うコマンドを自動化します。

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "npm start",
            "type": "shell",
            "command": "npm start",
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        },
        {
            "label": "npm test",
            "type": "shell",
            "command": "npm test",
            "group": "test",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        }
    ]
}

この設定では、よく使うnpmコマンドをタスクとして登録しています。 Ctrl+Shift+Pでコマンドパレットを開いて、「Tasks: Run Task」を選ぶと実行できます。

ステップ4: デバッグ環境の構築

Node.jsデバッグ設定を行おう

JavaScriptのデバッグ環境を整えます。

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Node.js デバッグ",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/index.js",
            "console": "integratedTerminal",
            "skipFiles": ["<node_internals>/**"]
        },
        {
            "name": "現在のファイルをデバッグ",
            "type": "node",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "skipFiles": ["<node_internals>/**"]
        }
    ]
}

この設定では、Node.jsでのデバッグ環境を構築しています。 programで、デバッグするファイルを指定しています。

2つの設定を用意して、メインファイルと現在開いているファイルの両方をデバッグできるようにしています。

ブラウザデバッグ設定も追加しよう

ブラウザでのデバッグも設定します。

// Chrome デバッグ設定
{
    "name": "Chrome デバッグ",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}/src",
    "sourceMaps": true,
    "trace": true
}

この設定では、Chromeブラウザでのデバッグが可能になります。 urlで、デバッグするアプリケーションのURLを指定しています。

デバッグの使用方法を覚えよう

実際にデバッグを使ってみましょう。

// サンプルコード: debug-example.js
function calculateSum(numbers) {
    let sum = 0;
    
    for (let i = 0; i < numbers.length; i++) {
        console.log(`Processing: ${numbers[i]}`); // ログ出力
        sum += numbers[i]; // ←ここにブレークポイントを設定
    }
    
    return sum;
}

const testNumbers = [1, 2, 3, 4, 5];
const result = calculateSum(testNumbers);
console.log(`Result: ${result}`);

このサンプルコードを使って、デバッグの基本的な使い方を学びましょう。 sum += numbers[i];の行にブレークポイントを設定してみてください。

デバッグ手順は以下の通りです。

行番号の左をクリックしてブレークポイントを設定
F5 キーを押してデバッグを開始
ステップ実行でコードの動作を確認

変数の値をリアルタイムで確認しながら、プログラムの動作を理解できます。

ステップ5: 効率化のためのショートカットと機能活用

必須ショートカットを覚えよう

開発効率を大幅に向上させるショートカットをご紹介します。

ファイル操作系のショートカット：

Ctrl/Cmd + N          新しいファイル
Ctrl/Cmd + O          ファイルを開く
Ctrl/Cmd + S          保存
Ctrl/Cmd + Shift + S  名前を付けて保存
Ctrl/Cmd + W          ファイルを閉じる

編集操作系のショートカット：

Ctrl/Cmd + Z          元に戻す
Ctrl/Cmd + Y          やり直し
Ctrl/Cmd + C          コピー
Ctrl/Cmd + V          貼り付け
Ctrl/Cmd + A          全選択

検索・置換系のショートカット：

Ctrl/Cmd + F          検索
Ctrl/Cmd + H          置換
Ctrl/Cmd + Shift + F  フォルダ内検索

ナビゲーション系のショートカット：

Ctrl/Cmd + P          ファイル検索
Ctrl/Cmd + Shift + P  コマンドパレット
Ctrl/Cmd + G          行へ移動
F12                   定義へ移動

マルチカーソル系のショートカット：

Alt + Click           マルチカーソル追加
Ctrl/Cmd + D          同じ単語を選択
Ctrl/Cmd + Shift + L  同じ単語をすべて選択

これらのショートカットを覚えることで、開発速度が格段に向上します。

Emmetで高速HTML作成

EmmetはHTMLを高速で作成できる機能です。

<!-- Emmet記法でHTMLを高速作成 -->

<!-- 入力: div.container>ul.list>li.item*3 -->
<!-- 結果: -->
<div class="container">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

<!-- 入力: script:src -->
<!-- 結果: -->
<script src=""></script>

Emmetを使うと、短い記法で複雑なHTMLが一瞬で作成できます。 .containerでclassを、#headerでidを指定できます。

*3で要素を3つ複製し、>で子要素を作成します。

JavaScriptスニペットを活用しよう

よく使うJavaScriptのコードを素早く入力できます。

// JavaScript スニペット例

// 入力: cl + Tab
console.log();

// 入力: fn + Tab
function functionName() {
    
}

// 入力: for + Tab
for (let i = 0; i < array.length; i++) {
    
}

// 入力: if + Tab
if (condition) {
    
}

スニペットを覚えることで、コードの入力時間を大幅に短縮できます。 clと入力してTabキーを押すだけで、console.log()が完成します。

カスタムスニペットを作成しよう

自分専用のスニペットも作成できます。

// .vscode/snippets.json
{
    "JavaScript関数テンプレート": {
        "prefix": "jsfunc",
        "body": [
            "/**",
            " * $1",
            " * @param {$2} $3",
            " * @returns {$4}",
            " */",
            "function $5($3) {",
            "    $0",
            "}"
        ],
        "description": "JavaScript関数のテンプレート"
    },
    "console.log": {
        "prefix": "clog",
        "body": [
            "console.log('$1:', $1);"
        ],
        "description": "変数名付きconsole.log"
    }
}

この設定では、よく使うコードパターンをスニペットとして登録しています。 jsfuncと入力すると、JSDocコメント付きの関数テンプレートが挿入されます。

clogと入力すると、変数名も一緒に出力するconsole.logが作成されます。

実際の開発フローを体験してみよう

新しいプロジェクトの作成手順

実際にプロジェクトを作成してみましょう。

# 1. プロジェクトフォルダを作成
mkdir my-javascript-project
cd my-javascript-project

# 2. VSCodeで開く
code .

# 3. package.jsonを作成
npm init -y

# 4. 必要な依存関係をインストール
npm install --save-dev eslint prettier

# 5. ESLintとPrettierの設定ファイルを作成
npx eslint --init

この手順に従って、新しいプロジェクトを作成できます。 npm init -yで、package.jsonファイルが自動で作成されます。

開発に必要なツールを--save-devでインストールしています。

日常的な開発フローを身につけよう

実際の開発では、以下のような流れで進めます。

// 1. 新しいJavaScriptファイルを作成
// File: app.js

// 2. 基本的なコード構造を作成
function main() {
    console.log('アプリケーション開始');
    
    // メイン処理
    const data = processData();
    displayResults(data);
}

function processData() {
    // データ処理ロジック
    return [];
}

function displayResults(data) {
    // 結果表示ロジック
    console.log('結果:', data);
}

// 3. 実行
main();

このように、関数を分けて書くことで、コードが読みやすくなります。 main関数から全体の流れを把握できるようにしています。

Live Serverでテストしよう

HTMLファイルを作成して、Live Serverでテストしてみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript テスト</title>
</head>
<body>
    <h1>JavaScript 開発テスト</h1>
    <script src="app.js"></script>
</body>
</html>

この基本的なHTMLファイルに、JavaScriptファイルを読み込んでいます。シンプルな構成で、すぐにテストが始められます。

Live Server起動手順は以下の通りです。

HTMLファイルを右クリック
"Open with Live Server" を選択
ブラウザが自動的に開く

ファイルを編集すると、ブラウザが自動で更新されて便利です。

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

拡張機能が動作しない場合

拡張機能がうまく動作しない場合の対処法をご紹介します。

解決法は以下の通りです。

VSCodeを再起動
拡張機能を無効化→有効化
settings.jsonの設定確認

多くの場合、再起動で解決することが多いです。

ESLintエラーが表示されない場合

ESLintが正しく動作しない場合の対処法です。

確認すべき点は以下の通りです。

ESLint拡張機能がインストールされているか確認
.eslintrc.jsonファイルがプロジェクトルートにあるか確認
"ESLint: Enable" がオンになっているか確認

設定ファイルの場所と内容を再確認してみてください。

Prettierが自動フォーマットしない場合

Prettierの自動フォーマットが動作しない場合の対処法です。

確認すべき設定は以下の通りです。

"editor.formatOnSave": true が設定されているか確認
"editor.defaultFormatter": "esbenp.prettier-vscode" が設定されているか確認
.prettierrcファイルの構文エラーをチェック

設定の順番や記述ミスがないか確認しましょう。

パフォーマンスを向上させよう

VSCodeの動作を軽くする設定をご紹介します。

// settings.json でパフォーマンス改善
{
    "files.exclude": {
        "**/node_modules": true,
        "**/.git": true,
        "**/.DS_Store": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.watcherExclude": {
        "**/node_modules/**": true
    }
}

この設定では、不要なファイルを検索や監視の対象から除外しています。特にnode_modulesフォルダは、除外することで大幅にパフォーマンスが向上します。

まとめ：快適な開発環境を手に入れよう

VSCodeでJavaScript開発環境を整える5つのステップについて詳しく解説しました。

重要なポイントをまとめると以下の通りです。

基本設定: エディタの基本設定とカスタマイズ
拡張機能: 開発効率を向上させる必須ツール
環境設定: PrettierとESLintによるコード品質管理
デバッグ設定: 効率的な問題解決環境
ショートカット活用: 開発速度の向上

継続的な改善の心がけ：

快適な開発環境を維持するために、以下を意識しましょう。

新しい拡張機能の探索
ショートカットの習得
設定の最適化
チーム開発への対応

この環境を整えることで、JavaScriptの学習と開発がより効率的で楽しいものになります。

まずは基本的な設定から始めて、徐々に自分好みの開発環境にカスタマイズしていきましょう。 VSCodeを使いこなすことで、プログラミングスキルも向上していきます。

ぜひ今日から、これらの設定を活用して快適なJavaScript開発を始めてみてください！きっと開発が今まで以上に楽しくなりますよ。