@sashimimochiの技術ブログ

経緯と所感

最近、ちまちま書いていたHTMLファイルがいよいよ肥大化してきたので、細かいコンポーネントに分けて管理したいなと思い始めました。
以前はJSでPHPのincludeみたいなことしてみたり、JQueryのloadを試してみたりしたのですが、私のようによくわからず使っている人間にとっては、JQueryのバージョン違いで動かない…みたいな感じでよくはまった記憶があります。
ホームページのヘッダーの共通化を試みた(改良編) - もちっとメモ

最近、勉強し始めたReactを使えばいいのですが、現在の開発環境の都合上、ちょっと開発しにくいので、できれば他の選択肢で実現したい。学習コストが低くてそれっぽいことができるものはないものかと調べてみたら、どうやらPugを使えばできるらしいので試してみました。
共通部分はパーツ化してHTMLページを作りたい!ということでPugに入門してみた

Pugについてはざっとこのあたりを読みました。

書いているHTMLファイルが単純だったのもありましたが、割と小コストで分割と結合ができました。これは素晴らしい。また、マークアップ言語なのでコードがすっきりしました。タグの閉じ忘れとか減りましたし。

あと、コンパイルツールとして使ったPreprosが思いのほか良かったです。GUIをもっていて、pugファイルを保存するとその場で即コンパイルしてhtmlにしてくれるのでとっても優秀です。エラーならエラー個所と理由も出してくれるし。フリー版でも一定時間ごとに出る広告に目をつぶれば十分に使えます。

実装

それっぽいサンプルコードをさらしておきます。
ディレクトリ構造はこんな感じです。workspaceは適当な作業ディレクトリです。

workspace:.  
│  index.html  
│  index.pug  
│  
└─inc  
        part_1.pug  
        part_2.pug

この中のpugファイルを編集していきます。CSSフレームワークは個人的によく使うのでUIkitで書いてますが、適宜書き換えてください。

index.pug

doctype html  
html(lang="ja")  
    head  
        meta(charset="utf-8")  
        title Sample  
        link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css")  
        script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js")  
        script(src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js")  
        script(src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js")  
    body  
        main  
        div.uk-section  
            div.uk-container  
                h1.uk-heading-primary Sample  
                p.uk-text-mute page description  
                include inc/part1  
                include inc/part2

part1.pug

p.uk-h2 Title  

div.uk-aleart-primary(uk-alert)  
    a.uk-alert-close(uk-close)  
    p hohehoge  

img(src="{{img_path}}")

part2.pug

p.uk-h2 Title2  
form.uk-grid-small(action="#" method="get" enctype="multipart/form-data" uk-grid)  
    legend.uk-legend Legend  
    div.width-1-1  
        input.uk-input(type="text")  
    div.uk-margin(uk-margin)  
        button.uk-button.uk-button-primary Submit

で、最終的にコンパイルされたHTMLファイルがこんな感じになります。

index.html

<!DOCTYPE html>  
<html lang="ja">  
  <head>  
    <meta charset="utf-8">  
    <title>Sample</title>  
    <!-- UI-Kitを試してみました-->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css">  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>  
  </head>  
  <body>  
    <main></main>  
    <div class="uk-section">  
      <div class="uk-container">  
        <h1 class="uk-heading-primary">Sample</h1>  
        <p class="uk-text-mute">page description</p>  
        <p class="uk-h2">Title1</p>  
        <div class="uk-aleart-primary" uk-alert><a class="uk-alert-close" uk-close></a>  
          <p>hohehoge</p>  
        </div><img src="{{img_path}}">  
        <p class="uk-h2">Title2</p>  
        <form class="uk-grid-small" action="#" method="get" enctype="multipart/form-data" uk-grid>  
          <legend class="uk-legend">Legend</legend>  
          <div class="width-1-1">  
            <input class="uk-input" type="text">  
          </div>  
          <div class="uk-margin" uk-margin>  
            <button class="uk-button uk-button-primary">Submit</button>  
          </div>  
        </form>  
      </div>  
    </div>  
  </body>  
</html>

その他参考文献

覚えるのはこれだけ!Pug(Jade)のよく使う9つの書き方

この記事へのコメント

まだコメントはありません