vue チュートリアルをやってみる

Vue とは

説明は次のように書かれている。

Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSSJavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。

フレームワークがピンと来なかったので少し調べました😅『フレームワーク』はアプリケーション開発するために必要な機能があらかじめ用意された枠組みのことを言うらしい。

よって、Vue は HTML, CSS, JavaScript であらかじめ用意されたアプリケーション開発のための枠組みと言えそう。

主として、MVC(Model View Controller) モデルの View 層を扱い、比較対象には Angular, React.js などがある。

Vue コンポーネントの2つのスタイル

Vue コンポーネントには Options API, Composition API の異なる API スタイルを利用できる。

前者の Options API は『コンポーネントインスタンス』を中心とし、オブジェクト指向プログラミングっぽさがある。this を使って関数内からアクセスができる。

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  },

  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

後者の Composition API はインポートした各種 API 関数を用いてコンポーネントのロジックを定義する。複数の関数の組み合わせによって、状態を組み立てて複雑な処理を行うと言うのがコアになっている。

Options API と同じ処理を Composition API で置き換えたものが次のもの。

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

Vue アプリケーションの作成

前提条件

  % node -v
  v18.12.1

テンプレートを作る

下記コマンドを実行して、Vue の単一ファイルコンポーネントを使用できるようにする。オプション機能についてよくわからなければ NO でいいとのことだったので、ESLint と Prettier だけ YES にした。

% npm init vue@latest 
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … todo-app
✔ Package name: … todo-app
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

プロジェクトが生成されたら、下記コマンドを実行して、依存関係をインストールして開発サーバを起動する。

% cd 
% npm install
% npm run dev

npm run dev を叩くと Local: http://localhost:5173/ のようなメッセージが出るのでブラウザで開いてみると下のように Web ページが見れるようになっている。

image.png

上記のコマンドは開発用に用いるもので、プロダクション環境に出す準備ができた場合は、npm run build を実行する。.dist 以下にプロダクション実行用のプロジェクトが生成される。

% npm run build

> todo-app@0.0.0 build
> vite build

vite v4.2.1 building for production...
✓ 23 modules transformed.
dist/assets/logo-277e0e97.svg    0.28 kB
dist/index.html                  0.42 kB
dist/assets/index-1da8cd0c.css   3.68 kB │ gzip:  1.20 kB
dist/assets/index-a911f458.js   62.95 kB │ gzip: 24.96 kB

アプリケーションのインスタンスを作る

Vue アプリケーションでは、createApp 関数でアプリのインスタンスを作るところがスタート。

import { createApp } from 'vue'

const app = createApp( {/* ルートコンポーネント オプション */} )

createApp へ渡すオブジェクトはコンポーネントとなっている。単一ファイルコンポーネントの場合、次のように他のファイルからインポートする。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

複数のアプリケーションインスタンスを同一ページに配置する場合は、次のように独自の設定やグローバルアセットのスコープとなるようにする。基本的に、複数の小さなアプリのインスタンスを作成し、それぞれの受け持つ要素上でマウントする。

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

アプリケーションのマウント

アプリケーションインスタンスは、.mount() メソッドが呼ばれるまで何もレンダリングしない。

参考