Anaconda に Node.js をインストールしてバージョンを切り替える

Anaconda は、Python のバージョンを環境ごとに切り替えることで有名なツールであるが、なんと！ Node.js のバージョンも切り替えられる。

Node.js にもバージョン管理ツールはあり、nodenv などが有名であるが、Python や他の言語で色々使っていると、バージョン管理ツールさえも何をインストールしたか分からなくなるので、Anaconda で Python も Node.js も管理できるのは助かる。

スポンサーリンク

はじめに

この記事では、Anaconda 本体はインストールされている前提で話が進みます。もしインストールされていなければ、以下の記事を参考にインストールしてください。

【関連記事】
▶Anacondaのインストール （Mac OS編）

Node.js 用の Anacondaの仮想環境を作る

既存の Python で使っている環境に、Node.js を一緒にインストールしてもよいが、今回は Node.js 用に新しく conda_node という名前で Anaconda の仮想環境を作る。

仮想環境の作成

ターミナル（またはコマンドプロンプト ）を開いて、次のコマンドで新しく環境を作る。

conda create -n conda_node

上で作成した環境をアクティブにする。

conda activate conda_node

conda-forge チャンネルの追加

Anaconda のデフォルトチャンネルだと、Node.js のバージョンが古いので、conda-forge チャンネルを登録する。すでに conda-forge チャンネルを追加済みの方は読み飛ばしで！

conda config --append channels conda-forge
conda config --get channels

Node.js のインストール

次のコマンドを使用して、Anaconda の仮想環境に Node.js をインストールする。

conda install -c conda-forge nodejs

完了したら、インストールされたバージョンを確認する。2022年1月時点だと v17.4.8 が落ちてくるようだ。

node -v
# v17.4.0

念のため、npm のバージョンも確認しておく。

npm -v
# 8.3.1

スポンサーリンク

簡単なプログラムの実行

適当な場所に main.js という名前のファイルを作成する。

touch main.js

上で作成した main.js に、定番の Hello world を表示する JavaScript のコードを保存する。

console.log("Hello World!");

node コマンドを使って実行する。コンソールに「Hello World!」と表示されれば OK だ。

node main.js

Next の開発環境を作ってみよう

「Hello World!」だけだと面白くないので、少し発展して、Anaconda にインストールした Node.js で Next の開発環境を作ってみたい。開発ツールには VSCode を使用する。

新規プロジェクトの作成

まず、Next のプロジェクトを作るディレクトリに移動し、npx コマンドで新しい Next プロジェクトを作成する。

cd path/to/parent
npx create-next-app@latest --typescript

途中でプロジェクト名を聞かれるので任意の名前を打ち込む。今回は「sample-next-app」という名前にした。

?  What is your project named?  › sample-next-app

完了したら、作成されたプロジェクトのディレクトリに移動して、お決まりの npm install を実行する。

cd sample-next-app
npm install

VSCode で開く

npm install が終わったら、VSCode でプロジェクトのフォルダを開く。

開発を効率化する拡張機能をインストールします。とりあえずは、以下の拡張機能をインストールしておきます。

・ES7 React/Redux/GraphQL/React-Native snippets

スポンサーリンク

起動とデバッグ

それでは、作成した Next のプロジェクトの起動とデバッグをしてみる。

まずは、プロジェクトを起動する。

VSCode のターミナルを開き、今回作成した仮想環境（conda_node）に切り替えたのち、dev モードで Next アプリを起動する。

次にブラウザのデバッガを起動する。今回は Chrome を使用する。

左側のデバッグメニューから「実行とデバッグ」を押し、出てきた環境の一覧から「Chrome」を選択する。

すると、.vscode フォルダが作成され、その中に launch.json というファイルが出来るので、それを開いて、次のように URL のポート番号を 8080 → 3000 に変更する。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

実行とデバッグから「Launch Chrome against localhost」を選択して、再生マークのようなアイコンをクリックし、デバッグ用の Chrome を起動する。

起動すると、次のような Next.js のスターターページが表示される。デバッグをしたい所にブレークポイントを置けば、TypeScript （JavaScirpt）のデバッグもできる。

さいごに

Anaconda に Node.js をインストールする方法を解説してきました。

この記事では深く触れていませんが、npm などでインストールしたパッケージも、Anaconda の仮想環境ごとに管理されます。もし、不要になったら、仮想環境を消せば、Node.js と npm でインストールしたパッケージもろとも消すことができます。