こんな悩みないですか？

HTMLって正直めんどくない？

Web開発や主にフロントエンドを触れている方、HTMLを触ったことある方は多分一度は思ったことあると思うのですが、・divとか、頭と終わりで挟むのダルい・なんか動かんと思ったら閉じタグ消えてた・開始タグ消しても、閉じタグがキモい感じで残ってうざい・VS Codeの拡張機能で自動で出るけど、たまにタグエラー起きて発狂しそう ...etc と、タグ関連で意図しないエラーや不備が出ることもあります。あとは僕は単純に、「毎回class="~~" id="~~"書くのダルい」ですね。笑

そんな方にお勧めしたいのが、【Pug（パグ）】を紹介したいと思います！これを使うと、・開始と閉じタグ使わない。・cssの結びつけクソ楽・div省略できるなどなどめちゃくちゃ楽になります！

そもそもPug（パグ）とは？

Pug（パグ）は、HTMLの機能を拡張して効率よくコーディングすることができるテンプレートエンジンです。主に、JavaScriptやNode.jsで使用することを目的に誕生しまものです。 ※そのため、コンパイル（Pugの記法で書いたコードをHTMLに変換）する必要があります。 Pugの大きな特徴としては以下の三つがあります。

Pug（パグ）の特徴・メリット！

開始・閉じタグが不要 ⇒初っ端からh1やpで記述できる！
書き方をCSSと統一できる ⇒いつもは「class="~~"」と書くのだが、cssで書くように「.~~」と記述できる！
少ない記述 ⇒タグ不要やcss設定の他にも、divの記載も省略できる！

最初はPugの記法は独特感じるかもしれません。（僕も最初は「なにこれ？やりにくくない？」でした。）ですが4,5回やっていくうちに、「Pugやべぇ。もう普通のHTML戻れねぇわ。」ってなります。さっそく、Pugを触ってみましょう！

Pug（パグ）実践

まずは例を見てみよう

まずはPugと通常のHTMLを見比べてみましょう。上がPugで下がHTMLになります。

 h1.title.is-2#content-top-title タイトル
section.section
  h2.title.is-3 タイトル
  p.subtitle テキスト
  .card 
    p.subtitle.is-6#card-title テキスト

 <h1 class="title is-2" id="content-top-title">タイトル</h1>
<section class="section">
  <h2 class="title is-3">タイトル</h2>
  <p class="subtitle">テキスト</p>
  <div class="card">
    <p class="subtitle is-6" id="card-title"></p>
  </div>
</section>

どうでしょう！めちゃくちゃコンパクトじゃないですか？ PugではHTMLのタグの名前や属性名をそのまま使うので、HTMLを知っていれば結構簡単に使えるようになると思います。学習コストは結構低めかと。違和感を感じるところと言えば、・空っぽすぎて変な感じ・div class="card" → .card なの？・.~ や#~ってなんなの？とかでしょうか？その部分を踏まえて具体的に解説していきます。

開始・閉じタグが不要になるって？

まずPugの特徴といったこれです。閉じタグを書かなくても良くなるので、HTMLに比べて記述量が圧倒的に減ります。さらに、divの場合は省略が可能です！(divにクラスかidがある場合のみ)つまり、インデントとタグ名だけで表現できるので、ものすごくシンプルになり、「ほんとにこんだけでいいの？」と言うぐらいコード量が少なくなります。

 article
  h1 タイトル
  section
    h2 タイトル
    ul.columns
      li 
        .column リスト1
      li 
        p.column リスト2
      li
        a.column(href="") リスト3

 <article>
  <h1>タイトル</h1>
  <section>
    <h2>タイトル</h2>
    <ul class="columns">
      <li>
        <div class="column">
          リスト1
        </div>
      </li>
      <li>
        <p class="column">リスト2</p>
      </li>
      <li>
        <a class="column" href="">リスト3</a>
      </li>
    </ul>
  </section>
</article>

ほらね！行数も1行のコード数も格段に減っています！(閉じタグで改行しやすいarticleとかを使っていますが...)基本的な形は、タグ.クラス名1.クラス名2～#id名(属性など) のように、最初にタグ名で、その次にクラス名(複数可能)そして最後にid名を置きます。aタグなどの属性(href=""とか)が必要な時は最後に(href="")のように丸かっこでつけます。すごいスッキリしてますよね！めちゃくちゃ楽になります！

書き方をCSSと統一できるってどゆこと？

通常、class="～"のように記述します。毎回class=って書くのめんどくさいですよね？ Pugだとくっそ楽になります！前項の例のように、Classはドット(.)、idはシャープ(#)でCSSのの書き方と同じでいけます。これによってコピペですぐ反映できるのでとても便利です。

他にもメリットあるの？

Pugのメリットとして、ファイル分割が可能になります。サイトの中でよく使うもの、例えばヘッダーやフッターなどを毎ページ書いているとめんどくさいですし、修正が入ると地獄になります。そんな「繰り返し使うもの」を"部品"として別にわけることができます。※Nuxtの「コンポーネント」と同じようなものです。他にも、「変数、条件分岐、繰り返し」ができます！※Nuxtとかぶるので割愛します。

まとめ

今回はHTMLが楽になるPugを解説してみました！慣れるとめちゃくちゃシンプルに効率的で少ないコードで書けるようになります。まずはHTMLとCSSの知識が必要になるので、HTMLを勉強した上で使ってみましょう！