【node.js】Expressのルーティングを使って、アクセスしたページごとに表示されるファイルを切り替える

今回はnode.jsと、node.js用フレームワークExpressのルーティング機能を使って、『アクセスしたページごとに表示されるファイルを切り替える』というのを作ってみます。管理人は自分のプロダクトではlaravelで行うのが決まっているため、laravelルーティングもやりましたが、node.js＆

Express概要や今回の下準備(インストールやファイル準備)

Expressってなに？

ExpressはNode.jsで利用できるWebアプリケーションフレームワークのことです。今回使う『ルーティング』のようにいろんな機能がまとめられていて、それらを呼び出して、シンプルなコードで記載することができます。管理人はExpressなしでルーティング書こうとしましたが、結構めんどくさかったです（笑）

また、フレームワークによくある『テンプレートエンジン』『ミドルウェア』『デバッグ』などの機能も。詳しくは公式ページも読んでみてください。

Express公式
https://expressjs.com/ja/

下準備～Expressインストールや表示htmlファイルの準備

まず、今回の機能を作る前に、node.js/npmがインストールされていることが前提となります。当サイトの前回の記事でインストールなどを行ってみたので、まだの方は参考になさってください。

【サーバーサイドJS初心者がやってみる】node.jsインストール＆コンソール文字列出力、setTimeoutで遅延させて出力やってみた
https://division-web.atelier-ss-agency.com/10725/how-to-install-nodejs-and-output-string/

node.js/npmがインストールされている状態で、Expressインストールコマンドを実行しました。以下の通り。

こんな感じでインストールされていきます。『npm list』のコマンド（インストールされたパッケージの一覧を表示するコマンド）を実行して確認したところ、expressも入ったようですね。

そのあとは、ルーティング切り替え時に表示するhtmlファイルをいくつか用意します。
『index.htmlがトップページ』『sub1.htmlが〇〇/sub1』『sub12.htmlが〇〇/sub2』のように、アクセスしたurlごとにファイルを設定しました。app.jsはnodeを起動したときに実行されます。

Expressルーティングで、アクセスしたページごとに表示ファイル切り替え機能を作る

app.jsはこんな感じで書いていきました。requireはphpでも使うんで、意味は分かりやすいです。requireで読んでいるのは『Express』と、ファイル操作のモジュール『fs』ですね。const app = express()を書いておくことにより、『app.get(～なんか処理～)』のように機能にアクセスできます。ポートは８０８０です(http://localhost:8080がトップになります)

上記はfsモジュールの機能で、それぞれindex.html・sub1.html・sub2.htmlを読んで変数に設定。『Sync』って付いているのは同期処理のようですね（非同期がasync）。

そのあとは、ページごとの処理を書いていきます。例として『http://localhost:8080にアクセス、メソッドはgetメソッド（get,post,put,deleteみたいなやつ）』のケースを上げます。
『res.writeHeadでヘッダー情報』『res.writeでコンテンツの書き出し』『res.endで処理終了』という流れです。

app.listenの部分は、『listenメソッドで待ち受け状態に』という内容。console.log内にメッセージを指定したので、実行時にコマンドプロンプトに『app.js実行中っす on port〇〇』が表示されます

Expressルーティング機能・実行結果

それでは、cdコマンドでファイルを置いたディレクトリに移動し、app.jsを実行します(ファイル名は設定した内容に合わせて変えてください)。以下のコマンドを実行し、ブラウザでそれぞれのurlにアクセスしてみます。

まずは『http://localhost:8080』にアクセス。トップページ用に指定したindex.htmlが表示されました(ポートを8080で設定したので、urlに8080がついています)。

『http://localhost:8080/sub1』にアクセス。sub1.htmlが表示されました。

『http://localhost:8080/sub2』にアクセス。sub2.htmlが表示されました。これができれば、nodeで普通のサイトも作れそうですね。

あとがき・まとめ

まとめると、こんなところでしょうか。azure・マネージドクラウド・専用サーバーとかにnode入れて、普通のサイト作って表示させるのは、こういうったやりかたでできそうです。