Node.js + ExpressフレームワークでWeb アプリ作成

BackEnd

最近JavaScriptにハマり始めたので、サーバ側もやってみようと思います!

自分のための備忘録兼手順書という立ち位置で記事にします。

まず、簡単なおさらいから。

1:Node.jsとは?

JavaScript言語のランタイム環境を提供するソフトウェア。

Node.js自体は「V8」というプログラムで作られており、これはJavaScriptで書いたプログラムを読み込んで実行することのできる「ランタイムエンジン」。

この「V8」をベースに開発されたNode.jsは、Webブラウザ(クライアント側)の中だけでなく、単独でJavaScriptのプログラムを実行できるようになっているため、サーバ側もJavaScriptで開発することができる!

2:Expressとは?

Webアプリケーションを作成する際に必要となる機能を提供してくれるフレームワーク。

アプリケーション開発をよりスムーズに便利に行えるようになる。

では、さっそく作ってみましょう!

1:Expressをインストールする

ExpressでWebアプリを作成するためのディレクトリを作ってその中に移動したら、下記コマンドでnpmを初期化

任意のディレクトリ> npm init

対話形式になるので、それぞれ任意の値を入力(今回はこんな感じ)

package name: (express-app) express-web-app (アプリケーションの名前)

version: (1.0.0) そのままエンター (バージョン番号)

description: express web app (説明文)

entry point: (index.js)  そのままエンター   (起動用のスクリプトファイル名)

test command:  そのままエンター    (テスト実行のコマンド)

git repository:  そのままエンター   (Gitのリポジトリ名)

keywords: そのままエンター    (関連するキーワード)

author:  そのままエンター   (作者名)

license: (ISC)  そのままエンター   (ライセンスの種類)

最後にyesを入力すると初期化完了

次にExpressをインストールするため、下記コマンド実行

npm install –save express

–saveは、グローバルにインストールするのではなく、このフォルダ内にのみインストールするためのオプション

2:index.jsを作成する

Expressをインストールしたディレクトリ直下にindex.jsファイルを作成し、下記のように記述

これで、index.jsが存在するディレクトリで「node index.js」を実行すると

「http://localhost:3000」をブラウザで叩けば、Hello Express!!と表示される

以上で、土台は完成

3:静的コンテンツを配置する設定をして、htmlファイルを返すようにする

現時点では、ただの文字列を返しているだけだが、次はhtmlファイルを返すようにする

下記の修正を加えることで、「public」フォルダ内のファイル全てが静的コンテンツとして扱われるようになった。

この状態で、publicディレクトリを作成し、その中にhtmlファイル「index.html」を作る

作成したら、node index.jsを実行し、「http://localhost:3000/index.html」にアクセス

すると「Hello Express!! From Public Folder」が表示されるhtmlが返ってくる

※静的コンテンツというのは、公開フォルダのことで、誰でも好きにアクセスできるフォルダ。重要情報などが入った設定ファイルなどは絶対に置かないこと!

また、このフォルダに入れて良いのは、テンプレートエンジンなどでhtml内にデータを埋め込んだりして動的に加工するようなものではなく、プレーンなhtmlファイルやcss, jsファイルなど。

4:テンプレートエンジンに「ejs」を使ってhtmlファイルを返すようにする

では、テンプレートエンジンを使って動的なhtmlファイルも返してみよう!

ejsを使うためにインストールする(下記コマンドを実施)

nom install –save ejs

インストールされたら「node_modules」フォルダ内にejsのフォルダが追加されてるはず。

念の為、package.jsonを確認しても「dependencies」内にejsの記載があるはずだ。

んじゃ、テンプレートを作成しよう!

index.jsが入ったディレクトリに「views」というフォルダを作って、その中に「index.ejs」ファイルを作成する。

※Expressでは、画面表示用のテンプレートはアプリケーション内の「views」というフォルダ内にまとめるようになっている。

index.ejsの中身はこんな感じ

この<%= %>であったり<%- %>の部分が動的に変化する値の出力箇所になる

ちなみに、<%- %>はHTMLタグをエスケープ処理しないでそのまま出力するためのもの。なので、タグを含めた値を動的に入れることもできる。

次に、index.jsを修正して、動的に出力させる値を設定しよう!

ejsオブジェクトを用意したら、テンプレートエンジンの設定を行う。

それをしているのが、app.engineになっていて、このengine関数は、アプリケーションで使用するレンダリングエンジンの設定を行うもので、

ここの第一引数には、レンダリングするファイルの拡張子を指定し、第二引数には、レンダリングに用いられる関数を指定する

※今回は、静的コンテンツを使用しないので、該当箇所はコメントアウトしておく

最後にres.render(テンプレートファイル名, {引き渡す値})を/のルーティング内に記述

引き渡す値は、KeyとValueのJSON形式で記述する。

こうすることで、index.ejsに<%= %>や<%- %>で記述した値と同じKeyを持つValueが格納されるという仕組み。

node index.jsを実行し例の通りブラウザでアクセスすると下記のように表示されるはず

5:公開フォルダ(静的コンテンツ)内にCSSを配置してEJSから使ってみる!

最後に、EJSファイルからCSSファイルを使用するために、静的コンテンツ内にCSSファイルを作成して今回の記事の終わりとしたいと思う。

下記のようにindex.jsファイルを修正し、

publicフォルダ内にindex.cssファイルを作成する。こんな内容。

最後に、index.html内からcssファイルを参照するリファレンスを追加

これで、node index.jsを実行し、リクエストを投げるとCSSが反映されているはずだ。

ちなみに、index.htmlをpublicフォルダ内に作成したままの場合だと、こっちが返されるので、削除しておいてね。

以上、Node.js + ExpressフレームワークでWebアプリ作成 でした!

コメント

タイトルとURLをコピーしました