BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. gulp + Pug で静的ページコーディング その2
by 漢ムラタ 漢ムラタ

gulp + Pug で静的ページコーディング その2

gulp + Pug で静的ページコーディング その2

どうも、ヨドバシのPS5予約抽選に落ちて絶望しているムラタです。

以前ご紹介した「Pug」ですが、意外にもあれから何度か使う機会があり、前回知らなかった使い方や便利な記述方法などを知ることができたので、それらをご紹介したいと思います。

Pugの基本的な使い方やgulpでのPugの使い方については前回の記事を参照してください。

gulp + Pug で静的ページコーディング

ファイル構成

最近自分がpugを使用する場合、以下のようなファイル構成で構築を行っています。

include」は前回の記事でも紹介したinstall機能で使用するヘッダーやフッターなどほとんどのページで共通して使用するパーツになります。

layout」は前回では「_layout.pug」として単一のファイルとしていましたが、TOPと中ページなどレイアウトが結構変わることがほとんどなので、TOP用の「_top.pug」と中ページ用の「_page.pug」の2つに分けています。
「if」などの分岐で済むようなちょっとした差分しかないのであれば、場合によっては1つでもいいかもですね。

mixin」には使いまわすブロックをそれぞれファイルで分岐して格納しています。

そして今回は「pug」ディレクトリ直下に「_config.pug」というファイルを用意しています。
「config」ディレクトリを切ってもいいかもですね。

configファイル

このファイルの中に何が記述されているかというと、「サイトタイトル」や「ルートパス」、「cssやimgなどの各ディレクトリへのパス」といった、サイト全体で使用する情報を変数で格納しています。

自分は下記のような感じで記述しています。
通常の変数と判別がつきやすいように全て大文字で定義するようにしています。

そしてこの_config.pugをlayoutファイル内の冒頭でincludeして使用しています。
例えば下記のようになります。

例えば_head.pug内で以下のような形で使用します。

各ページファイルで連想配列でページタイトルやdescription、各種OGP情報等ページに関わる情報を格納しているんですが、上記はページタイトルの有無でTOPかそれ以外かで出力させる内容を分岐させています。

TOPであれば「{サイト名}」だけの出力で、それ以外は「{ページタイトル} – {サイト名}」となります。

三項演算子による分岐

例えばある変数の値によってclass名を分岐させたいとき、if分を使って分岐させるのが一般的ですが、その場合以下のように記述します。

この場合、pタグではなくdivタグに変更になった際や、中身のテキストが変わった際に2回修正をかける必要があり、なんだかスマートじゃないですね。

そういった時に三項演算子を使うと簡潔に書くことができます。

スマートになりましたね。

class等の属性ではなくテキストを変えたいときは以下のようにします。

複数のクラス名を配列でまとめて指定

2つ以上のクラスを指定する場合、配列でまとめて指定することもできます。

これで「<tr class=”reserve-timetable__status reserve-timetable__status–end”>」と出力されます。

インラインスタイルを連想配列で指定

style属性を用いてインラインスタイルを適用する場合、連想配列で指定することができます。

エスケープ処理

下記の記述でテキストの内容をエスケープ処理して出力することができます。

エスケープ処理したいテキストを「=」で指定することで下記のように出力されます。

逆にエスケープ処理してほしくないときは

「!=」とすることでエスケープ処理されずにそのまま出力されます。

ifとunless

unrellはifの結果が偽の時と同じ処理になります。

上記2つの処理は同じということです。
まあ別にどっち使ってもいいんじゃないかと思うんですけど、unlessの方が馴染みが無いので普通にifでいいですね。

最後に

今回はちょっと短めですが、今後また新しい発見やもっと便利な使い方が見つかるかも知れないのでその時はまたご紹介します!

ページの先頭に戻る