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

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

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

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

Q&A

解決済

Pug のループ時にa要素をどのように組み込んでいいのか分かりません

退会済みユーザー

退会済みユーザー

総合スコア0

Pug

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

1回答

0グッド

0クリップ

192閲覧

投稿2022/08/08 04:19

前提

Pugを勉強中です。
月ごとのページに飛ぶメニューを作っています。
ループを入れ子にして作ってみようと思うのですが
どうやってa要素を入れていいか
わかりません。

実現したいこと

2022 01 02 03 04 05 06 07 08 09 10 11 12
2021 01 02 03 04 05 06 07 08 09 10 11 12
2020 01 02 03 04 05 06 07 08 09 10 11 12

各月にリンクを張りたい

該当のソースコード

pug

1body 2 - var y = 2022; 3 - var m = 01; 4 5 while y > 2019 6 ul.flex 7 li.year= y-- 8 while m < 13 9 li.month= m++ 10 - var m = 01;

.flex と .year と .month は レイアウト用のクラスです。
よくあるループのサンプルを参考に
変数を入れてみました。
各月にリンクを張りたいので

pug

1li.month= m++

のところを

pug

1li.month a(href="#") m++

こんな意味合いの形にしたいのですが
実際にやろうとすると
Invalid string length とエラーが出ます。
コンパイルは preprosです。

教えていただければありがたいです。

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

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

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

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

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

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

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

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

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

回答1

1

ベストアンサー

こんにちは!
最初にですが、

  1. li.year の入れ子が即 li.month となっていますが、htmlの構造上 ul ないし ol が必要なので注意しましょう
  2. - var m = 01; が2度定義されている

エラーについて

li.month a(href="#") m++
ですが、https://pugjs.org/language/code.html#buffered-code にもあるように、jsの評価として=で繋ぐというルールがあります
なので、while文の m が評価されずループし続けた結果、Invalid string length となったんだと思います

回避策としては以下の2パターン

・パターン1 // a を入れ子にして a に = をつける li.month a(href="#")= m++ ・パターン2 // ワンライナーで書く場合「:」で繋ぎ、a 側に = をつける li.month: a(href="#")= m++

参考例

- var y = 2022 ul.flex while y > 2019 li.year= y-- - for (var m = 1; 13 > m; m++) li.month if (m > 9) a(href="")= m else a(href="")= `0${m}`
  • whileの入れ子だとうまく行かなかったので、for文で記述
  • 変数はbodyの外に記述した方が良さそう
  • monthを01、02としたいのであれば、今の変数はNumber型なので、01とはならない
    • if文とテンプレートリテラルを使って記述した方が良さそう
    • 回避策パターン2だと li.month が2回出てくるのでパターン1で記述
  • for文やif文、テンプレートリテラルについては解説しません

投稿2022/08/09 10:43

Banksy_Not-him

総合スコア75

退会済みユーザー👍を押しています

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

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

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

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

回答へのコメント

退会済みユーザー

退会済みユーザー

2022/08/10 02:51

ありがとうございます、できました! 仕様書をよく読んでないのを痛感しました。 javascriptの部分を強化して勉強したいと思います。 また何かありましたらよろしくお願いします。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Pug

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