スキップしてメイン コンテンツに移動

nodeで遊ぶ -フレームワークでサクサク Hello world-

今回は、前回に引き続き、node.jsを使って遊んでみます。
前回は、環境整備だけを行って、満足してしまった訳ですが、今回はインストールしたexpressというフレームワークを使って、遊んでみようと思います。

node.jsとexpressがインストールされていれば、helloworldは簡単です。




ソースコードを置きたいディレクトリへ移動して
express hello

すると、helloというディレクトリが作成され、その下にフレームワークの構成ファイルが展開されます。
cd ..
node app.js

これで動く・・・と思ったのですが、動かなかった・・・。
もうダメだ。

ソースコードを読んでみましょう。
しかし訳が分かりません。

折れそうになる気持ちを奮い立たせて、再度ソースを眺めると
app.listen(3000);

という部分があります。3000番ポートはrubyで使っていますねぇ。
この部分を変更しました。
app.listen(1192);

もちろんですが、番号は適当です。
再度
node app.js
Express server listening on port 1192

おお、動きました。では、ブラウザで「localhost:1192」を確認すると、おお、「Welcome to Express」と。歓迎ムードですよ。
では、この部分を土台にして、helloworldさせてみましょうか。「ctrl + c」でnode.jsを終了させます。
まず、app.jsを見ると、titleの設定があります。
この部分には、「Express」となっているので、「ystream」と変更してみます。
node app.js
Express server listening on port 1192

無事起動。んー、この作業は面倒だ・・・。
そこで登場するのが、「node-dev」です。
node-dev app.js
14 Jul 14:10:02 - [INFO] Started
Express server listening on port 1192

お、起動を始めました。ブラウザで確認してみると、titleタグ、h1タグ、pタグにあった、「Express」という単語が全て「ystream」に変更されました。
この「title」に設定された文字列をHTMLに適用しているのがテンプレートエンジンの「jade」という訳ですね。
では、今度はテンプレートをいじってみます。

あ、その前にapp.jsを元に戻します。
私は、viで修正しました。すると、自動的にnode-devが変更を検知し、再起動!
14 Jul 14:10:36 - [INFO] Rewstarting
Express server listening on port 1192

こりゃいい! ブラウザをリロードしてみると、元通りになっていました。

では、気をとりなおして、テンプレートファイル(index.jade)を見てみます。
h1= title
p Welcome to #{title}

以上が、index.jadeの中身です。この2行のソースが・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

こう出力されます。jadeの書き方をマスターすれば、HTMLのタイプ数が激減しそうな予感がプンプンしますね・・・。HTMLが整形されていないのが残念といえば残念。
では、index.jadeを修正してみます。
h1= title
p Welcome to #{title}
p Author is #{name}
p test #{test}

ちなみに、テンプレートファイルを修正しただけの場合はリスタートする必要がないようです。
テンプレートファイルはリクエストの度に読み込むんですね。

app.jsを修正します。
app.get('/', function(req, res){
  res.render('index', {
    locals: {
      title: 'Express',  // カンマを追記
      name: 'ystream'
    }
  });
});

この状態でブラウザで表示させるとどうなるでしょう?

画面が全然違う・・・。よくよく見ると、これはエラー画面でした。ちなみにこれがnode.jsに由来するエラー画面なのか、それともjadeのテンプレートエンジンに由来するエラー画面なのかは分かりません。

エラー画面には
> 4| p test #{test}

となっていて、エラー表示の部分には、「test is not defined」とあります。未定義の変数を指定した場合はエラーになるようです。
以上の内容を踏まえて、もう一度app.jsを修正します。
app.get('/', function(req, res){
  res.render('index', {
    locals: {
      title: 'Express',
      name: 'ystream',   // カンマを追記
      test: 'です'
    }
  });
});

無事表示されました! 日本語もうまく通りますね。って21世紀の言語だぞって感じですね、はい。
あ、Hello World表示させんの忘れてた・・・。

次回はデータのpostとかgetとかやってみようかな・・・。


コメント

このブログの人気の投稿

[VB.NET]オレオレ証明書でSSL通信するための短絡的な解決法

VB.NETソフトウェアでサーバーと通信することはよくある事だと思いますが、最近はHTTPを使って明けっ広げに刺しに行くよりHTTPSを使って暗号化してこそこそやった方が時代の流れに即した感じですよね(違うか)。 いちいちテスト環境でSSL証明書を用意するのも面倒だということで、セキュリティ的には全くよろしくない方法で迂回できるので紹介します。

[JS]Canvasでよく使う描画テクまとめ

HTMLで画像をいじくりたい時は、canvasを利用して編集するのは一般的ですが、WindowsストアアプリではHTML+CSS+JSでのアプリ開発ができる事もあって、簡単な画像編集であれば、C#やVBを使うより分かりやすいし資料が多く、C++でDirectXをガリガリ書くよりお手軽。入出力もファイルピッカーを使えば簡単に実装できます。今回は、Windowsのコードではなく、Canvasを利用する時のJavaScriptを使いどきに合わせてまとめていきます。

curl の基本的な使い方 -設定編-

今回のcurl TIPSは、curlをより日常的に使っていくためのHow toです。curlには、数多くのオプションが用意されていて、それらを組み合わせる事で様々な事が楽になるでしょう。サービス監視の自動化などにはまさにcurlの得意分野です。 今回は、curlを更に自分のものにしていくために大事なカスタマイズの部分を解説します。