Node.js+Expressのファイル/フォルダ構成って自由に決められるというのは分かったけど、セオリー的なフォルダ構成はないのでしょうか。
Node.js+Expressのファイル構成
筆者は侍エンジニア塾の生徒をしていました。
そのときに勉強させてもらった「環境Node.js + フレームワークExpress でアプリを作成する場合のアプリケーションのフォルダ基本構成」。
次の構成がベストプラクティスのようです。
Express＋npmインストール後のディレクトリ構成
│ app.js ：アプリのメインファイル。アプリ全体に共通する設定や処理を記述する。
│ package-lock.json
│ package.json ：プロジェクトの名前やバージョンを定義する設定ファイル。
│
├─bin ：サーバープロセスの起動の処理を格納するディレクトリ。
│ www ：デフォルトではwwwファイルが生成されており3000番ポートで起動するよう設定されている。
│
├─node_modules ：Expressのモジュールが格納されたディレクトリ。npmでインストールしたファイルが格納されている。基本的に編集することはない。
│ ├─.bin
│ ├─accepts
│ ├─array-flatten
│ ├─basic-auth
│ ├─body-parser
│ ├─bytes
│ ├─content-disposition
│ ├─content-type
│ ├─cookie
│ ├─cookie-parser
│ ├─cookie-signature
│ ├─debug
│ ├─depd
│ ├─destroy
│ ├─ee-first
│ ├─ejs
│ ├─encodeurl
│ ├─escape-html
│ ├─etag
│ ├─express
│ ├─finalhandler
│ ├─forwarded
│ ├─fresh
│ ├─http-errors
│ ├─iconv-lite
│ ├─inherits
│ ├─media-typer
│ ├─merge-descriptors
│ ├─methods
│ ├─mime
│ ├─mime-db
│ ├─mime-types
│ ├─morgan
│ ├─ms
│ ├─negotiator
│ ├─on-finished
│ ├─on-headers
│ ├─parseurl
│ ├─path-to-regexp
│ ├─proxy-addr
│ ├─qs
│ ├─range-parser
│ ├─raw-body
│ ├─safe-buffer
│ ├─send
│ ├─serve-static
│ ├─setprototypeof
│ ├─statuses
│ ├─type-is
│ ├─unpipe
│ ├─utils-merge
│ └─vary
├─public ：静的リソース（JavaScript, CSS, imgなど）を格納するディレクトリ。
│ ├─images
│ ├─javascripts
│ └─stylesheets
│ style.css
│
├─routes ：ルーティング処理（クライアントの要求に対してどのような処理を実行し返すかを振り分ける処理）を格納するディレクトリ。サーバ側のコントローラ。
│ index.js
│ users.js
│
└─views ：UIを格納するディレクトリ。選択したテンプレートエンジンに対応したフォーマットで記述する。サーバ側で画面を作成するときのテンプレート
│ error.ejs
│ index.ejs
ミドルウェアについて
Expressを利用したアプリケーション開発の特徴となるのが、ミドルウェアという概念です。
「ルーティング」と「処理」をつなげていくことでアプリを作成しますが、この個々の「処理」の部分がミドルウェア。
以下のコードだと、function以下がミドルウェアに相当します。
router.get('/', function(req, res, next) {
var p1 = req.query.p1;
var p2 = req.query.p2;
var msg = p1 == undefined ? "" : p1 + "," + p2;
res.render('helo',
{
title: 'HELO Page',
msg: msg
}
);
});ミドルウェアをどのファイルに記述していけば良いのでしょうか。
- メイン処理を記述するapp.jsに、アプリ全体のリクエストに共通するミドルウェアを記述
- routesディレクトリ内のjsファイルには、リクエストごとのミドルウェアを記述する
というのが最もシンプルかつ管理しやすい方法と言えそうです。
Node.js+Expressに関するQ&A
Node.js+ExpressでのWebアプリ作成において、私自身が引っかかった点を先生に聞いてみました。Q＆A形式でまとめます。
Node.js+Expressに関する疑問
Q：Node.js+Expressの各種ファイルはテキストエディタなどで編集すれば良いのですか？
A：実際の製品開発レベルだとEclipse総合開発環境などで編集しますが、ちょっとアプリを作るような個人レベルではテキストエディタで編集でOKじゃないですかね。
Q：.ejsファイルはHTMLのようにも見えるし、<% %>など見慣れない文法も入っていますが、そもそも.ejsはなんという言語で書かれていますか？
A：特定のプログラミング言語で書かれているわけではなく、ejs固有の文法です。HTMLと同様の書き方の部分もHTMLに「似せているだけ」で、HTMLとは異なります。
Q:フォルダ構成は、上記のデフォルトから変更したほうが良いですか？
A:必要がない限りパスは変更しないほうが、リンク切れなどの問題が起きにくいとあれていますので、必要性がある場合のみ構成やファイル名を変更したら良いです。
Q：.js や.ejsファイルを新しく足して実行したら、実行できないのですが、なぜですか？新しく作成したファイルへのリンクはapp.jsに正しく記載されているのに。
A：ファイルを追加しただけでは、フレームワーク側が追加ファイルを認識しません。以下を実行してコンパイルすることで、正しく追加ファイルを認識できます。
$ npm install
Q: “index.ejs”や”error.ejs”へのリンクが.jsファイルに記載されていないように見えます。index.ejsを読み込む指示は記載する必要がないのですか？
A：index.jsやerror.jsを読み込むときに、 “index.ejs”や”error.ejs”も読み込むように内部的に処理されています。ファイル名が同一かどうかで判断してかまいません。このため、わざわざ “index.ejs”や”error.ejs”読み込みの指示を記載する必要がありません。
Q: Webアプリ構築のためのフリー＆オープンソースのJavaScriptソフトウェア郡をMEAN というのですね。MongoDB, Express, AngularJS, Node.jsの4つのアプリケーションから構成されているようですが、MongoDBでできることがExpressでもできたり機能が重複しているようです。どのように使い分けたら良いのですか？
A：MongoDBとExpressの違いを例えると「ペヤングを買うか一平ちゃんを買うか」というレベルの違いです。学習コスト等を加味してどちらを使うかを決定します。また、フレームワークによりコンパイルでのファイルどうしの紐づけ方の方針やejsファイルの文法が異なります。フレームワークを作成した作者の方針にしたがって構成されているためです。
Q:そもそもWebアプリと普通のアプリの違いが分からなくなってきました。
A：Webアプリとそれ以外のアプリの境界がなくなりつつありますが、大まかには次のとおりです。
- Webアプリ：ネットワークを使って機能を提供するウェブサイト。ウェブサイトを提供しているサービスの全体をWebアプリと呼ぶ。←これを実現するものをフレームワークと呼ぶ。
例：チャットアプリ - アプリ：ネットワーク使わない。PC上でスタンドアロンで動く。一方、普通のアプリが現在はWebアプリに近づきつつあるので境界があいまい。
また、ExpressはDBとDBへのアクセスを設計するフレームワークであるため、普通のアプリをExpressで作るメリットがない。スタンドアロンのアプリであれば普通にJavaScriptで作成すれば良いだけのこと。
例：ブラウザの拡張機能
Webアプリでないアプリは、トランシーバみたいなもの。トランシーバは送ったデータが直接相手に届く（＝サーバを介さない）ため、Webアプリでない。
Q：Expressで”render(‘index’)”てどういう意味ですか？
A：render = viewに流すという命令です。view（＝テンプレートを使ってHTMLとして出力）してください、という意味です。
このQ&Aの解説をした人
解説は侍エンジニア塾講師のI先生によるものです。
プログラミング知識もさることながら一般的知見というか文系分野も知識豊富で、いかにもIQの高そうな先生でした。
今、無料体験レッスンしているようなのでご興味あるかたは以下の公式サイトから申し込んでみてくださいね。
