Node.jsの実行環境を作成する

こんにちは!筆者のhima-codeです。今回は「Node.js」の実行環境をWindowsで作成する記事を書いていきます。「Node.js」の実行環境を用意できれば、「JavaScript」を使ってプログラミングを初めてみたいといった方もプログラムを実行できるようになりますし、ReactなどのWebフレームワークなどはこの「Node.js」の実行環境がなければ動かすことができないので、これからプログラミングの基礎的なことを初めて見たい方は是非最後までハンズオン形式で記事の通りに環境を作成してみてください。

1.Voltaのインストールをする

なぜ「Node.js」の話をしているのに違う名前のソフトを入れるのかということを疑問に感じる方がいらっしゃるかもしれないため、初めに解説しておくと「Volta」は「Node.js」のバージョンを管理してくれるツールになります。直接PCにNode.jsをインストールしてもいいかとは思うのですが、プロジェクトをいくつか並走しているとプロジェクトごとに使用するNode.jsのバージョンが違うことがあります。毎回Node.jsをプロジェクトを切り替えるために今インストールされているバージョンを消して、新たにインストールするのは非常に面倒です。そのため、バージョンを切り替えることができるツールがあるということを知ってから始めたほうが、後々のことを考えるとメリットが大きいと思い、多少最初のハードルが高いのですが、「バージョン管理ツール」から実行環境を作成することを選択します。

前置きが長くなりましたが、「コマンドプロンプト」を開いて下記のコマンドを入力します。

$ winget install Volta.Volta

そうすると、利用規約に同意するかを聞かれるので「Y」を押して次に進みます。

インストールが完了すると、下の画面が表示されます。これで「Volta」のインストールは終了になります。

2.「Node.js」をインストールする

「Volta」のインストールが完了したら、次にPCで利用するデフォルトのバージョンを指定します。インストールされたバージョンがデフォルトで使用するバージョンになります。今回は「LTSバージョン」を使用するため下記のコマンドを「コマンドプロンプト」で実行します。

$ volta install node

また、特定のバージョンを指定する場合には下記のコマンドを使用してインストールすることも可能です。

$ volta install node@<バージョン名>

インストールが完了したら続けて、コマンドライン上に下記のコマンドを実行して、無事にインストールが完了しているかを確認します。

$ node -v

バージョンが表示されたら無事に「Node.js」を使用できるようになりました!

3.Node.jsでJavaScriptを実行(オプション)

ここからは、JavaScriptファイルを作成して、実際のプログラムを実行する手順になりますので、VSCodeというコードエディタを使用してプログラムファイルを作成していきます。まだインストールしていない方はインストールしてみましょう。

ちなみに、手順に関して調べるのが面倒な方は、別途記事を書いているので、それを参考に「VSCode」をインストールしてみましょう。

VSCodeインストール手順(Windows)

拡張子が「js」のファイルを実行するための実行環境が「Node.js」ですので、試しに「main.js」というファイルを作成して「コマンドプロンプト」から実行してみましょう。まず初めに「code」フォルダをユーザーフォルダ内に作成します。

$ cd %USERPROFILE%
$ mkdir code

「cd」はチェンジディレクトリのコマンドで指定したパスに移動することができます。%USERPROFILE%はWindowsの環境変数で設定されているパスで現在のユーザーの情報が格納されているフォルダへのパスとなります。

「mkdir」はメイクディレクトリというコマンドで、指定された名前を現在のディレクトリ内に作ります。今回は「code」というディレクトリを作成しました。ちなみにディレクトリとフォルダはほぼ同一の意味で使用しているので、とりあえずディレクトリ=フォルダという認識でOKです。

そうしたら、「code」ディレクトリに移動して、VSCodeを開きます。コマンドプロンプトで続けて以下のコマンドを入力することで、上記の操作を行います。

$ cd code

$ code .

「code」コマンドはデフォルトで設定されているエディタを開きます。上記の記事の通りに「VSCode」をインストールしていれば、「PATHへの追加」をしているので現在のディレクトリを「VSCode」で開くことができます。「.」は現在のディレクトリの場所を開くパスを表します。任意の場所のディレクトリを開く場合には

$ code <フォルダへのPath>

このようなコマンドを実行することで開きたいフォルダをVSCodeで開くことができます。

そうしたら次にVSCode上でファイルを作成します。下記の画像の赤枠のところをクリックします。

ファイル名を入力します。今回は「main.js」というファイル名でファイルを作成します。

ファイルを作成したら、main.jsに下記のコードを書き込みます。

condole.log('こんにちは!')

書き込んでセーブしたら、上のメニューバーの「ターミナル」から「新しいターミナル」をクリックしてコマンドラインツールを開きます。下図の画面が表示されたら下記のコマンドを入力します。

$ node main.js

コマンドを入力したら「Enter」ボタンを押して実行してください。

上図のようにターミナルに「こんにちは!」と表示されれば、「Node.js」が正常にインストールされていることが確認できます。

4.最後に

ここまでお読みいただきありがとうございます。「JavaScript」の実行環境である「Node.js」をインストールすることで、パッケージ管理ソフト「npm」なども使用できるようになり、いろいろなJavaScriptライブラリ(React等)で開発をする際には必須の環境構築であるため、参考になれば幸いです。