msg
Web制作
のびすけのびすけ
  • このエントリーをはてなブックマークに追加

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

51

こんにちは、エンジニアなのにダンクが出来ないのびすけです。今月から記事を書かせていただきます。

さて皆さん「Node.js」って知っていますか?僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。

Node.jsとは

一言で言うとアツいJavaScriptです。

通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。

例えば、データベースから大量の情報を取得してWebページ上に表示をする処理を行う場合、通常はデータベースへアクセスしている時間に待ち時間(ブロック)が発生するため、ページの表示が遅くなってしまいます。ノンブロッキングI/Oでは、非同期処理を行うことで、データベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなくページの表示が出来ます。

また、Node.jsでは、Socket.ioというリアルタイムな通信を実現するライブラリを扱うことができます。この大量のアクセスに対応する仕組みと、リアルタイムな通信が注目されて、ソーシャルゲーム界隈やチャットサービスなど、色々な場面で利用されています。

技術評論社さん、Node.js日本ユーザーグループさんのサイトが分かりやすいので、詳細はこちらで見てください。

参考:第1回 Node.jsとは:基礎から学ぶNode.js|技術評論社

参考:Node.js日本ユーザーグループ

Node.jsの設定

以下、Node.jsの環境を整える手順になります。
個人差はありますが、手際が良い人なら5分程度でプログラムを実行するところまでいけると思います!爆速!

1. nvmのインストール

以下についてはMacなどターミナルでの動作を想定していますので、ご了承ください。

Node.jsを使う前に、Node.jsを使った開発を行い易くするツールとしてNMV(Node Version Manager)を導入します。

Node.jsのバージョンによって動作しない機能があった場合に、バージョンの上げ下げを渋々行うのはかなりの手間です。nvmをインストールしておくことで、バージョンの切り替えが凄く簡単に出来るようになります。

それでは実際にnvmをインストールしてみましょう。

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

※Linuxなどを利用していてgitコマンドがインストールされてない(command not foundなどと表示される)場合は以下を実行してgitコマンドを利用出来るようにしましょう。

$ yum -y install git

環境によって上手くいかない場合もあると思いますが、参考サイトをもとにチャレンジしてみましょう。

参考:Git – Gitのインストール | git-scm.com

nvmコマンドの動作確認をします。 エラーが出ないでhelpが表示されればOKです。

$ nvm help
Node Version Manager
Usage:
nvm help Show this message
・・・

2. nvmコマンドでNode.jsをインストール

nvm ls-remoteでダウンロード可能なNode.jsのバージョンリストが見ることができます。
Node.jsは偶数のバージョンが安定版、奇数のバージョンが開発版となっています。現在は安定版の最新が0.10.26、開発版の最新が0.11.12となっています。

$ nvm ls-remote
v0.1.14
v0.1.15
v0.1.16
・ ・ ・
v0.11.10
v0.11.11
v0.11.12

次にコマンドを利用します。 今回は最新バージョンの安定版の最新の0.10.26をインストールしてみました。

$ nvm install 0.10.26
########################################################################
Now using node v0.10.26

エラーが出なければNode.jsのインストールが完了です。 確認をしてみましょう。

$ node -v
v0.10.26

これでインストールは完了しました。

3. nvmの設定

nvmコマンドは、このままだとターミナル再起動時に同じような手順を行わないと使えません。いつでも使えるように設定しておきましょう。

まずはデフォルトのNode.jsのバージョンを指定しておきます。

$ nvm alias default v0.10.26
default -> v0.10.26

~/.bash_profileを、ターミナル起動時にnvmコマンドが適用されるように設定します。

$ vi ~/.bash_profile

viはターミナル上で動作するテキストエディタです。
画面が変わりますが焦らずに操作しましょう。
一般的なエディタとは勝手が違うのでターミナル初心者は注意です。

viは入力モードとコマンドモードを切り替えて操作します。
初期状態はコマンドモードでテキスト入力はできませんが、iを押す事で入力モードに切り替わり入力可能になります。
矢印キーなどでファイルの末尾に移動してからiを押して以下を追記して下さい。

if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

編集が終わったらESC(エスケープ)キーを押しましょう。コマンドモードに切り替わります。
その後:wqと入力してエンターキーを押しましょう。ファイルが保存されます。
※ここの作業が不安な人は他のエディタで編集しても問題無いです。

これで次回以降ターミナルを起動したときでも、Node.jsが使えるようになりました。

Node.jsでHello World!

それではお待ちかねのHello Worldをやってみましょう。Node.jsはコマンドライン上で動作しますが、Webブラウザ上で動作確認をしてみます。

エディタでexample.jsというファイルを作成し、以下のコードを書きましょう。

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

保存をしたらいよいよ実行です。

$ node example.js

Server running at http://127.0.0.1:8124/

ターミナルが待ち受け状態になります。

この状態でブラウザから htp://localhost:8124 にアクセスしてみましょう。

Hello World

と表示されていれば成功です!

お疲れ様でした!

今回のまとめ

Node.jsの環境を整えて、画面に文字を表示させるHello worldまでを行いました。Node.jsは数年前と比べてかなり有名になってきて、実績もあります。

PHPメインのサーバーサイドのエンジニアや、「ブラウザ側でJavaScriptは触っていたけどサーバー側もやってみたい」と思っているフロントエンジニアの皆さん、これを機会にNode.jsを勉強して、アイディアを実現出来る範囲を広めてはいかがでしょうか。

それでは、また!

  • このエントリーをはてなブックマークに追加

heteml

この記事を書いた人他のメンバーを見る

のびすけ   2014年 入社

岩手から上京してきました。 4月はトータルで4回の引っ越しをしているガチなノマド(遊牧民)なので住所不定です。 ジンベイはワンピースが大好きなので着ています。 最近の悩みはノンスタイルの井上に似ていることです。

のびすけ

LIGの2代目広報担当ひろゆきからのお知らせを受け取る方法

ジェイ

まいどおおきに。俺の名前は大田ひろゆき。LIGの広報担当や。FacebookとかTwitterとかメルマガで、皆にメッセージを届けさせてもらうで。ほんまに。 あと俺の発信する情報はLIGからの公式メッセージやと思ってもらってかまへんから。ってか公式のメッセージやわな。下にある「いいね!」を押すか、twitterをフォローして俺の情報を逃さんようにしてな。 メールマガジンの登録もめっちゃ簡単やから、おすすめやで~

twitter

LIGの事つぶやいてんの見つけたら速攻でフォローするで!

mail magazine

メルマガ登録はこちら

人類史上、例を見いひんくらいのしょうもないやつ配信するわ。

RSS

RSSを登録する

記事は毎日2本更新する予定や!RSSの登録をすると便利やで。

facebook