Zenn
🫐

【初心者向け】WindowsでNode.js入門　インストールからデバッグまで

に公開
JavaScript
Node.js
Windows
nvm
初心者向け
tech

🔖 記事の概要

Node.jsはJavaScriptで書かれたコードをサーバーサイドやローカルPC上で実行できる強力な実行環境です。この記事ではNode.jsのインストールからテストプログラムの作成、デバッグまでのひと通りの流れを分かりやすく解説します。

🔖 対象読者

  • Node.js をこれから始めたいと思ってる初心者のかた
  • Windows ユーザー

🔖 NVM for Windows のインストール

NVM for Windoes（nvm-windows）はNode.jsのバージョン管理ツールです。これを使用すればNode.jsのバージョンを簡単に切り替えることができます。Node.jsの特定のバージョンを直接PCにインストールしてもいいですが、nvm-windows経由でNode.jsをインストールしたほうが後々楽です。

nvm-windowsのセットアップファイルはGitHubにあります。Releasesページにあるnvm-setup.exeをダウンロードして実行するとセットアップが始まります。セットアップ中、特に難しいところはありません。デフォルトのままで基本OKです。

nvm-windowsセットアップ画面

セットアップが終わったらコマンドプロンプトを立ち上げ、次のコマンドを実行してみましょう。

nvm -v

コマンドを実行してnvm-windowsのバージョンが表示されればセットアップは完了です。

🔖 Node.js のインストール

nvm-windowsがセットアップ出来たら、次にNode.jsをインストールします。
最新版のLTS（長期サポート版）をインストールするには以下のコマンドを実行します。

nvm install lts

インストールが完了したら、次のコマンドでそのバージョンを有効化します。

nvm use lts

動作確認には以下のコマンドを使います。

node -v
npm -v

コマンドを実行してNodeのバージョンとnpmのバージョンが表示されればインストールは成功です。

🔖 Hello World の作成

Node.jsのインストールが終わったら、Hello Worldプログラムを作って実行してみましょう。

適当なプロジェクトフォルダ（Hello など）を作って、エディタなどを使って以下のプログラムファイルを作成します（エディタはメモ帳などで構いません）。

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

できたらコマンドプロンプトを立ち上げ、プロジェクトフォルダに移動し次のコマンドを実行します。

node hello.js

画面にHello, world!と表示されれば成功です。

🔖 デバッグしてみよう

プログラムはデバッグできるかどうかで開発効率が大きく変わってきます。バグが発生したときに、１行ごとに処理の流れを追うことができれば、問題個所の早期発見と修正に大いに役立ちます。これを実現するのがデバッグ機能です。

Visual Studio Code のインストール

デバッグするにはさすがにメモ帳では難しいです。まずは、先程も紹介したVisual Studio Codeをインストールしましょう。インストールは簡単で迷うところはありませんが、インストーラの最後に表示される以下のオプションにチェックを入れておくと後々便利です。

  • エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
  • エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する

テストプログラムの作成

先程作成した Hello World プログラムではデバッガのありがたみが分かりにくいので、プログラムを以下のように書き換えます。

hello.js
// 1から10までの足し算
let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
console.log("Sum : " + sum);

書き換えたらとりあえず実行してみましょう。

Visual Studio Codeのメニューから「表示」－「ターミナル」と選択すると、ソース画面の下にターミナルが表示されます。そこで次のようにコマンドを実行します。

node hello.js

画面にSum : 55と表示されればとりあえずOKです。

デバッグしてみよう！

次はいよいよ実際にデバッグしてみましょう。

Visual Studio Codeのプログラムが表示されている画面で、行番号の左横をマウスでクリックすると赤い丸が付くと思います（下図参照）。これがいわゆるブレークポイントと呼ばれるもので、デバッグ実行するとプログラムがこの行で一時停止して、その時点の変数の値などを確認できます。ここでは４行目のsum += i;の行にブレークポイントを置いてみましょう。

ブレークポイントの設定
ブレークポイントの設定

ブレークポイントを置いたら、デバッグ実行してみましょう。

まず、Visual Studio Codeの左端にあるアイコンの中から「実行とデバッグ」（三角マークに虫のデザイン）を選択します。次に右横に表示される「実行とデバッグ」ボタンを選択するとデバッグ実行が開始されます。

デバッグ実行の開始
デバッグ実行の開始

ボタンを押すとデバッグ実行が開始され、ブレークポイントの行で実行が止まります。

デバッグ実行で停止したところ
デバッグ実行で停止したところ

ソースの左にあるウィンドウには変数の値が表示されています。ローカルと書かれたツリーをクリックして展開すると、sum変数の値が0であることが分かります（sum += i;が実行される直前で止まっています）。

ここでプログラムの実行を１行進めてみましょう。１行進めるにはF10キーを押します（ステップオーバー）。するとプログラムのsum += i;が実行され、for文に制御が移ります。左側の変数ウィンドウを見るとsum変数の値が1に変わっていることが分かります。

１行ステップオーバーしたところ
１行ステップオーバーしたところ

再度F10キーを押すと、今度はfor文のi++が実行され、変数iの値が更新されます。このように１行１行実行しながらプログラムの状態を確認することで、問題が何処にあるのかが発見しやすくなります。

プログラムが思った通りに動いてくれないのは、原因となりそうな場所にブレークポイントを設置して動きを確認してみることが、問題解決への近道です。

🔖 まとめ

以上で、Windows上でNode.jsを始めるための基本準備は完了です。

  • nvm-windowsの導入：Node.jsのバージョンを簡単に切り替えられる環境を構築しました。
  • Node.jsのインストールと実行確認：LTS版のNode.jsを導入し、node -v と npm -v で動作を確認しました。
  • Hello Worldプログラムの作成：最初のNode.jsスクリプトを書いて、実行する流れを学びました。
  • Visual Studio Codeによるデバッグ：ブレークポイントやステップ実行を使って、コードの動きを1行ずつ追いかける方法を体験しました。

これでNode.jsを使って学習や開発を進める土台ができたので、次のステップに進めるはずです。

まずは小さなツールからはじめて、いずれは本格的なアプリケーションを目指しましょう。

たくさん作って、たくさん学んで、プログラミングを楽しんでください。

それでは。Happy Coding!

Discussion