はじめてのNode.js
ブラウザ外で動作するJavaScript
これまで、JavaScriptといえば、ブラウザ上で動作するプログラミング言語でした。Node.jsは、JavaScriptをブラウザ外で動作させるための実行エンジンです。
Node.jsをインストールする方法は様々ですが、現在はnvmと呼ばれるツールが用いられることが多いようです。
macOSの場合は、先に次のコマンドを実行してコマンドラインデベロッ パツールをインストールする必要があります。
xcode-select --install
まずは、nvmのウェブサイトのInstall & Update Script
セクションに書かれているスクリプトを実行しましょう。2024年5月現在では、次の通りです。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
続いて、ターミナルアプリケーションを再起動してから、nvmのインストールが成功していることを確認するため、次のコマンドを実行します。
nvm -v
次のように表示されたら成功です。
$ nvm -v
0.39.7
さらに、次のコマンドを実行して、Node.jsをインストールします。
nvm install --lts
完了したら、Node.jsのインストールが完了しているか確認するため、次のコマンドを実行します。
node -v
次のように表示されたら成功です。
$ node -v
v20.12.2
- macOS
- Windows (WSL)
macOSの場合、インストールコマンドを実行してターミナルを再起動しても、nvm
が使用できない場合があります。その場合、次のコマンドを実行してみてください。
touch ~/.zshrc
Windows上での作業は、WSLのターミナルを利用するようにしましょう。
Node.jsでHello World
まずは、新しいフォルダを作成し、Visual Studio Codeで開きます。macOSの場合ははじめてのWeb開発で作成したprojects
フォルダの中に別のフォルダを作れば問題ありませんが、Windowsの場合はWSL上にフォルダを作成します。
WindowsのWSLでは、エクスプローラーのサイドパネルからLinux
を開いた後、Ubuntu
→home
→[ユーザー名]
の順番でフォルダを開き、そこにprojects
フォルダを作成します。
続いて、開いたフォルダにmain.mjs
ファイルを作成し、下のスクリプトを保存します。拡張子が.mjs
であることに気をつけてください。console.log
関数は、画面に文章を表示させるための関数です。
console.log("Hello World!");
ターミナルを開き、node main.mjs
コマンドを実行します。
ターミナルにHello World!
が表示されれば成功です。
Node.jsのデバッグ
ブラウザの開発者ツールを利用する 節でJavaScriptのデバッグを行ったのと同様に、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。
Node.jsのデバッグを開始するには、ブレークポイント等を設定したうえで、F5
キーを押します。初回はデバッグ構成を選択するメニューが出現するので、Node.js
を選択しましょう。デバッグが開始されると、VS Code下部の青いバーが橙色に変化します。console.log
はDEBUG CONSOLE
タブに出力されるので注意しましょう。
ステップ実行、コールスタックなど、基本的な機能はブラウザに搭載されているものとほとんど同じです。
演習
Node.jsのデバッガを用いて、console
オブジェクトにどのようなプロパティがあるのか調べてみましょう。