【Node.js実戦習得】第2回:WSL2(Ubuntu)への環境構築と最初のスクリプト実行

社員ブログ

なぜWindows的生環境ではなく「WSL2」なのか

酒本先輩、さっそく僕のパソコンにNode.jsの環境を作りたいんですけど、Windowsに直接インストーラーをダウンロードして入れる形でいいですか?

いや、次の現場がNode.jsということは、本番環境はおそらくLinux(UbuntuやAmazon Linuxなど)のコンテナで動いている可能性が高い。

開発環境も本番に合わせた方がトラブルが少ないから、今回はWSL2(Windows Subsystem for Linux)上のUbuntuの中に構築しよう。

わかりました。

WSL2のUbuntu自体は、前の案件で構築したものが入っているので起動できます!

それは手離れが良くて助かる。

じゃあ、Ubuntuのターミナルを開いて進めていこう。

どのツールを使ってNode.jsを入れるべきか

Ubuntuのパッケージ管理コマンドなら少し分かります。

sudo apt install nodejs って叩けば入りますか?

ちょっと待って。

apt で入れるのはおすすめしないんだ。

バージョンが古かったり、あとでバージョンの切り替えが必要になったときに面倒なことになる。

実務では、プロジェクトごとに『このバージョンを使って開発してください』って指定されることが普通なんだ。

だから、直接入れるんじゃなくて、複数のバージョンを簡単に切り替えられるバージョン管理ツールを経由して入れるのが鉄則だよ。

バージョン管理ツール……。

Node.jsって、1つのパソコンに何種類も入れ直したりするんですね。

全然知りませんでした。

そうなんだよ。

ネットで調べるといろんなツールがお勧めされていて初心者だと迷うと思うんだけど、今回は fnm(Fast Node Manager) というツールを使おう。

いろんな種類があるんですか?

どれを使っても同じ、というわけではないんですね。

良い着眼点だね。

ちょっと専門的な話になるけど、なぜ数あるツールの中から fnm を選んだのか、理由を3つに絞って教えておくよ。

💡 酒本先輩のワンポイント解説:なぜ「fnm」を選ぶのか?

  1. 圧倒的に動きが「速い」から
    昔からある有名なツールは、ターミナル(黒い画面)を開くたびに少し起動を待たされる特性があったんだ。
    でも fnm はRust(ラスト)という非常に高速な言語で作られているから、全くストレスなく一瞬で起動する。
  2. 自動でバージョンを切り替えてくれるから
    実務に入ると、Aという案件では「バージョン20」、Bという案件では「バージョン22」を使う、といったことが日常茶飯事になる。
    fnm は、そのプロジェクトのフォルダに移動しただけで、裏側で自動的にバージョンを切り替えてくれる賢い機能(設定ファイルの自動読み込み)を持っているんだ。
  3. 余計なトラブルが起きにくいから
    他にも高機能なツールはあるんだけど、仕組みが特殊すぎて、特定のライブラリを入れたときにエラーを起こすことがある。
    その点 fnm は、Node.js公式の仕組みを邪魔しないシンプルな作りだから、一通り色んなツールを触ってきた僕から見ても、今一番トラブルが少なくておすすめできるんだ。

なるほど……。

歴史があるから良いとか、ただ多機能だから良いっていうわけじゃなくて、実務での『ストレスのなさ』と『トラブルの少なさ』のバランスを考えて選んでくれたんですね。

そういうこと。特に今回使うWSL2環境とも相性が抜群だからね。

じゃあ、理屈が分かったところで、さっそくその fnm をインストールしてみよう!

 

実際の構築手順

1. fnm(Fast Node Manager)のインストール

まず、fnmのインストールスクリプトを実行しよう。

ターミナルに以下のコマンドを貼り付けて実行してみて。

curl -fsSL https://fnm.vercel.app/install | bash

🚨 開発の現場トラブル:dependencies(依存関係)のエラーが出た場合

酒本先輩、すみません!

fnmのインストールコマンドを実行したら、最後に Not installing fnm due to missing dependencies. って赤文字で怒られてしまいました……。

お、さっそく環境構築の洗礼を浴びたね(笑)。

でも大丈夫、これはエラーメッセージの通り『必要な依存コマンドが足りないよ』って言われているだけだから。

fnmをダウンロードして解凍するために、Linuxの curlunzip という基本コマンドが必要なんだけど、今の熊木のUbuntuにはそれが入っていないみたいだね。

あ、なるほど。

どうすれば直りますか?

Ubuntuのパッケージ管理コマンド(apt)を使って、一発で解決できるよ。

ターミナルに以下のコマンドを順番に打ち込んでみて。

# まずはUbuntuのパッケージリストを最新にする
sudo apt update

# fnmに必要な「unzip」と、今後のために「curl」をまとめてインストールする
sudo apt install -y unzip curl

パスワードを聞かれたので入力して、インストールが終わりました!

よし、これで準備万端だ。

もう一度、さっきのfnmのインストールコマンドを実行してみて。

curl -fsSL https://fnm.vercel.app/install | bash

あ、今度はエラーが出ずに、最後に fnm was installed successfully って表示されました!

ナイス。

エラーが出ても、メッセージを読めば解決策がわかることが多いから怖がらなくて大丈夫。

じゃあ、次のステップ(シェルの再読み込みと確認)に進もう!

よし。

次に、fnmのコマンドをシェルに認識させるために、設定ファイルを再読み込みするか、一度ターミナルを落として開き直して。

開き直したら、確認のために fnm --version と打ってみて。

fnm --version
# 出力例: fnm 1.37.1

大丈夫です。

ちゃんとバージョンが表示されました!

2. Node.js(LTS版)のインストール

次はいよいよNode.js本体だ。

Node.jsには、最新機能が入る『Current版』と、企業の現場で広く使われる安定版の『LTS(Long Term Support)版』がある。

実務では基本的にLTSを使うから、今回はLTSの最新版を入れよう。

fnm install --lts

インストールが始まりました……終わったみたいです。

よし、じゃあ今入れたバージョンをデフォルトで使用するように設定しよう。

次の2つのコマンドを順番に実行して。

fnm use --lts
node -v

node -v を叩いたら v22.11.0(※実行時時点のLTS)と出ました!

(※注: バージョン番号はインストールした時期によって異なります)

これでNode.jsの準備は完了だ。

あわせて、Node.jsのライブラリを管理する npm というツールも自動で入っているはずだから、これも確認しておこう。

npm -v

最初のNode.jsスクリプトを動かす

環境は整いました。

これでどうやってプログラムを動かすんですか?

ブラウザの時は index.html に読み込ませていましたけど……。

Node.jsは、ターミナルから直接ファイルを指定して実行するんだ。

適当な作業用ディレクトリを作って、そこに index.js を作成してみよう。

mkdir nodejs-sample
cd nodejs-sample
touch index.js

その index.js をVS Codeなどで開いて、いつもの console.log を1行だけ書いて保存してみて。

// index.js
console.log('Hello World!');

書きました。

画面がないので、このログはどこに出力されるんですか?

実行したターミナルにそのまま出力されるよ。

ターミナルに戻って、node [ファイル名] の形でコマンドを叩いてごらん。

node index.js

お、ターミナルに Hello, Node.js! って表示されました!

確かにブラウザを開かなくてもJavaScriptが動いていますね。

そう。これがNode.jsの基本の動き。

ブラウザのデベロッパーコンソールに出力されていたものが、そのままサーバー(Linux)の標準出力に出ているイメージだね。

本日のまとめ

無事に動いたね。

今日のポイントを振り返っておこう。

  1. 現場を見据えてWSL2(Linux環境)で構築する。 本番環境に近い構成を意識する。
  2. Node.jsはバージョン管理ツール(fnmなど)で管理する。 現場ごとのバージョン指定に柔軟に対応するため。
  3. 実務では安定した「LTS版」を選択する。
  4. 実行はターミナルから node ファイル名

これまではブラウザありきで考えていたので、コマンド一つでJSファイルが実行されるのは新鮮です。

今回はただ文字を出しただけだけど、次回はNode.jsの特徴である『標準モジュール』を使って、いよいよLinuxの中のファイルを読み書きする処理に挑戦してみよう。

次回:第3回「ファイルシステム(fsモジュール)を使ったファイルの読み書き」に続く

タイトルとURLをコピーしました