みなさんこんにちは！ ガノー（Ganohr）です！ (≧▽≦)
前回は、『Node.js』と ejsモジュール（Additional, 翻訳） を使って、ファイルシステムから取得したEJSテンプレートファイルをレンダリングして動的なHTMLを返却するサンプルを紹介しました。
Node.jsのHello World!HTMLをEJSのテンプレートを用いて返却する方法!ダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。Node.jsでEJSを用いたテンプレートを用い、動的HTMLを返却する仕組みを解説!プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む
また、以前にfunction(){/* ～ */}を利用した簡易的なヒアドキュメントを紹介しました。
Node.js入門!Hello Worldを作ろう!サンプルダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む
今回はNode.jsで使えるヒアドキュメントを実現する hereモジュール（Additional, 翻訳） を導入し、EJSを共存して使う方法を解説します。
Node.jsとnpmを使えば、複数のパッケージを簡単に同時に利用できます。
目次
- 1.サンプルのダウンロード
- 2.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順1 - フォルダ作成
- 3.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順2 - パッケージ情報を作成する
- 4.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順3 - EJSを組み込む
- 5.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順4 - hereを組み込む
- 6.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順5 - JavaScriptのソースコードを記述する
- 6.1.ソースコードの解説
- 6.1.1.require('html')
- 6.1.2.require('ejs')
- 6.1.3.require('here')
- 7.Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順6 - 実際に起動して動作を確かめる
- 8.まとめ：EJSとヒアドキュメントを同時に使う手順
- 9.リファレンス
- 10.合わせて読みたい
サンプルのダウンロード
本記事では、解説しているコードを全てダウンロードできます。
ダウンロードの際は、以下の条件に同意してください。
- このサンプルやファイルをWEBサイト等に公開することを禁止します
- このサンプルをベースに改造・開発を行った場合、ソースコードを不特定多数に公開することを禁止します
- このサンプルをベースに改造・開発を行い、ビルドした結果については一切の制限事項はありません
なお、この制限の意図は「最近横行している、他人のWEBコンテンツを不正に流用して金儲けをおこなおうとするスプログやまとめサイトへの転載を排除するため」です。
良識的な利用においては、一切の制限を課す予定はありません。
ご理解の上、ダウンロードをお願いします。
Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順1 - フォルダ作成
まず、コードやリソース類を格納するためのフォルダを作成しましょう。
コマンドプロンプトを使用して、以下のように入力してフォルダを作成し、カレントディレクトリを作成したフォルダへ変更します。
md c:\dev\js\samples\nodejs\helloheredocument
cd c:\dev\js\samples\nodejs\helloheredocument
コマンドプロンプトの起動方法が分からない場合、以下の記事をお読みください。
Node.js入門!Hello Worldを作ろう!サンプルダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読むNode.jsでヒアドキュメントとEJSを用いたサンプル作成手順2 - パッケージ情報を作成する
次に、コマンドプロンプトを用いて、パッケージ情報をデフォルト値で作成します。
npm init -y
すると、以下のような内容が出力されます。
c:\dev\js\samples\nodejs\helloheredocument>npm init -y
Wrote to c:\dev\js\samples\nodejs\helloheredocument\package.json:
{
"name": "helloheredocument",
"version": "1.0.0",
"description": "",
"main": "HelloHereDocWorld.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順3 - EJSを組み込む
npm install ejs
これはinstallという記述は、後ろに続けたejsというパッケージをインストールするようnpmに支持しています。
このコマンドを入力すると、以下の例のように表示されます。
c:\dev\js\samples\nodejs\helloheredocument>npm install ejs
added 15 packages, and audited 17 packages in 2s
found 0 vulnerabilities
なお、npmの挙動やEJSの詳細が知りたい方は以下の記事をお読みください。
Node.jsのHello World!HTMLをEJSのテンプレートを用いて返却する方法!ダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。Node.jsでEJSを用いたテンプレートを用い、動的HTMLを返却する仕組みを解説!プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む 
EJS -- Embedded JavaScript templates'E' is for 'effective'. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to or ... 外部サイトへアクセス
ejs.coNode.jsでヒアドキュメントとEJSを用いたサンプル作成手順4 - hereを組み込む
npm install here
このコマンドでヒアドキュメントを実現するパッケージである『here』をインストールします。
このコマンドを入力すると、以下の例のように表示されます。
c:\dev\js\samples\nodejs\helloheredocument>npm install here
added 1 package, and audited 2 packages in 1s
found 0 vulnerabilities
なお、このパッケージの使用方法はソースコードの解説部で行います。
herehere-document on node.js. Latest version: 0.0.2, last published: 11 years ago. Start using here in your project by running `npm i here`. There are 6 o ... 外部サイトへアクセスwww.npmjs.comNode.jsでヒアドキュメントとEJSを用いたサンプル作成手順5 - JavaScriptのソースコードを記述する
続けて「HelloHereDocWorld.js」を以下に示す内容で作成し、保存します。保存する際のエンコーディングは「UTF-8」にしてください。
require('http').createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(
require('ejs').render(
require('here').here(
/* <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="description" content="This is a Hello World of Node.js. And this is a sample of using EJS Template and HereDoc." />
<title>Hello Node.js HereDoc and EJS World!</title>
</head>
<body>
<h1>Welcome to Node.js EJS and HereDoc World!</h1>
<p><%= message %></p>
<p><!-- HTMLコメント -->
<% if(Math.random() > 0.5) { %>
丁
<% } else { %>
半
<% } %>
</p>
<%# EJSコメント %>
<%- tags %>
</body>
</html> */)
, {
message: '日本語もかけるよ!',
tags: '<strong>HTMLタグも出力できる!</strong>',
}
)
, 'utf-8');
}).listen(8080);ソースコードの解説
require(～)は、Node.jsに搭載されているパッケージを使用するための宣言です。
require('html')
require('http')と指定すると、Node.jsに搭載されているHTTPアクセスのための機能を使えます。
なお、詳細は以下の記事解説しているため省略します。
Node.js入門!Hello Worldを作ろう!サンプルダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読むrequire('ejs')
'ejs'と指定すると、今回インストールしたEJSの機能を使えます。
なお、詳細は以下の記事解説しているため省略します。
Node.jsのHello World!HTMLをEJSのテンプレートを用いて返却する方法!ダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。Node.jsでEJSを用いたテンプレートを用い、動的HTMLを返却する仕組みを解説!プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む
今回はEJSのテンプレートの取得を‘ファイルシステム’（require('fs')）を用いるのではなく、ヒアドキュメントを用いて実現します。
require('here')
require('here')と指定すると、今回インストールしたヒアドキュメントの機能を使えます。
このパッケージでは、.here(/* ～ */)という形式でヒアドキュメントを記述できます。
let heredoc = require('here');
let text = heredoc.here(/* テスト */);
console.log(text);
//テスト
このパッケージはヒアドキュメントの実現にJavaScriptの関数定義を利用しているわけではありません。ソースコードを確認してみると、呼び出し元のコードを特定し、そのファイルをrequire('fs').reafFileSync()によって取得しています。また、呼び出し元の行番号をもとに該当するコメントの領域を抽出するようになっています。
しかし、コードを確認すると/*here document*/のように、/*の後ろや*/の前に半角スペースがない場合、1文字分が欠落するコードになっていることが確認できます。
実際に利用する際は、必ず半角スペースを入れるか、改行を入れるようにしましょう。
node-here.js/here.js at master · cho45/node-here.jsHere-document on node.js. Contribute to cho45/node-here.js development by creating an account on GitHub. ... 外部サイトへアクセスgithub.com
なお、.here(/* ～ */)で定義した結果は、文字列（string）のような振る舞いを行う、文字列とは別のオブジェクトです。とはいえオートボクシングによって文字列とそん色なく使えるため、特別な考慮は不要です。
ただし、instanceofやtypeofで検査する際には注意しましょう。
Node.jsでヒアドキュメントとEJSを用いたサンプル作成手順6 - 実際に起動して動作を確かめる
コマンドプロンプトへ以下のコマンドを入力し、Enterキーを押します。
node HelloHereDocWorld.js
その後、ブラウザのアドレスバーに以下のURLを入力してEnterキーを押すと、今回作成したHello Worldを表示できます。
※ 再掲
まとめ：EJSとヒアドキュメントを同時に使う手順
npm init -yでパッケージ情報を新規作成するnpm install ejsでEJSをインストールするnpm install hereでhereをインストールするrequire('ejs').render(string, object)で第一引数に指定されたテンプレート文字列に第二引数で指定された変数をレンダリングするrequire('here').here(/* ～ */)で、～に指定したコメントをヒアドキュメントとして認識させ、文字列を取得する
リファレンス
合わせて読みたい
Node.js入門!Hello Worldを作ろう!サンプルダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む 
Node.jsのHello World!HTMLファイルを静的にファイルシステムから取得して使用する方法!ダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。Node.jsで静的HTMLファイルを返却する仕組みを解説!プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む Node.jsのHello World!HTMLをEJSのテンプレートを用いて返却する方法!ダウンロード可能Node.js入門に簡単なサンプル「Hello World」を作成しよう。Node.jsでEJSを用いたテンプレートを用い、動的HTMLを返却する仕組みを解説!プログラム解説のみならず、必要な全ての操作を解説!サンプルもダウンロード可能! ... 続きを読む 
JavaScriptのPromise/async/awaitサンプル!実際に操作し理解しよう!両コードを比較し違いを学ぼう!ダウンロード可能JavaScriptのPromise/async/awaitの動作を理解できる、実際に動作させて挙動を理解できるサンプルコードです。全く同じ動作をするサンプルコード2つを比較し、あなたの理解を助けます。サンプルコードはコメント付きでダウンロード可能。 ... 続きを読む 
Node.js3ステップ12クリックだけでインストールする方法!Node.jsの環境構築は簡単です。インストールはなんと、3ステップ、12クリックだけで完了します!たったそれだけで、最高に便利な開発環境が無料で用意できます! ... 続きを読む 
Node.js2ステップ5クリックだけでアンインストールする方法Node.jsの環境構築は簡単です。そして、Node.jsを使わなくなったても、簡単にアンインストールできます。なんと、2ステップ、5クリックだけで済むのです。 ... 続きを読む 
