ExpressでWebアプリケーションを自動生成する (3/6)

では、作成されたWebアプリケーションの構成を見てみましょう。インストールしたフォルダ（ここでは「helloexpress」フォルダ）内には、以下のようなファイルやフォルダが作られています。

・「bin」フォルダ
実行するプログラムが保管されているところです。このフォルダ内には「www」というファイルが１つだけあります。これがアプリケーションの実行スクリプトファイルになります。

・「node_modules」フォルダ
Node.jsで使うモジュール類（Expressなど各種のプログラムやそれに必要なファイル）がすべてここにまとめられています。ユーザーがこの中のファイルを操作することはまずありません。

・「public」フォルダ
これは公開ファイルを設置するところです。というとわかりにくいですが、例えばイメージファイルやJavaScriptのライブラリ、スタイルシートファイルといったものをここにまとめます。ここに配置することで、Expressの中で利用できるようになります。

・「routes」フォルダ
ここにまとめられているのは、それぞれのWebページでの処理を行うスクリプトファイル類です。Expressが生成するWebアプリケーションでは、スクリプト関係はメイン処理の部分と、個々のページの処理が別々のフォルダに分かれているのです。ここには、それぞれのページの処理が保管されています。

・「views」フォルダ
これは前回、登場しましたね。ページのテンプレートファイルがまとめられています。画面表示のために必要なファイル類はすべてこの中に用意します。

・app.js
これがメインプログラムとなるスクリプトファイルです。ただし、Node.jsでプログラムを実行する際には、このファイルは指定しません。先ほどの「bin」フォルダ内にあるwwwからapp.jsが呼び出され実行されます。

・package.json
これも既に登場しました。Webアプリケーションのパッケージ情報を記述したファイルでしたね。


――ざっと全体の構成をまとめました。これをベースにWebアプリケーションを作成する場合には、「app.jsでメインプログラムを修正する」「routesに作成するページ用のスクリプトファイルを用意する」「viewsに表示用のテンプレートファイルを用意する」といった流れで作っていけばいいことがわかるでしょう。

ちょっとわかりにくいのは、「bin」フォルダ内にある「www」と、「app.js」の違いでしょう。Express Application Generatorで生成されるプログラムは、アプリケーションの起動スクリプトと、メインスクリプトが分かれているのです。wwwはプログラムを起動するためのスクリプトで、app.jsがアプリケーションのメインプログラムになります。

流れがわかったら、コマンドプロンプトで「helloexpress」フォルダ内に移動し、以下のように実行して下さい。

node .\bin\www

これでサーバープログラムが実行されます。ブラウザから、http://localhost:3000にアクセスすると、簡単なページが表示されます。Expressで自動生成されるWebアプリでは、デフォルトでポート番号3000が指定されるので間違えないようにしてください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。