【Node.js】Visual Studio Code 上で JavaScript を実行する

ツール

目次

記事の目的

GitHub の使い方の勉強に用いたサンプルコードがJavaScriptだった。

全く詳しくないので、JavaScript単体で実行する方法がわからなかった。Node.jsというものを使えばできそう。Visual Studio Code上で実行、完結させる。

~~~追記~~~

JavaScriptはブラウザ(Chrome等)に元から実行環境がくっついているので、適当なhtmlからJSファイルを呼び出せばいいだけの話なのだけれど、pythonみたいにターミナル上からJS単体で呼び出してテストしたい。

そういったときに活躍するのがNode.jsです。これを使ってVSCodeからJS単体で実行する方法を記載しています。

この記事を書いた頃はWeb系の知識が一切無かったので色々とよくわからず触っていました。

Electronフレームワーク等を使用していて感じますがNode.jsは素晴らしいものです。

~~~~~~~~~~

必要なもの

  • Visual Studio Code
  • Node.js

Visual Studio Code

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code を使用して、Azure 上で編集、デバッグ、デプロイを行います。

Node.js

Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

推奨版にしましょう。

インストーラーを実行します。

Next

Next

Next

Next

チェックを付けずにNext

要はネイティブモジュールを使用するために必要なツールを先にインストールしておくかどうかを聞かれています。

ネイティブモジュールとは、開発言語とは別の言語で書かれたモジュールのこと。PythonなのにC/C++言語で書かれたモジュールがあったりしますが、それのことです。言語として提供されていない機能の使用や、速度の向上などの目的で使用されるようです。

また、chocolateyっていうWindowsソフトウェア用のパッケージ管理ソフトウェアもインストールされるから注意してねと言っています。

パッケージ管理ソフトウェアとは、インストーラーをダウンロードしなくてもコマンドラインからインストールしてくれるやつです。ソフトウェア同士の依存関係も管理してくれるえらいやつです。

でも今回は別にそういったツールを使用する予定がないのでチェックはつけません。

Install

あとはインストールされるのを待ちます。

JavaScriptの実行方法

やること

  1. Visual Studio Codeの起動
  2. JavaScriptファイルを開く
  3. Visual Studio Codeのデバッガを使用してデバッグする

Visual Studio Codeの起動

起動するだけ。

JavaScriptファイルを開く

実行したいJavaScriptのあるフォルダを開くかもしくはファイルそのものを開く。

Visual Studio Codeのデバッガを使用してデバッグする

①押して、②押す。

すると下の方のDEBUG CONSOLEに実行結果が表示される。

以上です。簡単でした。

別の方法

Ctrl+@で開くTERMINALに以下を入力すると普通に実行される。

今回はNode.jsインストール時にパスを通したからPowerShellで実行できるってことですね。

node ./[実行したいJavaScriptファイル名]

失敗する場合はnodejsのPathを通しましょう。

インストールディレクトリを変更していなければ、システム環境変数に以下を追加すればよいです。

C:\Program Files\nodejs\

コメント

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