【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編2)

おまたせしました！今日はPug編の2回目です。

今日はPugを使った基礎的な記法をご紹介いたします＼(^o^)／

1回目では環境構築の記事を書いているのでまだの方はぜひ見ておいてください！

frontendblog.hatenablog.com

まずはフォルダにsrc/pug/というディレクトの下にindex.pugというファイルを作成します。続いてPugに下記の記述をします。

doctype html
html(lang="en")
 head
 meta(charset="UTF-8")
 meta(http-equiv="X-UA-Compatible", content="IE=edge")
 meta(name="viewport", content="width=device-width,
 initial-scale=1.0")
 title Document
 body
 p.test1 これはテスト
 p.test2 これはテスト
 p.test3 これはテスト
 p.test4 これはテスト
 p.test5 これはテスト

見てみると閉じタグがないですよね！これがPugの書き方です。

PugはCSSでいうとSassのようなものなのでこれをコンパイルしてHTMLに変換します。

上記の書き方ですとbodyタグの中にpタグを入れ子にするために半角スペースをあけますそうすると下記のようなHTMLファイルが出力されます。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <p class="test">これはテスト</p>
 <p class="test2">これはテスト</p>
 <p class="test3">これはテスト</p>
 <p class="test4">これはテスト</p>
 <p class="test5">これはテスト</p>
 </body>
</html>