ExpressでWebアプリケーションを自動生成する (3/6)
作成:2013-05-12 10:12
更新:2015-08-13 10:54
更新:2015-08-13 10:54
■Webアプリケーションの中身をチェック!
では、作成されたWebアプリケーションの構成を見てみましょう。インストールしたフォルダ(ここでは「helloexpress」フォルダ)内には、以下のようなファイルやフォルダが作られています。
・「bin」フォルダ
実行するプログラムが保管されているところです。このフォルダ内には「www」というファイルが1つだけあります。これがアプリケーションの実行スクリプトファイルになります。
・「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」フォルダ内に移動し、以下のように実行して下さい。
これでサーバープログラムが実行されます。ブラウザから、http://localhost:3000にアクセスすると、簡単なページが表示されます。Expressで自動生成されるWebアプリでは、デフォルトでポート番号3000が指定されるので間違えないようにしてください。
・「bin」フォルダ
実行するプログラムが保管されているところです。このフォルダ内には「www」というファイルが1つだけあります。これがアプリケーションの実行スクリプトファイルになります。
・「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にしてみてください。
※関連コンテンツ