べこのツボ

これ押すとアイデアが出てくる(理想)

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

f:id:damdom:20171128211358p:plain

最近個人的に使い始めた Pug(パグ)、記述量が減って内容を修正しやすくて重宝しています。
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"> と修正する。

  • 終了タグ不要
  • タグの<>が不要
  • インデントで入れ子を表現する
  • クラスの指定は.(ドット)idの指定は#(シャープ)
  • 他の属性は( )かっこで括る
  • Vue 独自のタグも同様に書ける様子

Pugの書き方の例

■ 例1:変更前(HTML)

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

※router-link は vue-router のタグ。
これは以下のように書き換えられます。

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

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

その他の修正はリポジトリ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>


最後に

ポートフォリオサイトなので掲載できる作品を増やしたいです……

Pug の記述でまだ慣れないのが、

  • インデントを気にする点
  • 普通のテキスト中に span タグや aタグが混ざるときにどう書くか
  • for 文(まだまだ使える気がしない

が挙げられますが、それでも終了タグを気にせずに済む点や記述量が減る点がかなり良いです。


参考




べころもち工房 Works

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

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

Web 技術系同人誌

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

booth.pm

ポートフォリオサイト

その他

Tumblr(Web 以外の制作物)

becolomochi (beco) · GitHub