最近JavaScriptにハマり始めたので、サーバ側もやってみようと思います！
自分のための備忘録兼手順書という立ち位置で記事にします。
まず、簡単なおさらいから。
１：Node.jsとは？
JavaScript言語のランタイム環境を提供するソフトウェア。
Node.js自体は「V8」というプログラムで作られており、これはJavaScriptで書いたプログラムを読み込んで実行することのできる「ランタイムエンジン」。
この「V8」をベースに開発されたNode.jsは、Webブラウザ（クライアント側）の中だけでなく、単独でJavaScriptのプログラムを実行できるようになっているため、サーバ側もJavaScriptで開発することができる！
２：Expressとは？
Webアプリケーションを作成する際に必要となる機能を提供してくれるフレームワーク。
アプリケーション開発をよりスムーズに便利に行えるようになる。
では、さっそく作ってみましょう！
１：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は、グローバルにインストールするのではなく、このフォルダ内にのみインストールするためのオプション
２：index.jsを作成する
Expressをインストールしたディレクトリ直下にindex.jsファイルを作成し、下記のように記述
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let express = require('express'); //expressオブジェクトを用意 let app = express(); //expressオブジェクトからappオブジェクトを作成 //ルーティングの設定 app.get('/', (req, res) => { res.send('Hello Express!!') }) //リクエストを待ち受ける app.listen(3000, () => { console.log('Server started on port 3000....') }) |
これで、index.jsが存在するディレクトリで「node index.js」を実行すると
「http://localhost:3000」をブラウザで叩けば、Hello Express!!と表示される
以上で、土台は完成
３：静的コンテンツを配置する設定をして、htmlファイルを返すようにする
現時点では、ただの文字列を返しているだけだが、次はhtmlファイルを返すようにする
下記の修正を加えることで、「public」フォルダ内のファイル全てが静的コンテンツとして扱われるようになった。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
let express = require('express'); //expressオブジェクトを用意 let app = express(); //expressオブジェクトからappオブジェクトを作成 //静的コンテンツの設定 app.use(express.static('public')) //ルーティングの設定 // app.get('/', (req, res) => { // res.send('Hello Express!!') // }) //リクエストを待ち受ける app.listen(3000, () => { console.log('Server started on port 3000....') }) |
この状態で、publicディレクトリを作成し、その中にhtmlファイル「index.html」を作る
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>INDEX</title> </head> <body> <h1>Hello Express!! From Public Folder</h1> </body> </html> |
作成したら、node index.jsを実行し、「http://localhost:3000/index.html」にアクセス
すると「Hello Express!! From Public Folder」が表示されるhtmlが返ってくる
※静的コンテンツというのは、公開フォルダのことで、誰でも好きにアクセスできるフォルダ。重要情報などが入った設定ファイルなどは絶対に置かないこと！
また、このフォルダに入れて良いのは、テンプレートエンジンなどでhtml内にデータを埋め込んだりして動的に加工するようなものではなく、プレーンなhtmlファイルやcss, jsファイルなど。
４：テンプレートエンジンに「ejs」を使ってhtmlファイルを返すようにする
では、テンプレートエンジンを使って動的なhtmlファイルも返してみよう！
ejsを使うためにインストールする（下記コマンドを実施）
nom install –save ejs
インストールされたら「node_modules」フォルダ内にejsのフォルダが追加されてるはず。
念の為、package.jsonを確認しても「dependencies」内にejsの記載があるはずだ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "express-web-app", "version": "1.0.0", "description": "express web app", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "ejs": "^2.6.2", "express": "^4.17.1" } } |
んじゃ、テンプレートを作成しよう！
index.jsが入ったディレクトリに「views」というフォルダを作って、その中に「index.ejs」ファイルを作成する。
※Expressでは、画面表示用のテンプレートはアプリケーション内の「views」というフォルダ内にまとめるようになっている。
index.ejsの中身はこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>INDEX EJS</title> </head> <body> <head> <h1><%=title %></h1> </head> <div role="main"> <p><%-content %></p> </div> </body> </html> |
この<%= %>であったり<%- %>の部分が動的に変化する値の出力箇所になる
ちなみに、<%- %>はHTMLタグをエスケープ処理しないでそのまま出力するためのもの。なので、タグを含めた値を動的に入れることもできる。
次に、index.jsを修正して、動的に出力させる値を設定しよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
let express = require('express'); //expressオブジェクトを用意 let ejs = require('ejs'); //追記！ let app = express(); //expressオブジェクトからappオブジェクトを作成 //静的コンテンツの設定 // app.use(express.static('public')) app.engine('ejs', ejs.renderFile);//追記 //ルーティングの設定 app.get('/', (req, res) => { // res.send('Hello Express!!') res.render('index.ejs', { title : 'Index', content : 'INDEX EJS Dynamic Value!!' }); }) //リクエストを待ち受ける app.listen(3000, () => { console.log('Server started on port 3000....') }) |
ejsオブジェクトを用意したら、テンプレートエンジンの設定を行う。
それをしているのが、app.engineになっていて、このengine関数は、アプリケーションで使用するレンダリングエンジンの設定を行うもので、
ここの第一引数には、レンダリングするファイルの拡張子を指定し、第二引数には、レンダリングに用いられる関数を指定する
※今回は、静的コンテンツを使用しないので、該当箇所はコメントアウトしておく
最後にres.render(テンプレートファイル名, {引き渡す値})を/のルーティング内に記述
引き渡す値は、KeyとValueのJSON形式で記述する。
こうすることで、index.ejsに<%= %>や<%- %>で記述した値と同じKeyを持つValueが格納されるという仕組み。
node index.jsを実行し例の通りブラウザでアクセスすると下記のように表示されるはず
５：公開フォルダ（静的コンテンツ）内にCSSを配置してEJSから使ってみる！
最後に、EJSファイルからCSSファイルを使用するために、静的コンテンツ内にCSSファイルを作成して今回の記事の終わりとしたいと思う。
下記のようにindex.jsファイルを修正し、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
let express = require('express'); //expressオブジェクトを用意 let ejs = require('ejs'); //追記！ let app = express(); //expressオブジェクトからappオブジェクトを作成 //静的コンテンツの設定 app.use(express.static('public')) app.engine('ejs', ejs.renderFile);//追記 //ルーティングの設定 app.get('/', (req, res) => { // res.send('Hello Express!!') res.render('index.ejs', { title : 'Index', content : '<h1>INDEX EJS Dynamic Value!!</h1>' }); }) //リクエストを待ち受ける app.listen(3000, () => { console.log('Server started on port 3000....') }) |
publicフォルダ内にindex.cssファイルを作成する。こんな内容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h1 { font-size: 128pt; font-weight: bold; color: #f0f0f0; text-align: center; letter-spacing: -10px; margin: -50px -px -140px 0px; } body { font-size: 12pt; color: #999; margin: 5px; } p { font-size: 14pt; line-height: 200%; margin: 0px 20px; } |
最後に、index.html内からcssファイルを参照するリファレンスを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="index.css"> <title>INDEX EJS</title> </head> <body> <head> <h1><%=title %></h1> </head> <div role="main"> <p><%-content %></p> </div> </body> </html> |
これで、node index.jsを実行し、リクエストを投げるとCSSが反映されているはずだ。
ちなみに、index.htmlをpublicフォルダ内に作成したままの場合だと、こっちが返されるので、削除しておいてね。
以上、Node.js + ExpressフレームワークでWebアプリ作成 でした！
コメント