300以上のホームページ制作案件に携わってきました。豊富な経験とお客様目線のホームページ制作、SEOを考慮した提案が強みです。茨城に寄り添ったサービスを多く展開してまいります。
  • おすすめ

便利なパッケージ管理ツール「npm」をインストールしてみよう!

便利なパッケージ管理ツール「npm」をインストールしてみよう!

はじめに

こんにちは、かずん(@kazoonLab)です。

今後、何記事かにわたり、パッケージ管理ツール「npm」の使い方を解説していきます。

今回の記事では、パッケージ管理ツールの役割とパッケージ管理ツール「npm」のインストール方法をご紹介します。

「npm」を一通り使えるようになると、Reactを入れてみたりTypeScriptを導入したりなど、モダンなJavaScriptで開発をする準備ができますので是非試してみてください!

この記事を読むと、パッケージ管理ツールの使い方とnpmのインストール方法がわかるよ!

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・おすすめのパッケージ管理ツールを知りたい方

・node.js / npmをインストールしていない方

「パッケージ」とは

そもそも「パッケージ」とはなんでしょう。

JavaScriptには、「フレームワーク」とか「ライブラリ」と呼ばれるものがたくさんあります。ここでは、それらをまとめて「パッケージ」と呼んでいます。

Webアプリを作るとき、それらを一つ一つインストールしようとすると、すごい手間がかかってしまいます。

また、「このフレームワークを動かそうとしたら、別のパッケージもインストールしないといけない」ということも起こってしまうかもしれません。

そういった問題を、パッケージ管理ツールで解消することができます!

パッケージ管理ツールとは

パッケージ管理ツールを使うと、コマンドラインからパッケージをインストール / アンインストール/アップグレードできるようになります。インストールできるパッケージは、管理ツールに登録されているものになります。

また、あるパッケージをインストール/アップグレードした時に、他のパッケージをインストール/アップグレードする必要がでてきたら、それを自動で行ってくれます。パッケージとパッケージがどのようにバージョンにあるか、すなわちパッケージの依存関係も管理している、というわけです。

今回の記事で紹介する「npm」はJavaScriptのパッケージ管理ツールですが、管理ツールは他の言語にもあります。JavaScriptには「yarn」、PHPには「composer」、Rubyには「RubyGems」などがあります。

実は、以前TwitterでBotを作った時、「composer」を利用していました。

Twitter APIを使って自動ツイートBotを作ってみよう(2) ~ Botを完成させる ~【使用言語PHP】

Twitter APIを使って自動ツイートBotを作ってみよう(2) ~ Bot…

npmとは

npm(node package manager)は、node.jsのパッケージを管理するツールです。node.jsって何、と思われた方も多いかもしれませんが、ここでは「JavaScriptのパッケージを管理するツール」くらいの理解で大丈夫です。node.jsに関しては、今後の記事で紹介していこうかと思います。

npmのインストール方法

この章では、Windows/Macでnpmをインストールする方法を紹介していこうかと思います。まずWindowsからの紹介になります。

Windows

node.jsをインストールする

ダウンロード | Node.jsへとアクセスし、「Windows Installer」を選択します。

node.jsのインストール

ダウンロードしたファイルからインストーラを展開します。インストーラでいくつか質問されますが、すべて「Next」で問題ありません。

質問が終わるとインストールするかを聞かれるので、「Install」をクリックします。

セットアップ完了画面に遷移したら、「finish」をクリックします。

node.js、npmが使えるかチェックする

「コマンドプロンプト」を立ち上げ、まず以下のコマンドを入力します。

node -v

「v11.10.1」からはじまるバージョンが表示されれば、node.jsのインストールはOKです。続いて、以下のコマンドを入力します。

npm -v

「6.12.0」のようなバージョンが表示されれば、npmのインストールもこれで完了です。node.jsのインストールで、npmもついでにインストールできた、ということですね。

Mac

Window版ではインストーラをダウンロードしていましたが、Macではすべてコマンドラインからインストールすることができます。

流れとしては、Homebrew –> Nodebrew –> node.js(+ npm)という順番でインストールします。ちょっと長いですが、一緒に見ていきましょう。

Homebrewをインストール

Homebrew」とは、macOSのパッケージ管理システムです。まずはこれをインストールして、mac関連のパッケージをインストールできるようにしましょう。

macOS用パッケージマネージャー — Homebrewにアクセスし、「インストール」にあるコマンドをターミナルで実行してみましょう。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが終わったら、下記のコマンドを実行します。

brew doctor

「Your system is ready to brew.」とでたら、Homebrewのインストールは終了です。

Nodebrewをインストール

Nodebrew」とは、macOSでnode.js自体のバージョンを管理するツールになります。ちょっとややこしいですが、これをインストールすることで、バージョンを指定してnode.jsをダウンロードできます。環境やプロジェクトに応じてバージョンを変えられる、ということです。

先ほどのターミナルで、以下のコマンドを入力します。

brew install nodebrew

インストールが終わったら、以下のコマンドを入力します。

nodebrew -v

「nodebrew 1.0.1」のようなバージョンが表示されれば、Nodebrewのインストールは完了です。

node.js + npmをインストール

最後にnode.jsとnpmをインストールします。以下のコマンドを順に実行します。

mkdir -p ~/.nodebrew/src
nodebrew install-binary stable

インストールが終了したら、続けて以下のコマンドを入力します。

vi ~/.bash_profile

ターミナルでエディタが開くため、ファイルを以下のように編集し保存します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

保存したらこのコマンドを実行します。

source ~/.bash_profile

ここまでできれば、node.jsとnpmのインストールは終了です。最後に、node.jsとnpmのバージョンを確認してみましょう。

node -v
npm -v

どちらもバージョンが表示されれば、ようやくインストールは終了です。お疲れ様でした!

まとめ

今回は、パッケージ管理ツールについての紹介と、npmのインストール方法についてご説明しました。

次回の記事では、いよいよnpmを使ってみたいと思います。お楽しみに!

この記事がいいなっと思ったら読者登録をお願いいたします!

検索

おすすめ記事

お知らせ

【お手軽パック】茨城の方限定! 50%OFFキャンペーン中。本当にいいホームページを始めやすい価格で 【お手軽パック】茨城の方限定! 50%OFFキャンペーン中。本当にいいホームページを始めやすい価格で

※ほぼ同条件の全国10,000以上のホームページの平均価格75万円の5分の1価格という意味。