解 説

Node.jsのページ

Node.jsについて

Nodeとは何か?これは本家のページの「NODE.JSとは」のページに記述されています。

Node はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

つまり、非同期型のイベント駆動の JavaScript 環境のものでLAMP環境のものより優れているらしいということです。
Node.jsはチャットなどリアルタイムなやり取りが得意とされています。またサーバーの非力なシングルCPUでもパフォーマンスが高いということです。
今回は難しいサーバーの仕組みは置いておいて、とりあえずNode.jsに触ってみることにします。
まず認識しておくことは、サーバーサイドのJavaScriptということです。サーバーサイドで使うJavaScriptならまず何らかのサーバーの準備が必要になるはずです。そこでレンタルサーバーでNode.jsを使おうと考えても、一般的なレンタルサーバー(ロリポップやさくらインターネットのスタンダードプランなど)ではNode.js環境はありません。では手軽にローカルマシンに仮想のサーバーを作成?と思われますが、実はローカルマシンにNode.jsをインストールすることで簡単に仮想サーバーの環境が出来上がります。

今回の内容はNode.jsのサーバー機能を堪能するのではなく、Node.jsを使うための最低限の必要事項を学習することが目的です。

Node.jsのインストール

Node.jsのインストールは簡単です。
Node.jsダウンロードページから自分のマシンにあったNode.js のソースコードをダウンロードしてインストールするだけです。

ただし、今後フロントエンド開発を行うときに色々な場面でNode.jsが使用される場合が多くあります。
その時Node.jsのバージョンが合ってないとうまく動作しないことがあります。そのため、できればNode.jsのバージョンを管理してインストールすると問題を解決することができます。

Node.jsのバージョンを管理しながらインストールする方法(Mac用)はバージョン管理付きNode.jsの導入方法〜Mac用を参考にしてください。

バージョン管理付きNode.jsの導入方法〜Mac用

Node.jsを試す

Node.jsを使うにはターミナルからコマンドを使って操作します。このコマンドは仮想サーバーに対して行なっていると考えます。

まずはターミナルを起動して、Node.jsが正しくインストールされているかどうか確認するには以下のコマンドでバージョンを確認します。
バージョンが表示されるとokです。

バージョンを表示させることでNode.jsが正しくインストールされていることを確認したら、作業用のディレクトリ(フォルダ)を作成しましょう。
Macの場合はホームディレクトリの中に作業用のディレクトリ(フォルダ)を作成します。
この作業用ディレクトリは、例えばXAMPP環境だとXAMPPをインストールしたXAMPPディレクトリ(フォルダ)と同じような位置付けと考えるとわかりやすいかもしれません。つまり仮想のサーバーのディレクトリとなるわけです。
作業用のディレクトリを作成することがNode.jsを使う時の第一歩になります。

NodeでJavaScriptを試す

作業ディレクトリを作成した次に行う基本作業はNode.jsに命令するJavaScriptを記述することです。JavaScriptのファイル名は何でも構いませんが、server.jsの名前が多く使われています。
JavaScriptの内容は高度なものとして、Node.jsで高機能サーバーを作成する場合であっても、また「Hello」を表示するだけの簡単なJavaScriptの命令の場合でも、Node.jsで実行する内容を作成します。

次に、JavaScriptファイルをNodejsで実行するにはJavaScriptファイルを最初に作成した作業用ディレクトリにおきます。次に、ターミナルのコマンド「cd」で作業用ディレクトリに移動してから「node ファイル名(拡張子省略可能)」コマンドでJavaScriptが実施されます。

例えば「Hello!」とコンソールに表示させるものを試して見ましょう。
以下のJavaScriptを「sample」という作業用ディレクトリ(フォルダ)にhello.jsというファイル名で保存します。
*sampleディレクトリはどこに作成しても構いません。

JavaScriptの内容

作成したディレクトリ(フォルダ)にカレントディレクトリを移動するには cd コマンドを使います。
Macのターミナルの場合は「cd」と入力後ターミナル内に作成したディレクトリをドラッグ&ドロップするとパスが自動で記述されます。
コマンドの入力

カレントディレクトリの移動ができたら、JavaScriptファイルをNodeで実行します。
次のコマンドで実行します。
コマンドの入力

npmについて

作業用ディレクトリを作成して、Node.jsを動かすJavaScriptファイルを作業用ディレクトリに入れたら、その次に実行するのは初期化作業を行うことです。
Node.jsで初期化作業を行うにはnpmという仕組みを使います。npmとは、Node Package Manager の略です。 Nodeで作られたパッケージモジュールを管理するためのツールです。
npmのページ
npmのページを下まで見ていくと、フロントエンドでもよく目にするパッケージがずらりと並んでいます。つまりこれらのものは全てNodeで作られたパッケージモジュールということになります。

npmはNode.jsをインストールした時点で使用可能です。

Node.jsで開発するときの手順〜初期設定

Node.jsを使って開発するときには初期設定が必要です。
初期設定にはnpmを使います。初期化を行うと該当のディレクトリ内にpackage.jsonファイルが作成されます。

初期化の方法

コマンドは「npm init」です。そしてコマンド実行の途中で少し入力する必要があります。package.jsonファイルの中身を入力する必要があるのですが、入力待ちの際に何も入力せずに「return」キーを押すとデフォルト値が入力されます。
今回の例ではauther以外は全てデフォルト値にすることにして「return」キーでスルーして「auther」だけ自分の名前にしています。
初期設定のコマンド

コマンド実行後の表示

上表示内容図のnameからlicenseまでがそれぞれ待ちの状態になりますので、何らか入力するか「return」キーでスルーします。(sample) のように括弧内の文字列はデフォルト値でディレクトリ名やファイル名が表示されています。変更したい場合はそのデフォルト値の後に付け足します。最後にIs this ok? (yes) の画面で「return」キーを押すとYesの意味になります。

モジュールのインストール

npmのページで紹介されているモジュールのインストール方法です。
インストールするコマンドは「npm install モジュール名」です。ただしこの場合はインストールしたディレクトリ内にカレントディレクトリを移動しないとこのモジュールは使用できません。
もし、どこのフォルダからでも使用できるようにするにはグローバルインストールをします。グローバルインストールは「npm install -g モジュール名」とします。なお、-gの位置はモジュール名の後でも構いません。

今回はnodemonのインストールを行なって見ます。
nodemonはリロードを自動的に行なってくれるものです。何らかJavaScriptのコードを変更してその結果を見るときにいちいちリロードするのは結構面倒です。nodemonを使うとJavaScriptの変更を保存するだけでタイムリーにその結果を見ることができるものです。開発の時には結構便利なものです。

nodemonのインストール

nodemonのページを見るとインストールのコマンドが書かれています。

nodemonをグローバルインストールするコマンド

もしエラーが出たらsudoをつけてコマンドを実行します。

nodemonの使い方は簡単で「node hello」の代わりに「nodemon hello」とします。これでリアルタイムのJavaScriptの変更が反映されるようになります。
nodemonから抜けるには「Control+c」を2回実施します。「command+c」ではなく「Control+c」ですので間違わないように。。

hello.jsの”Hello!”部分を”Hello,world!”に変更するなどして「node hello」の時と「nodemon hello」の時での違いを確認して見てください。

Node.jsを使う基本手順

  1. 作業ディレクトリを作成してカレントディレクトリを作業ディレクトリに移動
  2. Node.jsを動かすJavaScriptファイルの作成
  3. npmで初期化を行いpackage.jsonファイルを作成
  4. 必要に応じてモジュールのグローバルインストール
  5. モジュールのローカルインストール

今回はNode.jsの導入方法と初期設定、そしてnpmを使ったモジュールの導入方法を学習しました。
ここまでの内容は比較的簡単に試すことができますのでNode.jsを扱い慣れておくと良いでしょう。無理に難しいサーバー構築などに挑戦すると挫折しますが、この程度を知っておくだけで例えばGulpの導入や、reactなどの学習でNode.jsが必要になっても何を行なっているかなんとなくわかるようになるかもしれません。。