目次
全体の流れ
導入手順詳細
1. Chocolateyのインストール
最初にnvm-windowsを追加する為のChocolateyをインストールします。
管理者権限でPowerShellを開き、以下のコマンドを実行します。
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))2. nvm-windowsのインストール
Nodeを追加する為のnvm-windowsをインストールします。
chocoはChocolateyを実行する為のコマンド。
choco install nvm
Node.jsのインストール
nvm-windows( nvmコマンド )を使用してNode.jsをインストールします。
コマンドプロンプトまたはPowerShellで以下のコマンドを実行します。
nvm install latest
特定のバージョンをインストールしたい場合は、そのバージョンを指定します。
例えば、バージョンv21.7.0をインストールする場合は以下のようにバージョンを指定してコマンドを実行します。
nvm install v21.7.0
使用するNode.jsのバージョンの設定
インストールしたNode.jsのバージョンを使用するためには、以下のコマンドで指定します。
// 最新版 nvm use latest // 特定のバージョン（例：21.7.0） nvm use v21.7.0
もし上記コマンドでエラーが発生する場合は、以下のコマンドで現在PCにインストールされているNode.jsのバージョンを確認してください。
// インストール済みのNode.jsを確認 nvm list // インストール済みのNode.js一覧 v14.21.3 v16.20.2 v19.9.0 v21.7.0
上記インストール済みのNode.jsの中から使用したいバージョンを指定して以下コマンドを実行。
nvm use v21.7.0
5. Node.jsのバージョン確認
最後に、Node.jsが正しくインストールされ、使用するバージョンが設定されているかを確認します。
以下のコマンドで確認できます。
node -v => v21.7.0
上記コマンドで Node のバージョンが実行されればOKです。
キーワード説明
Chocolateyとは？
Chocolateyは、Windowsでソフトウェアのインストール、アップデート、管理を簡単に行うためのパッケージマネージャーです。コマンドラインから簡単に色々なアプリケーションや開発ツールをインストールできます。管理者権限のコマンドプロンプトやPowerShellからコマンドを実行するだけで、必要なソフトウェアを自動でダウンロードし、インストールできるため、従来の都度各ソフトウェアのサイトへいき、必要なファイルをダウンロードするなどの手間を大幅に省くことができます。
nvm-windowsとは？
nvm-windowsは、Windows上でNode.jsのバージョンを管理するためのツールです。異なるプロジェクトで異なるNode.jsのバージョンを使用したい場合や、新しいバージョンのテストを行いたい場合などに、簡単にバージョンを切り替えることができます。これにより、特定のバージョンに依存するプロジェクトの開発や、複数のバージョンを使い分ける際の管理が簡単になります。
Node.jsとは？
Node.jsは、ブラウザで動作するJavaScriptを、ブラウザ以外で実行できるようにする為のツールです。
今回はWindows上にこのNode.jsを入れて、ブラウザを使わずにJavaScriptを動かせるようにすることです。
WebpackはJavaScriptによって動作するソフトウェアです。
シェルとは？
Windowsでは、コマンドプロンプトやPowerShellが「シェル」としての役割を果たします。
シェルは、ユーザーがキーボードを使ってコンピューターに特定の操作をさせるための仲介者のようななイメージです。具体的にはブラウザがウェブ上の情報を見るための窓口であるのと同様に、シェルはコンピューター内部や外部のシステムとやりとりをするための窓口です。ブラウザでURLを入力することで特定のウェブページを開くように、シェルではコマンドを入力することでPCに様々なタスクを実行させます。
パスとは？
パスは、アプリケーションやプログラム、ファイルがコンピューター上にある場所を指します。
例えば、家の住所のようなもので、コンピューターが必要なプログラムを見つけられるようにするための道しるべです。
ChocolateyやNode.jsなどのプログラムをWindowsにインストールすると、これらのプログラムをコンピューターがどこで見つけられるかを知っておく必要があります。ここで「パスを通す」という作業が登場します。これは、シェル（コマンドプロンプトやPowerShell）が、ChocolateyやNode.jsのようなプログラムを使うためにどこを見ればいいかを教える作業です。
シェルを使って、特定の場所にあるプログラムを起動したいとき、そのプログラムの「パス」をシステムに知らせておくことで、フルの住所を打ち込むことなく、名前だけでプログラムを呼び出すことができるようになります。例えば、Node.jsで何かしらの作業をしたいとき、「node」と入力するだけで起動できるのは、その「パス」がシステムに登録されているからです。
webpackとは？
webpackは、ウェブサイトを作るためのさまざまなファイル（たとえばPug、SCSS, JavaScript、画像など）を一つにまとめる（バンドルする）ツールです。
ファイルをバンドルする主な目的は、ブラウザからサーバーへのリクエスト（データ取得）の回数を減らし、サイトやウェブアプリの訪問者がページをより高速に閲覧できるようにすることです。
開発者にとっては、webpackを利用すると複数のファイルを管理しやすく小分けにして開発することができます。具体的には、ヘッダー(header.pug)やフッター(footer.pug)といったサイトの共通パーツを個別のファイルとして作成し、それらを必要に応じて組み合わせることができます。
これにより、複数ページにわたって共通の要素を一貫して保持したり、特定のページにだけ特別な機能やスタイルを適用したりすることができます。
最終的にwebpackを通してhtmlをする際に複数のpugファイルが１つのhtmlファイルにまとめられます。