humangas's blog

自分用のメモなので雑です。

Nitrous.ioで、Node.jsのHelloWorldをブラウザに表示させる

JavaScriptだけでWebアプリ作れそうで面白そうなので、Node.jsを勉強してみようと思う。

で、実際動かすためには、Node.jsをインスコしないといけないが、もっと気軽にやりたいな。と思ってたところ、前にちょっとだけ触ったNitorus.ioで出来たんじゃね? と思いついて見てみたら、普通に対応していて出来た。

この記事は、Nitrous.ioで、Node.jsの 'Hello World' してブラウザで表示させるまでを纏めた自分メモ(console.log('Hello World');ではない)。


Node.jsとは?

Webに腐るほど情報はあるが、細かいことは置いといて入口の理解として自分用言葉だと、とりえあえず以下の理解とした。

  • JavaScriptで、HTTPサーバ & ロジックが書ける(=サーバサイドJavaScript)
  • JavaScriptの特徴を活かしたコンセプト:軽量で効率よくを実現!
  • 【特徴1】「ノンブロッキングI/O」:リクエスト投げたら処理の完了を待たずに次の処理へ(=非同期)。処理の完了後に次の処理をしたいならコールバック(=関数渡し)でやる。
  • 【特徴2】「イベントループ」:コールバック完了したら、予め渡してたコールバックへというループで処理していく(逆にそう組まないと、JavaScriptはスレッド1個なので、すぐブロッキングする=並列処理出来ない)。
  • 【向いてるアプリ】:リアルタイムWeb→ チャットとか

この辺のノンブロッキングI/Oとかイベントループの話は以下のお話しが分かりやすかった。

有名な格言にもあるとおり: “nodeでは、コード以外のすべてが並列で動作する (In node, everything runs in parallel, except your code)” べきだからです。

Node.jsはたくさんの処理を同時に行えるけれども、 全てをスレッドに割り振って行うわけではないのです – 実際、Node.jsはシングルスレッドです。そうではなく、 イベントループを走らせることでデベロッパーはこれを利用できるのです – これらの理由から、ブロッキング操作は極力避け、 かわりにノンブロッキング操作を行うべきなのです。

しかしそれを実現するためには、時間のかかる処理になりそうな場合に、 関数を他の関数に渡してコールバック処理を行う必要があります (例えば、10秒待つ、データベースに問い合わせる、大変な計算をするときなどです) 。

つまりこういうことです。 “ねえprobablyExpensiveFunction()(時間がかかりそうな関数)さん、担当の仕事をして下さい。 でも私Node.jsはシングルスレッドだから、あなたの仕事が終わるのを待ってられないんだ。 あなたの次に並んでるコードを実行してしまいたいから、 このcallbackFunction()を持っていって、 その時間のかかりそうな仕事が終わったら呼び出してくれる?じゃあよろしく!”

Nodeビギナーズブック より:http://www.nodebeginner.org/index-jp.html

Nitrous.ioとは?

  • Web上のIDE(サーバもセット):Node.js, Ruby, PHP, Goが対応してる
  • 選択した利用言語の開発環境が準備済み状態で開発サーバが立ち上がるのでいきなり開発を始められて超楽(ちょっとした検証には最適)
  • 多分、土台はAWS
  • 有料サービスだが無料枠がちょっとある
  • → Memory:384MB、Storage:1250MB ぐらいの開発サーバが1台無料で手に入る&開発環境付きで。

準備:Nitrous.ioアカウント作成からBox作成まで

Nitrous.ioのHPにアクセス

f:id:Humangas:20140213172704p:plain

「New Box」ボタン押下
New Box=プロジェクトみたいなもん

f:id:Humangas:20140213172705p:plain

利用した言語と開発サーバのスペックを決定する
→ ここではNode.jsを選択
「Create Box」ボタン押下してちょっと待つと、その言語用の開発環境がもう出来てる状態で表示されているので、すぐに開発を始められる。
ちなみに、Region=サーバの配置場所は"East Asiaが東京"→ 別にどこでもいいが、近いほうがパフォーマンスは良い(この辺から見ても、やっぱ土台はAWSぽい)。

f:id:Humangas:20140213172701p:plain

やってみる

Node.js学習の入口として、これが勉強になりそうなので、とりえあえず、「Nodeビギナーズブック」から始めてみようと思う(今回は、HelloWorldだけ)。

ファイルを新規作成する
File > New

f:id:Humangas:20140213172720p:plain

新規ファイルが出来た直後は「Untitled」の無保存状態なので、Command+Sで保存してやる。
ショートカットキーもかなりあるので、直感的に使える。

f:id:Humangas:20140213172714p:plain

新規ファイル名を入力してSave

f:id:Humangas:20140213172718p:plain

今回のサンプルは、Nodeビギナーズブックのサンプルを使わせてもらう。
ちなみに、Nitrous.ioではコードアシストは今のところ効かない。オシイ。。

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

f:id:Humangas:20140213172709p:plain

画面下部のConsoleで、以下のコマンドを実行してNode.jsのHTTPサーバを起動する

$ node server.js

f:id:Humangas:20140213174647p:plain

Preview > Port8888を押下すれば、別タブでブラウザが開いてプレビュー出来る

f:id:Humangas:20140213172711p:plain

開いた別タブを参照すると、'Hello World'が表示されているはず。

f:id:Humangas:20140213172707p:plain

広告を非表示にする