VueJS を使ってみる - 技術をかじる猫

vue js とは
セットアップ方法
- 1. JavaScript 取り込みだけでセットアップ
- 2. ビルド環境構築
構成の確認
ドキュメント
リリース
感想

昨今の Web framework 第二弾、Vue js 3 （この記事書いてる時点で最新のやつ）

vue js とは

Web framework の一つ。
React に比べると大分軽量で、JSX の様な癖が無いのは利点。

セットアップ方法

こちらは、LWC や REACT とは異なり、大まかに二種類の手順があります。

1. JavaScript 取り込みだけでセットアップ

HTML でライブラリを取り込むだけでまず利用できる。
index.html を作成してこんな感じにしたら

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

Python3 でサーバを立ててみます python -m http.server 8000

2. ビルド環境構築

コンパイルして実行するケースもあります。
npm init vue@latest でひな型を作ります。

コマンドに従って、3 コマンド打ちます。

  cd vue-project
  npm install
  npm run dev

構成の確認

ビルド版のひな型を見るのが一番手っ取り早いと感じたので、その構成を確認してみる。
すると、大体こんな構成だった。

project_root
- index.html : src/main.js を呼び出すだけ
- public
  - favicon.ico : アイコンファイル
- src
  - main.js : エントリポイント。実質中身なし
  - App.vue : ルート画面
  - assets : 画像、スタイルシート等の静的コンテンツ置き場
  - components : 画面で利用するサブコンポーネント
    - HelloWorld.vue : HelloWorld 表示コンポーネント
    - ...

見ただけで興味深いのは vue 拡張子か。
独自ファイルと思いきや、中身は JavaScript+HTML+CSS のセットだ。

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

ここで画面の構成を見るとこんなタグ構成。

<div data-v-7a7a37b1="" class="wrapper"> の中身が HelloWorld.vue という事なので、そちらも見てみる。

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

実に素直な作りと言える。
サンプル生成のコンポネントと出力をざっくり読み取れること

コンポーネントは Shadow DOM 化しない。
すなわち、イベント素通りだし、スタイルシートは子階層コンポーネントにも伝播する。
タグの属性は defineProps で定義し、`{{ 変数名 }} でバインド操作できる。
入れ子（コンポーネントの内側に何かを埋め込む）の操作は、slot を使って実行できる。

WelcomeItem.vue 定義

<template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
</template>

それを使う、TheWelcome.vue

<template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

イベントのバインディングはこう書けるらしい。
大分分かりやすいな。

<script setup>
// 変数
const msg = 'Hello!'

// 関数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>