【初心者】expressでwebアプリ開発をするときのフォルダ構成【node.js】

こんにちは、よいこです。

expressでwebアプリを作るときにふと正しいフォルダ構成って何なんだっけ？と思い色々調べてみました。

【背景】

node.jsを勉強するにあたってwebアプリを作りながら勉強したいと思い、単純なじゃんけんアプリをつくってみました。ただ動くものという意味合いでは考える必要はないのですが、どうせ作るならあるべき形を目指したいと考えフォルダ構成やソースコードの適切な分離をしてみました。

 【結論】

結論としては以下の構成になりました。ここに至るまでの経緯については後述しますが、ここではフォルダ構成について簡単に説明します。

トップディレクトリのsampleからserver.js (expressのmiddleware設定やその他モジュールの宣言を行う)、node_modules (npm installでインストールしたもろもろが入っている)、public (jsやcss、画像ファイルなどのクライアントで使用するファイルを格納する)、routes (httpリクエストに対して処理をするメソッドを記述したルータを格納する)、views (htmlファイル、ejsファイルなどのviewを格納する)

 sample
├package-lock.json
├package.json
├server.js
│
├─node_modules
│
├─public
│ ├─css
│ ├─image
│ └─js
│
├─routes
│
└─views

 

【ここに至るまでの経緯】

まずおおもとのフォルダ構成案としてはexpress-generatorという雛形作成ツールで自動生成したものを参考にしています。express-generatorを使用した場合は上記のフォルダ構成に加えて、./bin/www というファイルが作成されます。express-generatorでフォルダ構成を作成した場合はexpressでサーバを起動するときにまずこのwwwファイルが呼ばれ、そのあとにserver.jsが呼ばれるようです。(npm start) (自分で動きを追っているわけではないので確実にそのように動いているとは言えませんが)。一方、express-generatorを使わずに手動でファイルやフォルダを作った場合はbinフォルダが存在しないのでターミナルから直接server.jsを起動します。(node ./server.js)

もともと自分1人で作る簡単なアプリ程度ではserver.jsに全ての処理を記載しても大した量にならないため問題はないです。

ただroutesフォルダ配下に存在するjsファイル類はhttpリクエストのURLパターンが増えるにしたがって増えていくため、すべてをserver.jsに記載するよりもリクエストパターンによってファイルを分けたほうが管理やメンテがしやすいと思いフォルダを分けました。

viewsフォルダにcssやjsなどのフォルダを設置しない理由としてはexpressの公開フォルダ設定があります。server.js内に以下の記載をすることで、publicフォルダ内の資源をクライアントからアクセスできるようにしています。

app.use(express.static('public'));

以上がこのフォルダ構成に至った経緯になります。

結局express-generatorで自動生成したフォルダ構成と同じになっているのですが、ただ漫然と自動生成されたフォルダを使用するのではなく、このフォルダ構成になるに至った理由を知っておくことで、今後開発を進めていく中で資源配置に迷ったときにも正しい判断ができるのではないかと思います。

【最後に】

次回は最近は待っているfirebaseの環境構築と簡単なデモアプリ作成についてご紹介したいと思います。

使ってみて思ったのですが、firebaseというサービスは素晴らしいです。とりあえずよくわかってないけどアプリを作ってみたいんだ！という方にもお勧めできるくらい簡単に環境構築、外部への公開ができます。お楽しみに。