jsでサーバサイドを実装できるNode.jsで基本的なプログラムを書いてみた!

Node.jsをご存知ですか?

Node.jsとはざっくりいうと、javascriptでサーバサイドも開発できる技術です。最近の技術なので、PHPやRuby,Pythonのように、一般的に使われているわけではありませんが、フロント側の実装もバックエンドの実装もjsでかけるという利便性から様々な企業で採用されつつあります。
ネット決算最大手のPayPalが、サーバサイドをNode.jsに変更した事例が、有名かと思います。

そして、web制作という仕事柄、わたしはjsが大好きなので、Node.jsにも挑戦してみました!

本日は、自分の知識のoutputも含めて、簡単なnode.jsのプログラムを紹介したいと思います。

一般的なwebサーバーとの違い

一般的なwebサーバーは、htmlファイルやcssファイルをサーバーにアップするだけで、リクエストに応じて適切なファイルをレスポンスしてくれますよね!?

一方、Node.jsでは「このリクエストが来たら、こうやってレスポンスする」といった具合に、サーバープログラムを起動するというところからプログラムをスタートしなければなりません。

ここで、一番シンプルに

  1. httpリクエストをする
  2. htmlファイルを取得する
  3. 取得した内容を、レスポンスする

というプログラムを紹介します。

htmlファイルを表示するだけでも、Node.jsだとこれぐらいのソースを記述する必要があります。このjsファイルをターミナルから「node jsファイル名」で実行すると、サーバーが動き出し、ホストとポート番号(ここでは、6行目で指定した’127.0.0.1:8080′)にアクセスすれば、htmlファイルが表示されます。

通常のwebサーバなら、htmlファイルをポンと置くだけで自動でApache等が処理してくれる作業を、Node.jsの場合は手動で記述しなければなりません。

また、「res.setHeader(‘Content-Type’, ‘text/html’)」といった形で、header情報も自分で設定しないといけません。通常のwebサーバーなら拡張子で判断して、htmlファイルの場合はhtmlとして処理してくれるので、header情報を気にする必要はありませんでした。しかし、Node.jsの場合は、ちゃんとheader情報も宣言する必要があります。

※server.on(“request”, function(req, res){})では、reqにリクエスト情報が、resにレスポンス情報が自動で入ります。

URLの処理

webサービスを作成するのですから、URLの処理はできなくてはいけませんよね?

通常のwebサーバならば、HTMLファイルにファイルパスを指定すれば、あとはwebサーバがよしなに処理をしてくれます。しかし、先程から言っているとおり、Node.jsはサーバの動きも記述しなければならないため、URLの処理も自分で行わなければなりません。

このプログラムは、

  • ルートにアクセスしたら、先程の処理と同じくindex.htmlを取得して表示
  • /helloにアクセスしたら、Hello World!と表示
  • それ以外の場合は、No!と表示

するプログラムです。

追加した処理は、ほんの数行で、

  • urlオブジェクトを使うためのrequire(‘url’)
  • path に req.urlで取得したURLをparseしたものを代入
  • 条件分岐で処理

だけです。

このように、URLによって、取得するファイルを変更したり、処理を変更したりする命令を自分で設定できます。

テンプレートファイル「ejs」

簡単にNode.jsを紹介してきました。ここまで説明した内容で、Node.jsの基本的な動きは理解できたかと思います。最後に、ejsというテンプレートファイルを紹介します。

ejsは、ほぼhtmlだと思って構いません。違いは、jsの処理をhtmlの中に組み込んで、html内で展開できるということです。

このソースは、ejsを読み込んで、処理をして、ブラウザに表示するためのソースです。

今までのソースとの違いは、

  • ejsオブジェクトを使えるようにする(require(“ejs”))
  • indexという変数にindex.ejsを取得して代入する(fs.readFileSyncというのは同期的にファイルを取得する命令で、ejsで処理する場合はこうしておくんだと覚えておけば大丈夫です。)
  • humansに配列>オブジェクトで、ejs側に渡したいデータを持たせる
  • 最後に、それらをdoRequestの内部でレンダリング

している点です。

ファイルを読み込んで、データを渡して、レンダリングして表示するだけの処理ですので、慣れればそこまで難しくありません。

ejs側のソースは

となっています。htmlとjsをある程度知っている方なら、直感的に理解できると思います。

  • <%%>内にjsの処理
  • <%=%>内の場合は返り値を表示

という処理内容です。

Node.jsをマスターしていく過程を紹介していきます!

わたしもまだ、これぐらいの知識しかなく、Node.jsの真価を発揮できていません。これから、たくさんNode.jsを勉強し、様々なアプリを作って、みなさんにご紹介いたしますので、よかったら、遊びに来てください!

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!