Skip to content

Node.js, npm を動かしてみる (gulp, Redux Example)

前回の記事(nodist v0.8.7 を使って Node.js, npm のバージョンを管理する)では、nodist を使って Node.js と npm のバージョンを切り替える方法を紹介しました。

続編となるこの記事では、動作確認もかねて、インストールした Node.js と npm を実際に利用してみたいと思います。

関連記事

環境

  • Windows10 64bit
  • git version 2.10.2.windows.1

なお、各種動作確認には Git Bash を使っていきますが、コマンドプロンプト等でも問題ないと思います。

Git のインストール方法については、こちらの記事(Windows10にGit 2.8.4をインストール)をご覧ください。

Node.js の動作確認

Node.js の動作確認のため、Helllo World を返す HTTP サーバーを動かしてみます。

まず、任意のディレクトリに、次のような javascript ファイルを作成してください。

~/Code/node/hello.js

ソースコードの説明は割愛しますが、Node.js の入門に役立つと思われる記事をこちら(Node.js入門におすすめのサイト4選)で紹介していますので、よければご覧ください。

javascript ファイルを作成した後は、Git Bash やコマンドプロンプトでこのファイルを作成したディレクトリに移動し、node コマンドを実行します。

ブラウザから http://127.0.0.1:2345 または http://localhost:2345 にアクセスしてください。

画面に「Hello World」が表示されているのが確認できると思います。

確認後サーバーを停止するには、Git bash で Ctrl + C と入力してください。

以上で、Node.js を使った HTTP サーバーの起動を確認することができました。

npm の動作確認1

npm というのは Node Package Manager の略で、その名の通り Node.js のパッケージを管理するためのツールです。

まずは、ディレクトリに Node.js のパッケージをインストールする方法を紹介します。

例として、先ほど hello.js を作成したディレクトリに gulp のパッケージをインストールしてみます。

なお、gulp のインストールについてはこちらの記事(Windows10にgulpをインストール)でも詳しく紹介していますので、よろしければ合わせてご覧ください。

まず、現状を確認しておきます。

gulp がインストールされていないことが確認できました。

gulp を利用するためには、グローバルに gulp-cli パッケージをインストールし、ディレクトリごとに gulp パッケージをインストールする必要があります。

まずは、グローバルに gulp-cli パッケージをインストールしましょう。

npm install コマンドを使い、gulp-cli パッケージをグローバルにインストールすることができました。

続いて先ほど hello.js を作成したディレクトリに移動し、gulp パッケージをインストールしましょう。

そのためにはまず、npm init コマンドを使って対象のディレクトリを npm 管理下におく必要があります。

npm init によって、package.json と node_modules フォルダが作成されます。

install-02

package.json には npm で管理しているパッケージの情報がまとめられており、パッケージそのものは node_modules フォルダに格納されます。

npm init が完了したら、作業ディレクトリに gulp パッケージをインストールします。

gulp-cli パッケージと、gulp パッケージをインストールすることができました。

npm の動作確認2(package.json をもとにインストールする)

先ほど npm init で作成した package.json にはそのプロジェクトで必要な Node.js パッケージの情報が記載されていくので、このファイルを共有することで他の人が作成した作業環境を簡単に複製することができます。

ここでは例として、Redux の Example を動かしてみましょう。

Examples · Redux:http://redux.js.org/docs/introduction/Examples.html

Redux については、こちらの記事(【Redux入門】 React + Redux の考え方を理解する)にまとめているのでぜひご覧ください。

まず、Git を使って Redux Example のソースを取得します。

ちなみに、Git のバージョンは 2.10.2 を使いました。

Redux の Example はいくつかあるのですが、今回は counter というサンプルを動作させてみることにします。

git clone によって ~/Code/redux/examples/counter というディレクトリが作成されているので、その中を見てみてください。package.json が存在していることが確認できると思います。

この package.json には、このディレクトリで必要になる Node.js パッケージの情報がまとまっているので、それをもとに私たちの環境にも必要な Node.js パッケージをインストールすることができます。

実際に npm を使って、必要なパッケージをインストールしてみます。

package.json のあるディレクトリに移動し、npm install コマンドを実行するだけです。

npm start するとブラウザが開き、Redux の counter アプリを確認できると思います。

少し実感しにくいですが、npm install コマンドひとつ実行するだけで、counter アプリを動かすのに必要な Node.js パッケージをすべてインストールすることができています。

まとめ

Node.js, npm の動作確認をかねて、主な使い方を紹介しました。

最近のフロントエンド開発では、Git と Node.js, npm はほぼ必須のツールですので、色々使ってみて慣れておくと便利です。

Comments are closed.