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

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

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

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

最適化

最適化とはメソッドやデザインの最適な処理方法を選択することです。パフォーマンスの向上を目指す為に行われます。プログラミングにおける最適化は、アルゴリズムのスピードアップや、要求されるリソースを減らすことなどを指します。

Q&A

解決済

Pugでコンポーネント化する際に、変数の定義をどこでするのか(どこに変数ファイルを置くのか)について

mitrasi
mitrasi

総合スコア46

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

最適化

最適化とはメソッドやデザインの最適な処理方法を選択することです。パフォーマンスの向上を目指す為に行われます。プログラミングにおける最適化は、アルゴリズムのスピードアップや、要求されるリソースを減らすことなどを指します。

1回答

0グッド

0クリップ

1736閲覧

投稿2021/06/17 02:38

編集2021/06/17 04:13

前提・実現したいこと

下記metaタグを変数で定義して使いまわしたいと思っています。
参考記事をもとに試作中なのですが、エラーがあるようでmetaタグがpugからhtmlに生成されません。
今の現状だと、多分エラーは「metaで使おうとしているやつ定義されてないよ(main.jsに定義して)」だと思うのですが、今思いつく読み込み方は一通り試したつもりなので、どこで定義して(また定義ファイルを分ける場合はどこに変数ファイルをおいて読み込めばいいのか)について知りたいです。

どうぞご教授よろしくお願いいたします。

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

[11:29:31] Using gulpfile ~\Desktop\ntyuex - バックアップ\gulpfile.js [11:29:31] Starting 'default'... [11:29:37] Starting 'compilePug'... [11:29:37] 'compilePug' errored after 133 ms [11:29:37] TypeError in plugin "gulp-pug" Message: C:\Users(ファイル)\src\index.pug:15 13| link(rel='stylesheet', href="css/sp.css") 14| link(rel='preconnect' href='https://fonts.gstatic.com') > 15| title= package.title 16| meta(name='description', content=package.description) 17| meta(name='keywords', keywords=package.keywords) 18| meta(name='robots', keywords=package.robots) Cannot read property 'title' of undefined Details: path: C:\Users(ファイル)\src\index.pug domainEmitter: [object Object] domainThrown: false

※上記(ファイル)は伏せるために表記を置き換えてあります。

該当のソースコード

pug

1<!DOCTYPE html> 2html 3 body 4 head 5 link(rel='stylesheet', href="../src/css/reset.css") 6 link(rel='stylesheet', href="css/style.css") 7 link(rel="stylesheet",href="css/headerall.css") 8 link(rel='stylesheet', href="css/tab.css") 9 link(rel='stylesheet', href="css/sp.css") 10 link(rel='preconnect' href='https://fonts.gstatic.com') 11 title= package.title 12 meta(name='description', content=package.description) 13 meta(name='keywords', keywords=package.keywords) 14 meta(name='robots', keywords=package.robots) 15 16(中略) 17 18include include/_footer 19 script(src="../src/main.js")

該当のソースコード

js?

1var package = { 2 title: '最高にクールなホームページ', 3 description: '最高にクールなホームページです。見ないと損です。', 4 keywords: [ 5 '最高', 6 'クール', 7 '世界一', 8 '天才' 9 ], 10 robots: [ 11 'INDEX', 12 'FOLLOW', 13 'NOODP', 14 'NOYDIR', 15 'NOARCHIVE' 16 ] 17};

試したこと

■main.jsファイルを作成して、その中に定義してpugにはscriptタグで読み込む
→変わらずだめっぽい

■pugのhtmlよりも上の方に定義する
→エラーの意味はよく分からないけど、定義の一行目から「ここがだめ」って指摘されているようなので、多分pugに書いちゃダメなのかと思っています。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

###ご回答の提案策を受けて修正
定義したファイル「setting.pug」はindex.pugと同じ階層。
【エラーメッセージ】

[13:03:42] Starting 'compilePug'... [13:03:42] 'compilePug' errored after 23 ms [13:03:42] Error in plugin "gulp-pug" Message: C:\Users(ファイル)\src\setting.pug:6:12 4| 5| - var package = { > 6| title: '最高にクールなホームページ', ------------------^ 7| description: '最高にクールなホームページです。見ないと損です。', 8| keywords: [ 9| '最高', unexpected text "'最高にク" Details: code: PUG:UNEXPECTED_TEXT msg: unexpected text "'最高にク" line: 6 column: 12 filename: C:\Users(ファイル)\src\setting.pug src: - var package = { title: '最高にクールなホームページ', description: '最高にクールなホームページです。見ないと損です。', keywords: [ '最高', 'クール', '世界一', '天才' ], robots: [ 'INDEX', 'FOLLOW', 'NOODP', 'NOYDIR', 'NOARCHIVE' ] }; toJSON: function () { return { code: this.code, msg: this.msg, line: this.line, column: this.column, filename: this.filename }; } domainEmitter: [object Object] domainThrown: false

【index.pug】

index.pug

1include setting 2 3<!DOCTYPE html> 4html 5 body 6 7 head 8 link(rel='stylesheet', href="../src/css/reset.css") 9 link(rel='stylesheet', href="css/style.css") 10 link(rel="stylesheet",href="css/headerall.css") 11 link(rel='stylesheet', href="css/tab.css") 12 link(rel='stylesheet', href="css/sp.css") 13 link(rel='preconnect' href='https://fonts.gstatic.com') 14 title=package.title 15 meta(name='description', content=package.description) 16 meta(name='keywords', keywords=package.keywords) 17 meta(name='robots', keywords=package.robots) 18 19

【setting.pug】

setting.pug

1 2 3 4 5- var package = { 6 title: '最高にクールなホームページ', 7 description: '最高にクールなホームページです。見ないと損です。', 8 keywords: [ 9 '最高', 10 'クール', 11 '世界一', 12 '天才' 13 ], 14 robots: [ 15 'INDEX', 16 'FOLLOW', 17 'NOODP', 18 'NOYDIR', 19 'NOARCHIVE' 20 ] 21 };

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

問題1:Pug内のロジックはPugファイルで書く

script(src="../src/main.js")を記述してもブラウザ用のjavascriptを読み込む記述を入れるだけなのでPug上では使えません。Pug上でのscriptはPugファイルで記載してください。

※pugでscript書く場合は「-」入れて移行インデントをつけて書き始めてください。
※例ではindex.pugとmain.pugが同一階層にあるものとします。

以下例

main.pug

pug

1- 2 var package = { 3 title: '最高にクールなホームページ', 4 description: '最高にクールなホームページです。見ないと損です。', 5 keywords: [ 6 '最高', 7 'クール', 8 '世界一', 9 '天才' 10 ], 11 robots: [ 12 'INDEX', 13 'FOLLOW', 14 'NOODP', 15 'NOYDIR', 16 'NOARCHIVE' 17 ] 18 };

index.pug

pug

1include main 2 3doctype html 4html 5 body 6 head 7 link(rel='stylesheet', href="../src/css/reset.css") 8 link(rel='stylesheet', href="css/style.css") 9 link(rel="stylesheet",href="css/headerall.css") 10 link(rel='stylesheet', href="css/tab.css") 11 link(rel='stylesheet', href="css/sp.css") 12 link(rel='preconnect' href='https://fonts.gstatic.com') 13 title=package.title 14 meta(name='description', content=package.description) 15 meta(name='keywords', keywords=package.keywords) 16 meta(name='robots', keywords=package.robots)

問題2:Pugの構文エラー

おそらく「=」とobjectの間に空白があるとエラーになります。

pug

1title= package.title × 2title=package.title

投稿2021/06/17 02:53

編集2021/06/17 03:25
runnynose

総合スコア497

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mitrasi

2021/06/17 02:59

迅速なご回答ありがとうございます。 少し今別のやり方試してたところなので質問時点の状況に戻すところなのですが、そもそも定義をjsファイルにしてもよかったのでしょうか? 以下の記事を見て、そもそもjsじゃなくてpugファイルじゃないからかもと思ってpugにしていたところなのですが、、 https://ytyaru.hatenablog.com/entry/2018/04/01/000000
mitrasi

2021/06/17 03:02

ちなみに今質問時点の状況に戻し、タイトル間の余白を詰めてみましたが直りませんでした。すみません…????
runnynose

2021/06/17 03:05

Pug内で使用するロジックはPugファイルにする必要があります! 回答内容も諸々調整しなおしますね! 少々お待ちを。。。
runnynose

2021/06/17 03:24

回答の詳細欄、修正しましたので再度ご確認くださいm(__)m
mitrasi

2021/06/17 04:30 編集

すみません、追記後に「まさか以下の箇所ずらしているかどうかだけで変わったりしないよな」と思ってほんとにおっしゃる通りやってみたらできましたすみません…(土下座) 懇切丁寧にかつ迅速なご教授ありがとうございます。 (以下完全に質問の本質からずれるのでお手隙があればの解答で構いません。) ちなみに該当箇所で-したあとに改行するのとしないのとでは、対象範囲が違うのでしょうか? もしかして、一行完結ならその行だけ、複数行の記述になるならpugの法則的にインデントをずらしているので-の中にあるやつ(インデントさげたもの)がすべて対象みたいになるのかなと認識しています。 - packege {うんたらかんたら} - var packege = { うんたらかんたら }
runnynose

2021/06/17 05:11

上記の認識で合っていると思います! 最近はPug書いてないんですが、昔はゴリゴリ書いていたので、また何かありましたらご相談ください^^
mitrasi

2021/06/17 07:40

ありがとうございます! まだわからないことだらけなので今夜にでもまた質問とぶかもしれません(笑)(;'∀') またよろしくお願いします。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

最適化

最適化とはメソッドやデザインの最適な処理方法を選択することです。パフォーマンスの向上を目指す為に行われます。プログラミングにおける最適化は、アルゴリズムのスピードアップや、要求されるリソースを減らすことなどを指します。