Alex Ruben
Visual Studio Code で JavaScript コードを実行する方法: 簡単なステップバイステップガイド
ブラウザ外でウェブスクリプトをテストしたり開発したりする場合、Visual Studio CodeでJavaScriptを実行することは必須と言えるでしょう。しかし、必ずしも簡単とは限りません。設定が少し複雑だったり、VS Codeがうまく動作しなかったりすることもあります。このガイドでは、基本的な手順を解説するとともに、困った時に役立ったヒントもいくつかご紹介します。
ステップ1: Node.jsをインストールする
まず最初に、Node.js についてです。Node.js は基本的に、ブラウザを必要とせずにターミナルで JavaScript コードを実行できるツールです。Node.js がないと、編集のみで実行はできません。
Node.js をインストールするには:
- 公式 Node.js ウェブサイトにアクセスします。
- お使いの OS のインストーラーを入手してください。Windows、Mac、Linux など、何でも構いません。
- インストーラーを実行し、プロンプトに従って操作してください。セットアップ中にNode.jsをPATHに追加するチェックボックスをオンにしてください。これにより、
nodeどのフォルダからでも簡単に実行できるようになります。
インストール後、ターミナル（コマンドプロンプト、PowerShell、macOSのターミナルなど）を開き、 と入力してくださいnode -v。バージョン番号が表示されれば問題ありません。表示されない場合は、PATHの設定が間違っているか、インストーラが動作していない可能性があります。よくあることです。
ステップ2: Node.jsのインストールを確認する
node -v数字が表示されれば、Node.jsは正しくインストールされていることを意味します。そうでない場合は、ターミナルを再起動するか、再起動してみてください。それでも問題が解決しない場合は、インストール手順をもう一度確認してください。Windowsでは権限に関する問題が発生する場合がありますので、ターミナルを管理者として実行すると解決する場合があります。
ステップ3: Visual Studio Codeを開く
VS Codeを起動します。古いバージョンは、特に拡張機能にバグが発生する可能性があるため、最新バージョンであることを確認してください。
ステップ4: コードランナー拡張機能をインストールする
これを使えば、毎回ターミナルを開かなくてもJSを簡単に実行できます。インストール方法：
- 押すとCtrl + Shift + X拡張機能ビューが開きます。
- Code Runnerを検索します。
- Junhanの拡張機能をインストールしましょう。信頼性が高く、使い方も非常に簡単です。インストールすると、エディターの右上付近に小さな再生アイコンが表示されます。
この拡張機能は、ターミナルコマンドを煩わすことなく、エディタからワンクリックまたはショートカットで直接コードを実行できるため便利です。理由は定かではありませんが、特に環境が適切に設定されていない場合、組み込みの実行オプションが不安定になることがあります。
ステップ5: JavaScriptファイルを開く
ファイルを開いてください。右上にある.js小さな実行アイコン（三角形）を探してください。見つからない場合は、エディター内で右クリックして「コード実行」を選択してください。このアイコンがデフォルトで表示される設定は限られているため、代替手段としてご利用ください。
ステップ6: コードを実行する
実行アイコンをクリックするか、 を押しますCtrl + Alt + N。コードが実行され、VS Codeの下部にあるターミナルパネルに出力が表示されます。必ずファイルを保存してください。保存しないと古いバージョンが実行されてしまいます。これは面倒ですがよくあることです。
追加のヒントとよくある問題
人々がつまずく原因は以下のとおりです。
- コードが
.js拡張子付きで保存されていることを確認してください。拡張子がない場合、実行できません。 - 何も表示されない場合は、ターミナルでエラーがないか確認してください。構文の問題が原因で、何も表示されずに失敗する場合もあります。
- VS Code のターミナルが適切な環境に設定されているか確認してください。Windows では PowerShell を使用している可能性がありますが、通常は問題なく動作します。ただし、cmd や Git Bash に切り替えた場合は、環境が
nodeコマンドを認識していることを確認してください。 - 設定によっては、初回実行が失敗したり、何も実行されなかったりすることがあります。VS Codeまたはマシンを再起動すると、多くの場合問題が解決します。Windowsは、場合によっては必要以上に複雑な処理をしなければならないためです。
VS CodeでJSを実行する他の方法
Code Runner 拡張機能が動作しない場合、または別のアプローチを好む場合は、統合ターミナル経由で JS を実行することもできます。
- VS Code でターミナルを開きます ( [表示] > [ターミナル]またはCtrl + \`)。
- を使用してスクリプトのあるフォルダーに移動します
cd path/to/your/file。 - 入力し
node filename.jsてクリックしますEnter。簡単です。
この方法は、特に VS Code の拡張機能が期待どおりに動作しないセットアップでは、一部の拡張機能よりも制御性が高く、不安定さが少なくなります。
最後のヒント
VS Code または Node.js はアップデート後に同期が失われることがあります。問題が発生した場合は、拡張機能を再インストールするか、 を削除して再作成してみsettings.jsonてください。また、PATH環境変数が正しく Node.js を指しているかどうかもご確認ください。
よくある質問
Node.js は何に使用されますか?
Node.jsは基本的に、ブラウザ外でJavaScriptを実行するためのバックボーンであり、サーバー、スクリプト、ツールなどに便利です。Node.jsがなければ、ブラウザコンソールしか選択肢がなく、簡単なテストには適していますが、大規模な開発には限界があります。
Node.js なしで JavaScript を実行できますか?
はい、ブラウザでコンソールを開いて（キーを押すF12か右クリックして「検査」を選択）、あとは入力するだけです。ただし、スクリプト、特に自動化やバックエンド関連のスクリプトには、Node.jsが最適です。
VS Code で JavaScript をデバッグするにはどうすればよいですか?
ブレークポイントを設定し、組み込みのデバッガーを使用します。起動設定を微調整する必要があるかもしれませんが、一度動作するようになれば非常に強力です。デバッガータブからJSファイルにブレークポイントを読み込むと、作業が楽になります。
まとめ
- Node.jsが起動して実行されていることを確認してください。
node -v - Code Runnerをインストールするか、ターミナルを使用してスクリプトを実行します。
- JSファイルを
.js拡張子付きで保存する - 実行してターミナルで出力を確認します
これで誰かの時間を少しでも節約できればいいのですが。というのも、VS Code を JavaScript 用にセットアップするのは、以前は予想以上に面倒だったからです。