質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1428閲覧

EJSで外部jsonにまとめたmeta情報の読み込みができない

aKusano

総合スコア3763

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2019/11/05 04:50

前提・実現したいこと

gulp+ejsで静的HTMLを作っています。
各ページのmeta情報を外部のjsonファイルに持たせておいて、
ejsで該当のデータを読み込むようにしたかったのですがうまく動きません。

発生している問題・エラーメッセージ

明確なエラーは出ず、

Starting 'ejs' ... Finished 'ejs' after 1.51ms undefined

このようにタスクを処理した後undefinedとだけ表示されて
JSONの読み込みに失敗しているようです。

該当のソースコード

json

1//data.json 2{ 3 "default": { 4 "sitename": "サイト名", 5 "title": "ページタイトル", 6 "description": "Your Site Description", 7 "rootUrl": "/", 8 "imgPath": "/assets/img/", 9 "ogpImage": "http://example.com/ogp-image.jpg", 10 "url": "http://example.com/", 11 "type": "article" 12 }, 13 14 "home": { 15 "title": "サイト名(ホーム用)", 16 "description": "Description(ホーム用)", 17 "type": "website" 18 }, 19 20 "under": { 21 "title": "サイト名(下層用)", 22 "description": "Description(下層用)" 23 }

gulpfile

1const gulp = require("gulp"); 2const fs = require( 'fs' ); 3const ejs = require("gulp-ejs"); 4const rename = require('gulp-rename'); 5const dir = { 6 src: './src/', 7 dist: './dist/' 8}; 9//gulp-ejs 10gulp.task('ejs', function(done){ 11 const json_path = "./src/ejs/data.json"; 12 const json = JSON.parse(fs.readFileSync(json_path)); 13 14 gulp.src([dir.src + 'ejs/**/*.ejs', '!' + dir.src + 'ejs/**/_*.ejs']) 15 .pipe(plumber({ 16 errorHandler: function(err) { 17 console.log(err.messageFormatted); 18 this.emit('end'); 19 } 20 })) 21 .pipe(ejs({data:json})) 22 .pipe(rename({extname: '.html'})) 23 .pipe(gulp.dest(dir.dist)) 24 .pipe(browser.reload({stream:true})); 25 done(); 26});

ejs

1//_head.ejs 2 3<% 4 var _default = json['default']; 5 for ( var key in _default ) { 6 if ( typeof page[key] === 'undefined' ) { 7 page[key] = _default[key]; 8 } 9 } 10-%> 11//〜省略〜 12<title><%= page['title'] %></title> 13<meta name="description" content="<%= page['description'] %>"> 14 15<meta name="viewport" content="width=device-width,initial-scale=1.0"> 16<meta name="format-detection" content="telephone=no"> 17 18<!-- ogp --> 19<meta property="og:title" content="<%= page['title'] %>"> 20<meta property="og:type" content="<%= page['type'] %>"> 21<meta property="og:url" content="<%= page['url'] %>"> 22<meta property="og:image" content="<%= page['ogpImage'] %>"> 23<meta property="og:site_name" content="<%= page['sitename'] %>"> 24<meta property="og:description" content="<%= page['description'] %>">

index

1//index.ejs 2<%- 3 include('./inc/_head', { 4 page: json['home'] 5 }); 6%>

試したこと

参考:ejsでjsonを読み込みmeta情報を一括管理
参考:EJS:JSONファイルを利用してタイトルやメタ情報を管理しやすくする方法

この辺を参考にしてコードを記述し、
比較して見直してみましたが、何が悪いのか分かりませんでした。
エラーが出てくれればまだあたりもつけられるのですが、undefinedだけだと
どこを検討すればいいのか分からず困っております。

補足情報(FW/ツールのバージョンなど)

node: v12.2.0
gulp: v4.0.2
gulp-ejs: v4.1.2

その他不足している情報がありましたらご一報ください。
よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

undefined と表示される理由は、 error オブジェクトに messageFormatted プロパティが存在しないためです。次に、エラーが発生し EJS のコンパイルが出来ていない理由は、 gulpfile.js にて ejs ファイルに渡しているキーの名前と、各 ejs ファイルで指定しているキー名が異なるためです。

ejs(data, options)
data
Type: hash Default: {}
A hash object where each key corresponds to a variable in your template.

gulpfile.js のキー名に合わせるならば、各 ejs ファイルは以下のように変更する必要があります。

index.ejs

ejs

1<%- 2include('./inc/_head', { 3page: data['home'] 4}); 5%>

_head.ejs

ejs

1<% 2var _default = data['default']; 3for (var key in _default) { 4 if (typeof page[key] === 'undefined') { 5 page[key] = _default[key]; 6 } 7} 8-%> 9<title><%= page['title'] %></title> 10<meta name="description" content="<%= page['description'] %>"> 11 12<meta name="viewport" content="width=device-width,initial-scale=1.0"> 13<meta name="format-detection" content="telephone=no"> 14 15<!-- ogp --> 16<meta property="og:title" content="<%= page['title'] %>"> 17<meta property="og:type" content="<%= page['type'] %>"> 18<meta property="og:url" content="<%= page['url'] %>"> 19<meta property="og:image" content="<%= page['ogpImage'] %>"> 20<meta property="og:site_name" content="<%= page['sitename'] %>"> 21<meta property="og:description" content="<%= page['description'] %>">

投稿2019/11/06 04:54

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2019/11/06 06:00

ありがとうございます!! 無事エラー解消されました。助かりました!! > EJS のコンパイルが出来ていない理由は、 gulpfile.js にて ejs ファイルに渡しているキーの名前と、各 ejs ファイルで指定しているキー名が異なるためです。 ちなみに「gulpfileでejsファイルに渡しているキーの名前」というのがどこのことなのかしばらく分からなくてコードとにらめっこしていましたが、 > .pipe(ejs({data:json})) ここの「data」がキー名という認識で間違いないでしょうか? (ここの名前と各ejsファイルのキー名を連動させて変更して確認したので合ってると思いますが) やはりコピペするだけじゃなくてちゃんと構文の意味を理解しないとダメですね…(汗)がんばります。
s8_chu

2019/11/06 12:43

> ここの「data」がキー名という認識で間違いないでしょうか? はい、その認識で間違いありません。 > やはりコピペするだけじゃなくてちゃんと構文の意味を理解しないとダメですね… おっしゃるとおりだと思います (個人的には、コピペして動いてくれればうれしいですが)。質問文のコード中で使用されている Gulp や Browsersync にも、 Qiita やブログの古い記事には反映されていない重要 (?) な変更点があるので、一度よく使用するパッケージの公式ドキュメントを読んでみても良いかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問