今回は、前回に引き続き、node.jsを使って遊んでみます。
前回は、環境整備だけを行って、満足してしまった訳ですが、今回はインストールしたexpressというフレームワークを使って、遊んでみようと思います。
node.jsとexpressがインストールされていれば、helloworldは簡単です。
ソースコードを置きたいディレクトリへ移動して
すると、helloというディレクトリが作成され、その下にフレームワークの構成ファイルが展開されます。
これで動く・・・と思ったのですが、動かなかった・・・。
もうダメだ。
ソースコードを読んでみましょう。
しかし訳が分かりません。
折れそうになる気持ちを奮い立たせて、再度ソースを眺めると
という部分があります。3000番ポートはrubyで使っていますねぇ。
この部分を変更しました。
もちろんですが、番号は適当です。
再度
おお、動きました。では、ブラウザで「localhost:1192」を確認すると、おお、「Welcome to Express」と。歓迎ムードですよ。
では、この部分を土台にして、helloworldさせてみましょうか。「ctrl + c」でnode.jsを終了させます。
まず、app.jsを見ると、titleの設定があります。
この部分には、「Express」となっているので、「ystream」と変更してみます。
無事起動。んー、この作業は面倒だ・・・。
そこで登場するのが、「node-dev」です。
お、起動を始めました。ブラウザで確認してみると、titleタグ、h1タグ、pタグにあった、「Express」という単語が全て「ystream」に変更されました。
この「title」に設定された文字列をHTMLに適用しているのがテンプレートエンジンの「jade」という訳ですね。
では、今度はテンプレートをいじってみます。
あ、その前にapp.jsを元に戻します。
私は、viで修正しました。すると、自動的にnode-devが変更を検知し、再起動!
こりゃいい! ブラウザをリロードしてみると、元通りになっていました。
では、気をとりなおして、テンプレートファイル(index.jade)を見てみます。
以上が、index.jadeの中身です。この2行のソースが・・・
こう出力されます。jadeの書き方をマスターすれば、HTMLのタイプ数が激減しそうな予感がプンプンしますね・・・。HTMLが整形されていないのが残念といえば残念。
では、index.jadeを修正してみます。
ちなみに、テンプレートファイルを修正しただけの場合はリスタートする必要がないようです。
テンプレートファイルはリクエストの度に読み込むんですね。
app.jsを修正します。
この状態でブラウザで表示させるとどうなるでしょう?
画面が全然違う・・・。よくよく見ると、これはエラー画面でした。ちなみにこれがnode.jsに由来するエラー画面なのか、それともjadeのテンプレートエンジンに由来するエラー画面なのかは分かりません。
エラー画面には
となっていて、エラー表示の部分には、「test is not defined」とあります。未定義の変数を指定した場合はエラーになるようです。
以上の内容を踏まえて、もう一度app.jsを修正します。
無事表示されました! 日本語もうまく通りますね。って21世紀の言語だぞって感じですね、はい。
あ、Hello World表示させんの忘れてた・・・。
次回はデータのpostとかgetとかやってみようかな・・・。
前回は、環境整備だけを行って、満足してしまった訳ですが、今回はインストールした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とかやってみようかな・・・。
コメント
コメントを投稿