NodeSchoolに入学しよう!

Jadeテンプレートエンジンによるレンダリング

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jadeテンプレートエンジンを使用して、ページをレンダリングする方法について学びます。jadeモジュールをインストールして、expressへのテンプレートエンジンの設定方法を説明します。
講師:
10:09

字幕

このレッスンでは、jadeテンプレートエンジン を使用して、 ページをレンダリングする方法について 学びます。 さて、それではワークショッパーを起動しましょう。 ecpressworks、エンター 今回は二番目のこちらの、 JADEという問題を解きます。 エンターを押します。 問題。 /homeへのリクエストに対して、 jadeテンプレートエンジンで ページをレンダリングするExpress.js アプリケーションを作成してください。 ページには、toDateString()で フォーマッティングした 現在日付を表示してください。 アプリのポート番号と、 テンプレートディレクトリは、 1番目と二番目のコマンドライン 引数で与えられるものとします。 また、指定されたテンプレートディレクトリの 中にindex.jadeという ファイルが用意されているので、 レンダリングには そのファイルを使用してください。 index.jadeの中身は 次のようになっています。 ということで今回はNode.jsの アプリケーションでよく使われる テンプレートエンジンである、Jadeを使って ページをレンダリングすしてみます。 それではまずは、Jadeの インストールから行いましょう。 npm install jade jadeのインストールができました。 テンプレートエンジンというのは 何かというと、 アプリケーションの出力するページを 記述するときに、 HTMLをそのまま書くのではなく、 より書きやすい形で記述したり、 あるいはページの一部分を 後で置き換え可能な プレースホルダー文字列を書いておいて、 その部分を実行時に 何らかの変数などで置き換えて、 動的にページを生成することができる、 そのような機能を持ったものが テンプレートエンジンです。 それではビューファイルを書いてみましょう。 jadeのビューファイルを書くときは、 ファイル名の拡張子をjade というものにします。 そしてjadeのファイルの中では、 独自の構文を使って 記述する必要がありますが、 通常HTMLですと、 このような形、タグで囲って その中に、 このタイトルなどの文字列を書きます。 しかしjadeの場合ではそうではなく、 h1とそのまま要素名を書いて、 スペースで区切って、そして その中に入るテキストを そのまま書きます。 すると後で、jadeがレンダリングするときに、 この こちらの文字列を上のような形に、 HTMの形式に 自動的に変換してくれます。 これによってHTMLのページを記述するのが 若干楽になると思います。 それからもう一つ、例えば、 number output test、 ここまでは普通のテキストですが、 この次に#で始めて、中カッコで囲みます。 その中に、置き換えの文字列を指定します。 #、中カッコ、number、 numberというのは今私が考えた 文字列ですね。 なんでも構いません、 この中にいれる文字列は。 そして中カッコを閉じます。 すると、後でプログラムからこの numberにどういったものを入れたい ということを指定して、 テンプレートエンジンに レンダリングを指示することで、 これが自動的に何らかの数字などに 置き換えて出力されます。 これによって動的にページの内容を 変化させることができます。 それでは実際にこのテンプレート、 ビューを使って、表示してみましょう。 それではアプリケーションを作成します。 test.js まずはExpressのロードからですね。 require(express) そしてExpressアプリケーションの作成。 それからJadeを使用する際には、 アプリケーションインスタンスの setというメソッドを使って、 このsetというのは、アプリケーションに関する 様々な設定を行うための メソッドです。 そしてsetでview engine という設定を記述します。 それに対して文字列で jadeと渡してやると、 ページのレンダリングの際に、Jadeで ページがレンダリングされるようになります。 それからもう一つ設定が必要です。 viewsという設定に対して、 テンプレートのファイルを どのディレクトリから持ってくるか、 ということを指定する必要があります。 今回はdirnameという特別な 変数を使用して、 アプリケーションが現在起動している ディレクトリを指定することにします。 それからgetメソッドで、 アプリケーションのハンドラを 指定しましょう。 パスには/を指定して、全てのリクエストに 対するハンドラを記述します。 ハンドラの一番目のパラメーターは requestオブジェクト、 二番目はresponseオブジェクトですね。 そしてresponseオブジェクトに対して、 renderというメソッドを 指定してやることによって、 テンプレートエンジンによる ページの描画が可能になります。 一番目のファイル名には、使用する ビューファイルのファイル名を指定します。 今回は先ほど記述したindex.jadeという ファイルを使用します。 拡張子のjadeという部分は取り除いて、 indexという部分のみ指定します。 そして二番目のパラメーターに、 テンプレートエンジンが使用する パラメーターを指定します。 ここにはオブジェクトで、 先ほどビューファイルに書いた、 index.jadeを再度開きます。 このnumberというプレースホルダの 部分に入る変数を指定します。 ですので、numberというプロパティを持った オブジェクトを渡してやります。 ここに例えば3.14と書いてやれば、 先ほどのnumberというプレースホルダが 3.14という数字に置換されます。 これでハンドラの記述はOKですので、 あとはアプリケーションの起動ですね。 ポート3000番でサーバーを起動します。 これを実行してみましょう。 mode test.js そしてブラウザーでこれを開いてみます。 するとこのように、 ビューファイルに書いた内容で、 HTMLがレンダリングされました。 numberというプレースホルダは3.14という 数字にきちんと置き換わっています。 さてこれでJadeの使用方法が分かったと 思いますので、 ここでいったん手を止めて、 皆さんで問題を解いてみてください。 さて、皆さん、 問題は解けましたでしょうか? 答え合わせをしていきたいと思います。 それではアプリケーションの ソースコードを作成していきます。 program.jsというファイルで作成してみます。 まずはexpressのロード、 require express それからアプリケーションの作成。 そしてテンプレートエンジンを使用する 場合には、その指定、 setのview engine 今回はJadeテンプレートエンジンを使用します。 もちろんExpress.jsと一緒に使える テンプレートエンジンには Jade以外にも様々なものがあります。 そしてビューディレクトリの指定、 ビューのディレクトリはコマンドライン引数の、 二番目のパラメーターで指定される、 ということでした。 ですので、prcessのargy配列の3、 数字3を使用します。 そして、ハンドラの記述ですね。 /homeというパスをレンダリングしろ、 という問題でした。 request、response そしてresponseのrenderメソッドで、 レンダリングをします。 レンダリングするファイルを指定して、 パラメーターを指定してやります。 そのパラメーターの名前はdateで dateには、 toDateStringでフォーマッティングした 現在日付を出力するという問題でした。 そして最後にlisten、listenする ポート番号は これもコマンドラインパラメーターで 渡されます。 これで完成のはずです。 それでは実行してみます。 expressworks verifyの program.js 何かプログラムにミスがあったようですね。 再度テキストファイルを開きます。 expressというモジュールの モジュール名が間違っていましたね。 これを修正して再度実行してみます。 今度はこのようにテストが通りました。 このレッスンでは、 Jadeテンプレートエンジンを使用して、 ページをレンダリングする方法について 学びました。

NodeSchoolに入学しよう!

NodeSchoolワークショッパーとは、オープンソースで開発されているNode.jsやJava Scriptについて学ぶためのクイズ形式のアプリケーションです。このコースでは、learnyounodeとexpressworksという2つのワークショッパーを通じてNode.jsとExpress.jsの基本的な使い方を学びます。

3時間13分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
Node.js Node.js 0.10.24
価格: 3,990
発売日:2015年04月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。