Windowsでのnode.jsとnpmのインストール方法

Windowsでのnode.jsとnpmのインストール方法 イメージ画像

プログラミングをしているとGitHubやQiitaのサイトを利用したことが一度はあると思います。

そのページを見ているとツールを使い始めるためにはnpm i ~を打ち込んで先ずはファイルをインストールしましょう。

な~んて文章をちらほらと見かけますが、はて?npmとはなんぞや?
と知識がない頃は、このコマンドの意味が分からず、どんな作業をすれば良いのか分からないよ…。と躓いた思い出があります。

こういう時って独学だと大変なんですよね。聞ける相手が側に入れば直ぐに聞いて終わりなのですが、一人だとそうはいかないため、色々と自分で調べる必要が出てきます。

でもそういう経緯を経て学んだことは、誰かに聞いて分かった気になるよりも遥かに自分の知識として身につくので一長一短だとは思いますが。

まぁ今回はWindowsでのNode.jsのインストール方法を解説したいと思います。

Node.jsやnpmとは

最初にザックリとnode.jsとnpmの解説

この記事はNode.jsをwinにインストールする記事なので必要ない項目かもしれませんが、全く知識のない人のために念の為説明をしておきます。

node.jsとは

Node.jsとはサーバーサイド側で動くjavascriptの事。

今やjavascriptはフロントエンド開発では必須知識と言われるほどの地位を確立してますが、この言語がサーバーサイド側でもそのまま使えれば学習コスト(覚えること)が少なくて楽だよね?という経緯から注目を浴びてます。

まぁ厳密にはプラットフォームみたいな役割を担うんですけど、Node.jsを本格的に勉強をしないなら、こういう程度の認識で問題ないです。

そして次にnpmの解説になります。

npmとは

正式名称は(Node Package Manager)で頭文字を取ってnpm。
Node.jsのパッケージを管理するツールの事です。

パッケージとはフレームワークやライブラリの事を指し、npmでコマンドを叩けば簡単にパッケージをPC内にダウンロード・インストールをしてくれます。

またnpm経由でパッケージをインストールすると、バージョンや依存関係・過去何をインストールしたのかなどの記録を全て保持してくれますので、このwebアプリは何のライブラリを使って開発したのかな?と忘れた頃に見直しても直ぐに思い出すことが可能になります。

昨今のプログラムを開発するには欠かせないツールの一つです。

ザックリとした説明ですがNode.jsというプラットフォームをPC内に作り、そこに色々な便利機能を追加するにはnpmというツールを使う。という認識で大丈夫です。

ソフトウェアをダウンロード

さてここからは、winにNode.jsをインストール方法を解説していきます。

まずは公式サイトからmsiフィアルをダウンロードしてきましょう。
日本語の公式サイトがありますので、以下のサイトを開いて下さい。

Node.jsを公式サイトからダウンロード

ファイルには二種類ありLTS(推奨版)と最新版があります。

最新版を好んで使いたい場合以外は安定したバージョンのLTSをダウンロードしましょう。

上のOSのアイコンが表示されている部分をクリックすると最新バージョンがダウンロードできますが、もし32bit版やMacやLinuxなど違うOSをダウンロードしたい場合は、下のリストから好きなファイルをクリックしてダウンロードを行って下さい。

インストール

ダウンロードしたファイルをダブルクリックしてインストールを行いましょう。

Node.jsのセキュリティの警告

Winではネット上からダウンロードしたインストールファイルは安全性確認のためセキュリティの警告画面が出る場合があります。

今回は公式から直接ダウンロードを行った安全なファイルと分かっていますので、実行を押してインストールを進めましょう。

Node.jsのインストール開始

node.jsのセットアップ画面へようこそ!
Nextをクリック

Node.jsのエンドユーザーライセンス契約

エンドユーザーライセンス契約
利用規約みたいなものですので心配な方は一読して、問題がないようであればI accept the terms in the License Agreement(使用許諾契約の条項に同意します)にチェックしてNextをクリック

Node.jsのインストール先選択

インストール先選択
初期はC:Program Files odejs\にインストールされます。
もし変更したい場合はChange…をクリックし選び直して下さい。

Cドライブ直下にインストールする方が後々トラブルは少ないでしょうから、特に気にしない方はそのままにしてNextを押して次に進みましょう。

Node.jsのカスタムセットアップ

インストールするファイルを選択
この画面でPCにインストールするファイルを個別に選択できますが、特に変更する必要はありません。
もし変更したい方は好きに選択をした後Nextをクリックして下さい。

node.jsをインストールする準備ができました

node.jsをインストールする準備ができました
インストール前の最終確認画面です。

問題がなければInstalをクリックでインストールが始まります。
もし設定を確認・変更したい場合はBackで前の画面に戻ります。
インストールのセットアップを中止したい場合はCancelで終了します。

問題ないようでしたらInstallをクリックして下さい。

Node.jsのインストール開始

node.jsがインストール完了するまで暫くお待ちください。
インストールには暫く時間が掛かるため、プログレスバーが100%になるまで気長に待ちましょう。

Node.jsのインストール途中

インストールが正常に行えているとプログレスバーがこの様に増えていきます。
もう少しで終わりそうですね。

Node.jsのインストール完了

終了ボタンを押してこの画面を閉じて下さい。
Node.jsが正常にインストールされました。

この画面が表示されましたら全てのインストールが無事終わりました。
Finishを押してインストール作業を終了して下さい。

この画面が表示されましたら全てのインストールが無事終わりました。
Finishを押してインストール作業を終了して下さい。

正常にインストールされたかの確認

無事インストールされましたと表示はされたけど、本当にされているのか?
それを確認するためにコマンドプロンプトからNode.jsとnpmのバージョンを確認してみましょう。

Windowsでのコマンドプロンプト場所

スタートメニューWindows システムツールコマンドプロンプト
を起動して下さい。

そこに以下のバージョン確認のコマンドを打ち込んでみましょう。
node -v
npm -v
-v は--versionの略称でバージョン確認のコマンド

Node.jsとnpmのバージョン確認

無事インストールが出来ていたら、上記のようにバージョンが表示されます。
もし表示されない、エラーが出る場合は。

  • インストールが正常に出来ていなかった。
  • インストール先のフォルダに問題があった。
  • nodeやnpmのパスが通っていない。
  • 必要なファイルをインストールしなかった。

ことなどが考えられます。

上記の説明で意味が分からない方は、値を一切変更せず初期状態のまま、もう一度素直に最初からインストール作業をやり直して下さい。

おわりに

おわりに

これでnpmのコマンドが使えるようになりました。
でもここから更にyarnを入れる必要があるんですよね…。
このままyarnを入れて使い方をnpmと一緒に覚えていきましょう。

昨今のWebフロントエンドではnpm(yarn)は必須のコマンドとなっていますので、これが使えないと仕事にならないという程どこでも見かけますね。

一度使い慣れるとnpm(yarn) installで必要なパッケージが全てインストールできるので、自分の開発環境を構築してしまうと手放せなくなるのは分からなくもない。

まだまだ私もNode.jsやnpm(yarn)に関しては勉強中なので、学んだこと。忘れそうなこと。調べたことなど役立ちそうなコンテンツは徐々に記事にしていきますね。

関連記事

  1. 関連する記事はありません。

PHPラボ オリジナルツール

無料配布中

当サイトの記事装飾は全てWPのオリジナルプラグインで行ってます。
インストールするとコピペで簡単に綺麗な記事が作成可能に♪
現在無料配布中・あなたのサイトも綺麗に装飾しませんか?

画像をクリックで配布ページへ
Citron WP Shortcode