VSCodeでJavaScriptが実行できない原因と解決方法まとめ

JavaScript

JavaScript（JS）の学習を始めたばかりの方が、一番最初にぶつかる大きな壁は「コードの書き方」ではなく、実は「書いたコードが動かない（実行できない）」という環境面の問題です。

VSCode（Visual Studio Code）は非常に強力なエディタですが、メモ帳のように「ただ文字を打つだけ」ではJavaScriptは動きません。そこには特有のルールや、実行するための準備が必要です。

本記事では、現役のエンジニアが現場で培った「デバッグ（不具合修正）の思考プロセス」をベースに、VSCodeでJavaScriptが実行できない原因と解決策を徹底解説します。この記事を読めば、あなたのコードが動かない原因が必ず見つかり、スムーズに開発を再開できるはずです。

VSCodeでJavaScriptが実行できない主な原因

「コードを書いたのに、何も起きない」「エラーが出て止まってしまう」という状況に陥ったとき、焦ってコードを書き直す前に、まずは以下の4つのポイントを確認しましょう。JavaScriptが実行できない原因のほとんどは、このどれかに当てはまります。

  1. JavaScriptファイルの保存ミス: ファイル名や保存状態が適切でない。
  2. 実行環境（プラットフォーム）がない: どこで動かそうとしているのかが不明確。
  3. 実行方法が間違っている: 実行するためのコマンドや手順が抜けている。
  4. コードの記述ミス: プログラムの文法自体が間違っている。

初心者のうちは「自分の才能がないのでは？」と不安になるかもしれませんが、安心してください。プロのエンジニアでも、単純なファイル保存忘れやスペルミスで30分悩むことは日常茶飯事です。まずは原因を一つずつ切り分けていきましょう。

JavaScriptファイルが正しく保存されているか確認する

何はともあれ、まずは「土台」となるファイルの確認からです。ここが間違っていると、どんなに正しいコードを書いても絶対に動きません。

拡張子が .js になっているか

VSCodeは、ファイルの末尾につく「拡張子」を見て、そのファイルが何語（言語）で書かれているかを判断します。

  • 正しい例：script.js
  • 間違い：script.js.txt / script.JS（大文字） / script.jｓ（全角）

特にWindowsの設定で「登録されている拡張子を表示しない」設定になっている場合、自分では .js にしたつもりでも、実際は script.js.txt になっているケースが非常に多いです。VSCodeのエクスプローラーで、アイコンがJavaScriptのロゴ（黄色いJSマーク）になっているか必ず確認してください。

保存場所が間違っていないか

「HTMLからJSを読み込んでいるのに動かない」という場合、HTMLファイルとJavaScriptファイルが同じフォルダにない、あるいはフォルダ階層の指定が間違っていることが多々あります。 VSCodeの左側パネル（エクスプローラー）を見て、今編集しているファイルが意図したプロジェクトフォルダの中に存在するかチェックしましょう。

保存できているか

VSCodeのタブ部分に「白い丸」が出ていませんか？

これは「変更したけれど、まだ保存（確定）されていない」というサインです。初心者に驚くほど多いのが、「コードを修正したけれど、保存していないので古い（動かない）状態のまま実行しようとしている」パターンです。 必ず Ctrl + S（Macは Cmd + S）を押して、白丸が消えたことを確認してから実行しましょう。

ブラウザで実行している場合の確認ポイント

JavaScriptを「Webサイトの動き」としてブラウザ（Chromeなど）で動かそうとしている場合、HTMLとの連携が鍵になります。

scriptタグが正しく書けているか

HTMLファイル内でJavaScriptを読み込むための <script> タグの記述を確認してください。

<script src="script.js"></script>
  • src が scr になっていませんか？
  • タグを閉じ忘れていませんか？（<script> は必ず </script> で閉じる必要があります）

読み込みパスが正しいか

HTMLファイルから見たJavaScriptファイルの場所（パス）が正しいか確認しましょう。

  • 同じフォルダにあるなら：src=”script.js”
  • jsフォルダに入っているなら：src=”js/script.js”
    この指定が1文字でも違うと、ブラウザはJavaScriptを見つけることができず、実行を諦めてしまいます。

ブラウザの開発者ツールでエラーを確認する

JavaScriptが動かないとき、ブラウザは裏側でこっそり「動かない理由」を教えてくれます。

  1. ブラウザ（Chrome）で自分のページを開く。
  2. F12キー（Macは Cmd + Option + I ）を押して「開発者ツール」を開く。
  3. 「Console（コンソール）」タブをクリックする。

ここに赤い文字が出ていれば、それが答えです。「File not found」ならファイルが見つからない、「Syntax Error」ならコードの書き間違いです。この画面を出す習慣をつけるだけで、解決スピードは10倍になります。

VSCodeで直接実行しようとしている場合の確認ポイント

「HTMLを使わず、VSCodeのターミナル画面で結果（計算結果など）を出したい」という場合、初心者の方は一つの大きな誤解をしていることがあります。

JavaScriptはそのままではVSCode単体で実行できない

ここが重要です。実は、VSCode自体にはJavaScriptを「計算・実行」する機能はありません。VSCodeはあくまで高機能な「筆記用具（エディタ）」に過ぎません。 JavaScriptをパソコン上で動かすには、「実行エンジン（ブラウザやNode.js）」というエンジンが別途必要です。

Node.js が必要なケース

ブラウザを使わずにJavaScriptを実行したいなら、自分のPCに「Node.js」という環境をインストールする必要があります。 Node.jsをインストールすると、VSCodeの下部にある「ターミナル」という黒い画面でJavaScriptを動かせるようになります。

ターミナルで実行方法が間違っていないか

Node.jsが入っている環境で、実行コマンドが正しいか確認しましょう。

  • 正しいコマンド：node ファイル名.js
  • よくあるミス：javascript file.js と打ってしまう（ node が正しいコマンドです）。

また、ターミナルで「現在いる場所（カレントディレクトリ）」が、そのファイルがあるフォルダと一致しているかも重要です。

コードの記述ミスを確認する

環境が正しくても、中身の「文法」が間違っていれば動きません。初心者がハマりやすい三大記述ミスを紹介します。

スペルミス

JavaScriptは大文字と小文字を厳格に区別します。

  • console.log( ) を Console.log( ) と書くと動きません。
  • 変数名 userName と username は別物です。
    VSCodeで文字の色が変わっていない（ハイライトされていない）部分は、スペルミスの可能性が高いです。

括弧・波括弧の閉じ忘れ

if文や関数などで使う ( ) や { } のペアが崩れていると、プログラムは「どこまでが命令か」わからなくなり、エラーになります。

VSCodeの最新機能では、ペアになる括弧に色がつくようになっています。色が合っていない、あるいは括弧が余っている・足りない場所がないか探しましょう。

セミコロン・記号ミス

  • 文末の ; （セミコロン）を忘れていないか（最近のJSは省略可能ですが、初心者は打つ癖をつけたほうが安全です）。
  • ” （ダブルクォーテーション）と ‘ （シングルクォーテーション）が混ざっていないか。
  • 全角スペースが混じっていないか（これが最も見つけにくいエラーです）。

エラーメッセージ別の対処法

ターミナルやブラウザのコンソールに表示される「エラーメッセージ」は、解決のための地図です。よく出る3つを解説します。

Unexpected token …

「予想外の記号があるよ」という意味です。
主に、括弧の閉じ忘れや、カンマ , の打ち忘れ、あるいは全角スペースが混じっているときに出ます。エラーが出ている行の「一箇所前」をよく確認してください。

… is not defined

「その名前、知らないよ（定義されていないよ）」という意味です。
変数名のスペルミス、あるいは変数を定義する前に使おうとしたときに出ます。 let や const で正しく宣言しているか確認しましょう。

Cannot read properties of undefined

「空っぽのものから、何かを取り出そうとしているよ」という意味です。
中上級者でも悩まされるエラーですが、初心者においては「存在しないHTML要素を操作しようとした」際によく出ます。HTMLの id 名が間違っていないか確認してください。

JavaScriptをスムーズに実行するためのおすすめ環境

エラーに悩まされる時間を減らすために、以下のツールを導入しましょう。

  1. Live Server (拡張機能): HTML/JSの変更を即座にブラウザに反映します。
  2. Code Runner (拡張機能): ボタン一つでNode.js経由の実行ができるようになります。
  3. ブラウザ開発者ツール: 前述の通り、常に開いておくのがプロの鉄則です。

JavaScript実行時のトラブルを減らすコツ

管理人
管理人

最後に、私が実践している「トラブルを未然に防ぐ習慣」を伝授します。
どれも基礎的な習慣です。

こまめに保存する

1行書いては保存、1行書いては確認。一気に100行書いてから実行すると、どこでエラーが起きたか特定するのに時間がかかります。

console.logで確認する

「この行までちゃんと動いているかな？」と不安になったら、すぐに console.log("ここまでOK"); と書いて、実行結果を確認しましょう。これを「デバッグプリント」と呼び、エンジニアの基本スキルです。

エラー文を読む習慣をつける

英語のエラーメッセージが出ると、つい画面を閉じたくなりますが、そこには答えが書いてあります。エラー文をコピーしてGoogleやChatGPTに貼り付けるだけで、解決策の8割は手に入ります。

まとめ

VSCodeでJavaScriptが動かないときのチェックリストです。

  • 保存確認: 拡張子は .js か？白い丸（未保存）はないか？
  • 読み込み確認: HTMLの script タグのパスは正しいか？
  • 実行環境の確認: ブラウザで動かすのか、Node.jsで動かすのか？
  • エラーの確認: コンソールやターミナルのエラーメッセージを読んだか？

JavaScriptは、一度動き始めると最高に楽しい言語です。エラーはあなたのスキルが伸びている証拠ですので、落ち着いて一つずつ原因を潰していきましょう。

タイトルとURLをコピーしました