作りながら学ぶVue.js入門（Vol.96掲載）

著者：大津真

JavaScriptフレームワークの中でも、学びやすさと柔軟さで人気を集めている「Vue.js」。本連載では、Vue.jsの基礎から実践的な使い方までを、分かりやすく丁寧に解説していきます。一緒にフロントエンド開発の楽しさを体験してみましょう。第1回では、Vue.jsの概要と、簡単なアプリの作成方法を紹介します。

シェルスクリプトマガジン Vol.96は以下のリンク先でご購入できます。

図3　Options APIを利用したコードの例（抜粋）

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount('#app')
</script>

<div id="app">
  <button @click="increment">Count is: {{ count }}</button>
</div>

import { createApp } from 'vue'

createApp({

data() {

return {

count: 0

}

methods: {

increment() {

this.count++

}

}).mount('#app')

</script>

<button @click="increment">Count is: {{ count }}</button>

</div>

図4　Composition APIを利用したコードの例（抜粋）

<script type="module">
import { createApp, ref } from 'vue'

createApp({
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}).mount('#app')
</script>

<div id="app">
  <button @click="increment">Count is: {{ count }}</button>
</div>

import { createApp, ref } from 'vue'

createApp({

setup() {

const count = ref(0)

function increment() {

count.value++

}

return {

count,

increment

}

}).mount('#app')

</script>

<button @click="increment">Count is: {{ count }}</button>

</div>

図5　SFCファイルの記述例

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

import { ref } from 'vue'

const count = ref(0)

</script>

<button @click="count++">Count is: {{ count }}</button>

</template>

button {

font-weight: bold;

}

</style>

図6　HTML文書のテンプレート例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vueサンプル</title>
</head>
<body>
    <script type="importmap">
            "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
    <script type="module">
        import { createApp, ref } from 'vue'
        createApp({
            setup() {
                // 処理はここに記述
            }
        }).mount('#app') 
    </script>
    <div id="app">
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vueサンプル</title>

</head>

<body>

"imports": {

"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

}

</script>

import { createApp, ref } from 'vue'

createApp({

setup() {

// 処理はここに記述

}

}).mount('#app')

</script>

</div>

</body>

</html>

図8　「sample1.html」ファイルに記述するコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vueサンプル</title>
</head>
<body>
    <script type="importmap"> 
        {
            "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
    <script type="module">
        import { createApp, ref } from 'vue'
        createApp({
            setup() {
                const msg = ref('ハローVue')
                const person = ref({name:'大津真', age: 35})
                return{
                    msg, person
                }
            }
        }).mount('#app')
    </script>
    <div id="app">
        <h1>{{ msg }}</h1>
        <p>{{ person  }}</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vueサンプル</title>

</head>

<body>

{

"imports": {

"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

}

</script>

import { createApp, ref } from 'vue'

createApp({

setup() {

const msg = ref('ハローVue')

const person = ref({name:'大津真', age: 35})

return{

msg, person

}

}).mount('#app')

</script>

<p>{{ person }}</p>

</div>

</body>

</html>

図10　setup()関数の定義コードをこのように変更

setup() {
    const msg = ref('ハローVue')
    const person = ref({name:'大津真', age: 35})
    // 3秒後にリアクティブな変数msgを変更する
    setTimeout(() => {
        msg.value = "ようこそVueの世界へ"
    }, 3000)
    return{
        msg, person
    }
}

setup() {

const msg = ref('ハローVue')

const person = ref({name:'大津真', age: 35})

// 3秒後にリアクティブな変数msgを変更する

setTimeout(() => {

msg.value = "ようこそVueの世界へ"

}, 3000)

return{

msg, person

}

図12　div要素の記述をこのように変更

<div id="app">
    <h1>{{ "反転→ " + msg.split("").reverse().join("")}}</h1>
    <p>{{ `名前: ${person.name}, 年齢: ${person.age}才`  }}</p>
</div>

<h1>{{ "反転→ " + msg.split("").reverse().join("")}}</h1>

<p>{{ `名前: ${person.name}, 年齢: ${person.age}才` }}</p>

</div>