12周年記念パーティ開催! 2024/5/10(金) 19:00

フロントエンド・エンジニアのためのNode.js 第1回 Node.jsとは何か

JavaScriptで書けるため、フロントエンド開発との親和性が高いNode.jsは、CoffeeScriptやGruntなど最近の開発ツールにも使われています。まずは、Node.jsのインストールなど基本から解説します。

発行

著者 外村 和仁 フロントエンド・エンジニア
フロントエンド・エンジニアのためのNode.js シリーズの記事一覧

はじめに

本シリーズでは、フロントエンド・エンジニアに向けて、最低限知っておきたいNode.jsの基本的な知識を、実際にいくつかのサンプルを作りながら学んでいきます。

この第1回目はNode.jsとは何か、という事前知識や、Node.jsのインストール、実行の仕方などについて解説します。

Node.jsとは

Node.jsは、サーバーサイドで動くJavaScriptの実行環境です。JavaScriptと言えば、ブラウザで動くプログラミング言語であるという認識が一般的かと思いますが、PHPやRubyのように、サーバーサイドのプログラムをJavaScriptで記述できるのがNode.jsです。

Node.jsは、Webサーバー構築などのネットワークプログラミングを簡単にできるようにするという目的で作られています*。しかし、最近ではネットワークプログラミングにとどまらず、フロントエンドの開発ツールを作る言語として、Node.jsが利用されることが非常に多くなっています。

*注:Note.jsについて

Node.jsの特徴などについては、Node.jsのアバウトページなどを参照してください。

これはフロントエンド・エンジニアが普段利用するプログラミング言語が、JavaScriptであり、同じ文法で記述できるNode.jsは、フロントエンド・エンジニアとの相性がよかったというのも理由のひとつでしょう。

例えば、CodeGridでも以前紹介した、CoffeeScriptやGrunt、StyledoccoなどはNode.jsで書かれています。そのほかにも、CSSプリプロセッサであるLESSやStylus、JavaScriptコードのminifyツールであるUglifyJSなども、Node.jsで書かれたツールです。

また、これまでサーバーサイドはあまりやったことがないというフロントエンド・エンジニアでも、Node.jsであれば、ほかのサーバーサイドの言語と比べて慣れている言語で書けるので、サーバーサイドのプログラミングをやってみるための、とっかかりにもなると思います。

このように、Node.jsはサーバーサイドの言語の中でも、特にフロントエンドと密接に関係した言語であるということが言えるでしょう。

Node.jsのインストール

それでは早速、Node.jsを自分のマシンにインストールして動かしてみましょう。

Node.jsをインストール方法はいくつかありますが、Node.jsの公式サイトからインストーラーをダウンロードしてくるのが一番簡単です。サイトのトップページで「INSTALL」のボタンを押せば、インストーラーをダウンロードできます。

Node.jsは、MacでもWindowsでも動作し、上記のインストーラーは利用しているOSのものがダウンロードされます。

インストーラーを実行してインストールが完了したら、Windowsではコマンドプロンプト*、MacであればTerminal.appを開いて、node -vというコマンドを実行してください。

*注:Windowsのコマンドプロンプト

Windowsの場合は、現在のバージョンでは通常のコマンドプロンプトではなく、Node.jsをインストールした際に、同時にインストールされるNode.js command promptを利用する必要があります。Node.js command promptは、Node.jsのアプリケーションフォルダ内にあります。

$ node -v

行頭の$の部分はコマンドを入力するときの目印のようなもので、実際に入力する必要はありません。これはユーザーの環境によって異なりますが、本シリーズではコマンドを実行する入力のプレフィックスとして、$を記述する表記で統一します。

-vというのはNode.jsのバージョンを表示するというオプションです。次のように、インストールされているバージョン番号は表示されれば成功です。

$ node -v
v0.10.28

この場合はNode.jsのバージョン0.10.28がインストールされているということになります。インストーラーでインストールされるバージョンは最新の安定版なので、このバージョン番号は、インストールする時期によって異なる可能性があります。

コマンドラインでHello World!

次にNode.jsでHello World!を出力してみましょう。hello.jsというファイルを作成し、次のように記述します。

console.log('Hello World!');

Node.jsでは、console.logを実行すると、データをターミナルに出力することができます。

hello.jsを保存したディレクトリにcdコマンドで移動し、このファイルをnodeコマンドで指定します。例えば、Macでデスクトップ*にhello.jsを作ったとすると、次のようになります。

$ cd ~/Desktop
$ node hello.js
Hello World!

*注:ターミナル上でのデスクトップの位置表示

~というのは、現在ログインしているユーザーのホームディレクトリという意味で、Macではデスクトップに作ったファイルはホームディレクトリのDesktopというディレクトリに置かれます。

上記のようにHello World!と出力されれば成功です。

WebサーバーでHello World!

次に、Node.jsでWebサーバーを作り、ブラウザでHello World!を表示してみましょう。server.jsというファイルを作り、次のように記述し、hello.jsと同じディレクトリ(先ほどの例では、デスクトップ)に保存します。

var http = require('http');

http.createServer(function(req, res) {
  res.end('Hello World!');
}).listen(8000);

そして先ほどと同じように、このファイルをnodeコマンドで実行します。

$ node server.js

そうすると何も反応がないまま、止まったような状態になると思います。これはWebサーバーが正常に起動して、リクエストを待ち受けている状態です。

Webサーバーが起動していることを確認してみましょう。この状態で、ブラウザからhttp://localhost:8000/にアクセスしてみてください。

そうすると、ブラウザ上にHello World!という文字列が表示されるはずです。

起動したサーバーは、コマンドプロンプトやターミナルで、Ctrl + cを押すと終了できます。

Node.jsを使ったWebサーバーの作り方については、シリーズの後半で詳しく解説する予定ですので、ここではこれくらい簡単にWebサーバーを記述できるということがわかっていただければと思います。

まとめ

今回はNode.jsの概要や簡単な利用方法について解説しました。次回はNode.jsのモジュールの仕組みやnpmというパッケージ管理システムについて解説します。