Visual Studio Code で JavaScript を実行する代替方法 (Japanese)

Visual Studio Code で JavaScript を実行する (Japanese)

デバッグコンソールを使用する

• ステップ 1: JavaScript ファイルを開きます。
• ステップ 2: デバッグビュー (通常はサイドバーの虫アイコン) に移動します。
• ステップ 3: "Add Configuration..." ボタンをクリックして、新しいデバッグ構成を作成します。
• ステップ 4: "Node.js" テンプレートを選択し、必要に応じて設定を調整します。
• ステップ 5: デバッグビューの緑色の再生ボタンをクリックして、デバッグを開始します。
• ステップ 6: デバッグコンソールで JavaScript コードの実行結果を確認します。

ターミナルを使用する

• ステップ 1: VSCodeのターミナルを開きます (メニューバーの "Terminal" > "New Terminal" を選択)。
• ステップ 2: ターミナルで JavaScript ファイルのパスを入力し、Enterキーを押します。
• ステップ 3: Node.jsの実行コマンド (通常は node filename.js) を入力して、コードを実行します。

タスクランナーを使用する

• ステップ 1: VSCodeのタスクビュー (通常はサイドバーのスクリュードライバーアイコン) に移動します。
• ステップ 2: "Configure Task" ボタンをクリックして、新しいタスクを作成します。
• ステップ 3: "Create a new task" を選択し、"type" を "shell" に設定します。
• ステップ 5: タスクビューでタスクを実行します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

index.js ファイル:

console.log("Hello, world!");

console.log("Hello, world!");

ターミナルで実行:

node index.js

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "Run JavaScript",
            "command": "node",
            "args": ["${file}"]
        }
    ]
}

タスクを実行:

• タスクビューで "Run JavaScript" タスクを選択して実行します。

これらの例では、以下のポイントに注意してください:

• デバッグコンソール: デバッグビューでデバッグを開始すると、デバッグコンソールに実行結果が表示されます。
• ターミナル: ターミナルで node コマンドを使用して、JavaScriptファイルを直接実行します。
• タスクランナー: タスクビューで定義したタスクを実行することで、JavaScriptファイルを自動的に実行できます。

コードランナー拡張

• インストール: VSCodeの拡張機能マーケットプレイスから "Code Runner" 拡張をインストールします。
• 実行: JavaScriptファイルを開き、右クリックして "Run Code" を選択するか、ショートカットキー (Ctrl+Alt+N) を使用します。

Node.js インタラクティブシェル

• 起動: VSCodeのターミナルで node コマンドを実行します。
• 実行: インタラクティブシェルで JavaScript コードを入力し、Enterキーを押します。

JavaScript REPL

• 実行: 拡張機能のアイコンをクリックして、REPLを開き、JavaScriptコードを入力します。

Webブラウザの開発者ツール

• 開く: Webブラウザの開発者ツールを開きます (通常は F12 キー)。