メインコンテンツまでスキップ

はじめての Node.js

ターミナル​

ターミナル は、文字を用いてコンピューターと会話するためのソフトウェアです。macOS だと標準搭載の ターミナル が、Windows だと Windows Terminal アプリが利用できますが、VS Code 内蔵のターミナルもなかなか便利です。

VS Code 内蔵のターミナルを起動させるには、メニューの Terminal から New Terminal をクリックします。

新しいターミナルを開く

コマンド パレット

VS Code のコマンド パレットは、現在 VS Code 上で使用できる全ての機能を一覧表示する機能です。command / Ctrl + Shift + P キーを押すことにより起動できます。

次の画像は、コマンド パレットを用いて新しいターミナルを作成する例です。コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみで VS Code が操作できるようになります。

コマンド パレット

Windows 環境でターミナルを使用する場合の注意

WSL 拡張機能を用いて WSL に接続されている場合、起動するターミナルは自動的に WSL のものになります。外部のターミナルアプリケーションを使用する場合は、明示的に WSL を起動させるようにしましょう。

統合ターミナル

ブラウザ外で動作する JavaScript​

これまで、JavaScript といえば、ブラウザ上で動作するプログラミング言語でした。Node.js は、JavaScript をブラウザ外で動作させるための実行エンジンです。

Node.js をインストールする方法は様々ですが、現在は nvm と呼ばれるツールが用いられることが多いようです。

まずは、nvm のウェブサイトの Install & Update Script セクションに書かれているスクリプトを実行しましょう。2023 年 11 月現在では、次の通りです。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

続いて、ターミナルアプリケーションを再起動してから、nvm のインストールが成功していることを確認するため、次のコマンドを実行します。

nvm -v

次のように表示されたら成功です。

$ nvm -v
0.39.5

さらに、次のコマンドを実行して、Node.js をインストールします。

nvm install --lts

完了したら、Node.js のインストールが完了しているか確認するため、次のコマンドを実行します。

node -v

次のように表示されたら成功です。

$ node -v
v20.10.0

macOS の場合、インストールコマンドを実行してターミナルを再起動しても、nvm が使用できない場合があります。その場合、次のコマンドを実行してみてください。

touch ~/.zshrc

Node.js で Hello World​

まずは、新しいフォルダを作成し、Visual Studio Code で開きます。macOS の場合ははじめての Web 開発で作成した Projects フォルダの中に別のフォルダを作れば問題ありませんが、Windows の場合は WSL 上にフォルダを作成します。

WSL 上にプロジェクトフォルダを作る

Windows の WSL では、エクスプローラーのサイドパネルから Linux を開いた後、Ubuntu → home → [ユーザー名] の順番でフォルダを開き、そこに Projects フォルダを作成します。

続いて、開いたフォルダに main.mjs ファイルを作成し、下のスクリプトを保存します。拡張子が .mjs であることに気をつけてください。console.log 関数は、画面に文章を表示させるための関数です。

main.mjs
console.log("Hello World");

ターミナルを開き、node main.mjs コマンドを実行します。

Hello Worldを実行

ターミナルに Hello World が表示されれば成功です。

Node.js のデバッグ​

ブラウザの開発者ツールを利用する 節で JavaScript のデバッグを行ったのと同様に、Node.js では、VS Code 標準の機能を用いてデバッグを行えます。

Node.js のデバッグを開始するには、ブレークポイント等を設定したうえで、F5 キーを押します。初回はデバッグ構成を選択するメニューが出現するので、Node.js を選択しましょう。デバッグが開始されると、VS Code 下部の青いバーが橙色に変化します。console.log は DEBUG CONSOLE タブに出力されるので注意しましょう。

ステップ実行、コールスタックなど、基本的な機能はブラウザに搭載されているものとほとんど同じです。

課題​

Node.js のデバッガを用いて、console オブジェクトにどのようなプロパティがあるのか調べてみましょう。