スクラッチから始める、Nuxt.jsでBootstrap4 (導入からテーブル表示編)

開発Divのeciです。

Vue良いですね。Vue

今回はNuxt.jsでBootstrap4(Bootstrap-Vue)を使ってみようと思います!
なぜBootstrapなのかですか?
今はVueを勉強中なので、デザインは使い慣れたもの一択だっただけです...

前回と同様に、Nuxt.jsのインストールから始めます。 「HelloWorld」大切です。

では、行きましょう

下準備

ディレクトリを作成

$ mkdir hello-bv
$ cd hello-bv

package.jsonの作成

helloディレクトリ直下にpackage.jsonを作ります。

{
  "name": "hello-bv",
  "scripts": {
    "dev": "nuxt"
  }
}

Nuxt.jsのインストール

npm install --save nuxt

最初のページを作成

$ mkdir pages
$ cd pages

pagesディレクトリに、index.vueを作ります。

<template>
  <div class="container">
    <h1>hello-bv</h1>
  </div>
</template>

起動

$ npm run dev

ブラウザで「localhost:3000」に行くと、「hello-bv」と表示されると思います。

ここからが今回のメインです。

Bootstrap-Vue

Bootstrap-Vueのインストール

$ npm install bootstrap-vue

たったこれだけで準備は完了です。
試しにindex.vueを変えてみましょう

page/index.vueの編集

Badgeを追加してみます。

<template>
  <div class="container">
    <h1>hello-bv
      <b-badge>New!</b-badge>
    </h1>
  </div>
</template>

起動

$ npm run dev

「New!」のBadgeが表示されましたか?されましたよね?されたとしましょう。

本当はココまでだったのですが、査読者に怒られてしまいましたので、もう少し頑張ります

Table表示編

データの作成

まずはデータを作りましょう。
index.vueのscriptタグにitems配列だけを返す、dataメソッドを定義します。

<script>
  export default {
    data: () => {
      return {
        items: [
          {id:1, name: 'みかん', price: 1000, stock: true},
          {id:2, name: 'りんご', price: 2000, stock: true},
          {id:3, name: 'いちご', price: 800, stock: false},
          {id:4, name: 'メロン', price: 5000, stock: true},
        ],
      }
    }
  }
</script>

テーブルの定義

index.vueのtemplate部分を↓のように書き換えます。
<b-table>タグを追加するだけです。

<template>
  <div class="container">
    <h1>hello-bv
      <b-badge>New!</b-badge>
    </h1>
    <b-table :items="items">
    </b-table>
  </div>
</template>

いかがですか?
たったこれだけでテーブル表示も出来てしまいました!

表示されるカラムを定義する

上記のようにitemsの全てのカラムを表示する場合は今のままでいいのですが、
各カラムの表示/非表示を制御したり、フォーマットを変更したい時は、↓のようにします。

<script>
  export default {
    data: () => {
      return {
        fields:[
          {key: "id"},
          {key: "name"},
          {key: "price"},
          {key: "stock"},
        ],
        items: [
          {id:1, name: 'みかん', price: 1000, stock: true},
          {id:2, name: 'りんご', price: 2000, stock: true},
          {id:3, name: 'いちご', price: 800, stock: false},
          {id:4, name: 'メロン', price: 5000, stock: true},
        ],
      }
    }
  }
</script>

次に、<b-table>タグに、「:fields="fields"」を追加してください。

<template>
  <div class="container">
    <h1>
      hello-bv&nbsp;<b-badge>New!</b-badge>
    </h1>
    <b-table :items="items" :fields="fields">
    </b-table>
  </div>
</template>

これまでと変わりなく表示されていると思います。

もう少し頑張ります

見出し行を変える

このままですと、日本人にあまり優しくないです。
日本人フレンドリーに見出し行を変えてみましょう。

<template>
  <div class="container">
    <h1>hello-bv
      <b-badge>New!</b-badge>
    </h1>
    <b-table :items="items" :fields="fields">
      <template slot="HEAD_name" slot-scope="data">
        名前
      </template>
      <template slot="HEAD_price" slot-scope="data">
        価格 
      </template>
      <template slot="HEAD_stock" slot-scope="data">
        在庫 
      </template>
    </b-table>
  </div>
</template>

日本人に優しくなりましたか?

ただ、このままですとまだ職場の先輩に怒られてしまいます。
数字項目の部分を修正しましょう。

金額項目の対応を行う

3桁ごとにカンマを入れて、右寄せします。
fieldsのpriceカラムの設定のところに、formatterメソッドとtdClassを定義します。

<script>
  export default {
    data: () => {
      return {
        fields:[
          {key: "id"},
          {key: "name"},
          {key: "price",
            formatter:(value)=> {
              return value.toLocaleString()
            },
            tdClass: "text-sm-right"          
          },
          {key: "stock"},
        ],
        items: [
          {id:1, name: 'みかん', price: 1000, stock: true},
          {id:2, name: 'りんご', price: 2000, stock: true},
          {id:3, name: 'いちご', price: 800, stock: false},
          {id:4, name: 'メロン', price: 5000, stock: true},
        ],
      }
    }
  }
</script>

在庫カラムを修正する

<script>
  export default {
    data: () => {
      return {
        fields:[
          {key: "id"},
          {key: "name"},
          {key: "price",
            formatter:(value)=> {
              return value.toLocaleString()
            },
            tdClass: "text-sm-right"          
          },
          {key: "stock",
            formatter:(value)=> {
              return value ? "あり" : "なし"
            },          
          },
        ],
        items: [
          {id:1, name: 'みかん', price: 1000, stock: true},
          {id:2, name: 'りんご', price: 2000, stock: true},
          {id:3, name: 'いちご', price: 800, stock: false},
          {id:4, name: 'メロン', price: 5000, stock: true},
        ],
      }
    }
  }
</script>

完成です!
ドヤ顔で先輩に出来ました報告してみてください。

まとめ

Bootstrap-Vueは、ドキュメントもかなり揃っていて、あまり困ることはありませんでした。
実戦投入しても問題ないレベルなのではないでしょうか?
これから色々なComponentを試して行きたいと思います。