【翔んで】Vue + Vuetifyで確認ダイアログを作成してみた。【Vue.js】

Vue流行ってますね

以前、React + Material-UIで確認ダイアログを作成しまして、
せっかくなので、Vueも試してみることにしました。
初学者の方は、この両方を試してみるとReact/Vueをふんわりマスターできると
思います。Reactもhooksが無かったらヤバかったのではないかと思います。

■Vue & Vuetify CommonDialog

CodeSandbox(https://codesandbox.io)さんでデモも用意してきました。
■DEMO

コード解説

コンポーネント CommonDialog.vue

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="200">
      <v-card justify="center">
        <v-card-title class="headline"></v-card-title>
        <v-row style="width:100%">
          <v-col md="12" align="center">
            <div style="margin-left:15px">{{msg}}</div>
          </v-col>
        </v-row>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="no()">No</v-btn>
          <v-btn color="green darken-1" text @click="yes()">Yes</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>

  export default {
    props: ['msg','isOpen','doYes','doNo'],
    data () {
      return {
        dialog: false
      }
    },
    watch: {
      isOpen: function (val) {
        this.dialog = val
      }
    },
    methods: {
      yes () {
        this.doYes()
        this.dialog = false
      },
      no () {
        this.doNo()
        this.dialog = false
      }
    }
  }
</script>

コンポーネント配置

• :msg ... メッセージ
• :is-open ... 呼出し先の制御ステート
• :do-yes ... 「確認Yes」での実行処理
• :do-no ... 「確認No」でのクローズ処理

    <CommonDialog
            :msg="dlg.msg"
            :is-open="dlg.isOpen"
            :do-yes="dlg.doYes"
            :do-no="dlg.doNo"
    />

用法

<template>
  <v-btn text @click="dlg.isOpen=true">do</v-btn>
</template>
<script>
    export default {
        data() {
          return {
            dlg: {
              msg: 'Message',
              isOpen: false,
              doYes: ()=>{
                ...
                this.dlg.isOpen=false
              },
              doNo: ()=>{
                this.dlg.isOpen=false
              }
            }
          }
        }
    }
</script>

所感

Reactのコンポーネントとは正反対のアプローチですね。

Vueは敷居が低く簡単だ、といわれる所以はこのHTMLベタ書きテンプレートの
おかげだと思いますが、Reactもhooksの登場で、ほとんど難易度は変わらなくなりました。

Vueの特質すべき点は、そのHTMLとしての正統進化かもしれません。

WEBの歴史を見ると、まずHTMLがあり、CSSが現れ、JavaScriptが誕生しました。
Vueはこの３元素をコンポーネントの構成単位にしている訳です。
あくまでもHTMLがあり、そこへイベントを追加していく思想です。

Reactが革新的なのは逆にそのHTMLの柵を開放するため、ビューをJSXでカプセル化した
HTMLにした訳です。なのでビューの構成要素はJSXであって、HTMLではありません。
あのReactマークのクルクルしてる奴はJSXです。ReactはHTMLではないのです。
そういえば、XMLをHTMLにするXSLTというのがありましたが、その系譜なのかもしれません。

HTMLをコンポーネント化するという、この至極あたりまえの思想を実現するために
どれほどの屍が積み上がっていたか、package.jsonにその歴史が記されていますね。

ここで、それぞれの進化の果実を見てみましょう。
あるコンポーネントA、B、Cを条件により表示制御してみます。

Vue

<h2 ...>
	埼玉県人にはそこらへんの草でも食わせておけ
	<A v-if="key === 'A'" />
	<B v-else-if="key === 'B'" />
	<C v-else-if="key === 'C'" />
</h2>

React

const tete = { A:<A/>, B:<B/>, C:<C/> }

<Typography ...>
    Reactか、それ以外か { tete['A'] }
</Typography>