Node.js 0.12.13 nodist 0.7.2 npm 3.5.2 forever 0.15.1 express-generator 4.13.1 |
■Express | Prev Top Next | |
|
今回はNode.jsのパッケージの一つであるExpressを使用します。Expressを使用するとMVCベースで開発が可能となります。 とりあえずExpressのGitHubのリンクを張っておきます。expressコマンドのオプションの一覧がのってますので必要に応じて参照してください。 expressjs/generator
他のサイトでは npm install -g express で紹介しているところがありますが、これでは動きません。どうもバージョンUpに伴って使用するパッケージが変わったようです。
また -c オプションを指定して、スタイルシートも指定します。 Sass( インデント記法 )と Stylus と Compass と LESS が指定できるようです。 ここでは JavaScript ベースの LESS を指定します。
コマンドプロンプト上でWebサイトを作成するディレクトリに移動してから、下記のコマンドを実行してください。ここではSample03というフォルダ内に作成します。 > express -e ejs -c less Sample03
指定するjavascriptはapp.jsではないことに注意してください。
※正しく表示できない場合は、タスクマネージャーからnode.exeを強制的に停止してから再度Webサービスを起動してみてください。
1.bin フォルダ このフォルダ内にはwwwというファイルが存在します。このファイルはWebサーバーを起動させるためのファイルです。 ファイルの中身をテキストエディッタで開いてみると、http.createServer()によるサーバーオブジェクトの生成、ポート番号を指定、エラーイベント、リスナー起動なんかやっています。 forever コマンドでWebサーバーを起動するために指定するファイルとなります。
2.node_modules フォルダ このフォルダ内にはnode.jsの各種モジュールが格納されているだけなので説明は不要でしょう。
3.public フォルダ このフォルダはWebサイト全体で共有するファイルをおくフォルダです。初期状態ではすっからかんですが、フォルダ名見ると画像ファイル、JavaScript、StyleSheetを置くフォルダであることがわかります。
4.routes フォルダ このフォルダ内には文字通りルーティング、つまりurlごとに処理を振り分けるJavaScriptファイルを置きます。 ためしに下記のように変更してWebサーバーを再起動してみてください。
router.get('/', function(req, res, next) {↓
router.get('/test', function(req, res, next) {http://localhost:3000 でアクセスすると404エラーとなって正しく表示できないことが確認できると思います。 代わりに http://localhost:3000/test でアクセスすると正しく表示できるのが確認できると思います。
index.js をルートパスと指定しているところは app.js の
var routes = require('./routes/index');と
app.use('/', routes);
です。/ つまりurl上でルートパスを指定するとroutesオブジェクトが呼び出されるが、その実際のパスは相対パスで ./routes/index.js を示すということです。( 拡張子は省略される ) ためしにindexをusersに変更して、http://localhost:3000 でアクセスすると respond with a resource と表示されることが確認できます。
なお、おそらくですが MVC パターンの Controller に相当するロジックもここで実装するものと思われます。
5.views フォルダ ここにViewに相当するファイルをおきます。 HTMLのテンプレートエンジンにejsを使用しているため拡張子が.ejsとなっています。 ファイルを開いてみるとASP.NET でサーバーサイドの記述を行う際に指定する <% %> を使用して Controller 側で指定した モデル( というか JSON )の値を表示しているのがわかると思います。
ためしに routes/inde.js を開いて下記のように修正してWebサーバーを再起動してください。
res.render('index', { title: 'Express' });↓
res.render('index', { title: 'Foo' });http://localhost:3000 でアクセスすると Express が Foo に変わることが確認できると思います。