Vue.js製のポートフォリオサイトをPugで書き換えました

f:id:damdom:20171128211358p:plain

Vue.jsでポートフォリオサイト制作記 という技術系同人誌で解説したサイトを Pug で書き換えてみました。

リポジトリは以下。

github.com

解説本はこちら。※ Pug で書き換える前に書いたものです。

booth.pm


動作確認・作業環境


この記事の前提条件

  • vue-cli を使って webpack の環境を用意した状態


事前準備

プロジェクトのディレクトリに移動
※$マークは入力しなくてよいです。ターミナル操作の意味です。

 $ cd www/shirokuma

pug と pug-loader をインストール。pug-loader は webpack で変換するためのパッケージです。

 $ npm i -D pug pug-loader

Brackets に Pug のエクステンションを追加

  1. Brackets を起動して、「ファイル」→「拡張機能マネージャー...」をクリック
  2. pug で検索→追加


修正する

変更するのは vue ファイル。
<template> タグを<template lang="pug"> と修正する。

Pugの書き方の例

■ 例1:変更前(HTML)

      <header>
        <h1 class="site-title"><router-link to="/">サイトのタイトル</router-link></h1>
      </header>

header 要素の部分です。HTMLで見かけない router-link は vue-router のタグで、リンクの役割があります。
これは以下のように書き換えられます。

■ 例1:変更後(Pugでの記述)

      header
        h1.site-title
          router-link(to="/") サイトのタイトル

ちょっと見づらいかもしれません…!

  • 終了タグが不要
  • タグの<>が不要
  • インデントで入れ子を表現する
  • classの指定は.(ドット)ドットの前には半角スペースは不要。つなげて書く。
  • idの指定は#(シャープ) id="top" なら #top と書く。シャープの前に半角スペース不要。
  • 他の属性は( )かっこで括る
  • Vue.js 独自のタグも同様に書ける

その他の修正はリポジトリshirokuma/App.vue at master · becolomochi/shirokuma · GitHub を参考にしてもらいたいのですが、以下のように書き換えました。インデントは半角スペース2個にしています。

■ 例2:変更前の template タグの中

<template>
  <div id="app">
    <div class="header-outer" id="sticky">
      <header>
        <h1 class="site-title"><router-link to="/">becolomochi's portfolio</router-link></h1>
      </header>
      <hnav></hnav>
    </div>
    <transition name="fade">
      <router-view :data="myData"></router-view>
    </transition>
    <fnav></fnav>
    <div class="sns-box">
      <a href="https://twitter.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-github"></i></a>
      <a href="https://becolomochi.tumblr.com" target="_blank" class="sns-link"><i class="fa fa-tumblr"></i></a>
    </div>
    <footer>
      <div class="copyright-box">© 2017 beco</div>
    </footer>
  </div>
</template>

■ 例2:Pug に変更した後

<template lang="pug">
  #app
    .header-outer#sticky
      header
        h1.site-title
          router-link(to="/") becolomochi's portfolio
      hnav
    transition(name="fade")
      router-view(:data="myData")
    fnav
    .sns-box
      a(href="https://twitter.com/becolomochi" target="_blank").sns-link
        i.fa.fa-twitter
      a(href="https://github.com/becolomochi" target="_blank").sns-link
        i.fa.fa-github
      a(href="https://becolomochi.tumblr.com" target="_blank").sns-link
        i.fa.fa-tumblr
    footer
      .copyright-box © 2017 beco
</template>

.sns-box のように、class や id を付与した div 要素の場合は、div を省略して書くことができます。


最後に

Pug の記述方法で難しいなと感じた点を挙げておきます。

  • インデントを気にする点
  • 普通のテキスト中に span タグや a タグが混ざるときにどう書くか一瞬戸惑う
  • 入れ子しまくりでインデントが多い場合
  • 内容が多い場合
  • 複数人でコードを書いたり修正する場合(見づらそう

個人で自由に使うときだけ使おうかな〜と思っています。


参考




べころもち工房 Works

フリーランスとして仕事を始めました

2018年4月よりお仕事募集中です。内容は HTML/CSS/JS のコーディングやイラスト作成です。 お問合わせは Twitter からどうぞ。

Web 技術系同人誌

Vue.js の SPA でポートフォリオサイトを作ったときの制作記。HTML/CSSがひと通りわかっていて、JSが少し書ける方向けです。

booth.pm

ポートフォリオサイト

その他

Tumblr(Web 以外の制作物)

becolomochi (beco) · GitHub