楽をしてWEBページを作ろう STEP2 `WALK` (Vue Pug Sass TS Buefy)

## 前記事
[前記事](https://qiita.com/narumi18wa/items/2a1a9447a7c6df614efd)

## WALK
### Sample.vueを開こう
#### ${project_dir}/components/sample/sample.vue
* \<template lang='pug'>
    * HTMLに相当
    * [pug記法](https://pugjs.org/language/plain-text.html)
        * インデントでタグのネストを表現
    * [Vue](https://jp.vuejs.org/v2/guide/)
        * `@click` でクリックイベントを指定
    * [Buefy](https://buefy.github.io/#/documentation/start)
        * `.columns` と `.column` により横並びを表現
        * `b-****` タグ (b-input等)

```
.vue-sample
    .vue-functions
        h3 Vue 機能
        .chapter
            h4 画像の読み込み
            .has-text-centered
                img.vue-logo(v-bind:src='imgs["vue-logo"]')

        .chapter
            h4 データバインド
            .indent
                b-field(label='INPUT')
                    b-input(v-model='text')
                b-field(label='OUTPUT')
                    b-input(v-model='text' readonly)

        .chapter
            h4 算術プロパティ
            .indent
                .columns
                    .column.is-3: span 算術プロパティ:
                    .column: span {{ calcProperty }}

                .columns
                    .column.is-3: span メソッド:
                    .column: span {{ method() }}

    .buefy-components
        h3 Buefy コンポーネント
        .chapter
            h4 dialog / modal / toast / snackbar
            .columns.is-multiline
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showAlert') Show alert
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showModal') Show Modal

                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showToast') Show toast
                .column.is-6.has-text-centered
                    a.button.is-primary(@click='showSnackbar') Show snackbar
```

* \<script lang='ts'>
    * JavaScriptに相当
    * [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
        * 型のあるJavaScript
    * [vue-class-component](https://github.com/vuejs/vue-class-component)
    * [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
    * ES6 class
        * Javaのようなクラス

```ts
import { Vue, Component } from 'vue-property-decorator';
import VueUtil from '@/scripts/util/VueUtil';
import SampleModal from '@/components/sample/SampleModal.vue';

/**
 * Vue Component
 */
@Component
export default class Sample extends Vue {
    /**
     * 画像読み込み
     */
    protected imgs = {
        'vue-logo': require('@/resources/img/vue-logo.png')
    } as Imgs;

    protected text = 'Hello Vue.';

    protected beforeCreate(): void {
        VueUtil.registerComponents([SampleModal]);
    }

    /**
     * 算術プロパティ例
     */
    protected get calcProperty(): string {
        return `${this.text} And hi there!`;
    }

    /**
     * メソッド例
     */
    protected method(): string {
        return `${this.text} And hi there!`;
    }

    /**
     * アラート
     */
    protected showAlert(): void {
        this.$dialog.alert('Show alert !!');
    }

    /**
     * モーダル
     */
    protected showModal(): void {
        this.$modal.open({component: SampleModal});
    }

    /**
     * トースト
     */
    protected showToast(): void {
        this.$toast.open('Show toast !!');
    }

    /**
     * スナックバー
     */
    protected showSnackbar(): void {
        this.$snackbar.open('Show snackbar !!');
    }
}
```

* \<style lang='sass' scoped>
    * CSSに相当
    * scoped css
        * このVueにだけスタイルを反映する
    * [SASS記法 (not SCSS)](https://sass-lang.com/guide)
        * インデントでネストを表現

```sass
@import 'variable'

.vue-sample
    background-color: $white

    h3
        font-size: 1.5em
        margin-bottom: 0.75rem

    h4
        font-size: 1.2em
        margin-bottom: 0.75rem

    .chapter
        position: relative
        margin-bottom: 2rem

    .vue-logo
        width: 80px
        height: auto
```

## 次記事
[まだ](#)