Web素人がVueのtutorialをやってみる その1 (Step1/15 ～ Step4/15 まで)

背景・概要

籍は半導体の開発設計部署ですが、DXの一環で業務WebアプリのPoCに携わることになりました。
そこでVueの公式チュートリアルを実施してみます。

前提

私の知識

Pythonでデータ変換ツールを作ったことがあり、クラスやオブジェクト指向について少し勉強しました（まるで分っていません）
Webについては同じくPythonでスクレイピングをしたことがあるだけで、HTMLとCSSがわずかに読めるくらいです。
JSに至っては基本文法のチートシートをチラ見しただけ。

不安はありますがとりあえずやってみます。

学習の方針

チュートリアルをStep1からSteo15までばーっと流しつつ気になるところはメンターを召喚して聞いていこうと思います。

メンター

ChatGPT。最近なにかとお世話になっています。

Step1

チュートリアルの設定について

APIスタイル

Vueには流派が2つある。 OptionsAPIとCompositionAPI。
前者が簡潔で初心者向けだが再利用性が低く、後者がその逆だそう。本記事ではOptionsAPIを採用。

SFC モード

VueではHTML/CSS/JSの各ファイルをすべて単体のファイルにまとめて記述することができる。
これまた初心者に優しそうな仕様なのでこれも採用。

Step2

Vueの中核機能：宣言的レンダリングについて。

宣言的レンダリング

公式の概要は以下の通り。

Vue の中核となる機能は宣言的レンダリングです。HTML を拡張したテンプレート構文を用いて、JavaScript の状態に基づいて HTML がどのように見えるかを記述することができます。

よくわからんかったがサンプルコードを見るに、要はJavaScriptの状態とHTMLを簡単に紐づけて描画できるものだと解釈する。
チュートリアルの宣言的レンダリングの基本構文は下記。

宣言的レンダリング.Vue

<script>
export default {
  // component options
  // declare some reactive state here.
}
</script>

<template>
  <h1>Make me dynamic!</h1>
</template>

scriptタグにコンポーネントの定義のJavascriptを、templateタグにHTML（と制御用のJavaScript式）を書くイメージ。
templateタグ内ではマスタッシュ（mustaches:口ヒゲ）構文->{{プロパティ}}を使ってJavaScriptの状態をHTMLのテキストに紐づけることができる。
scriptタグではコメントにもある通り、コンポーネントオプションとしてリアクティブな状態を宣言する。...急に用語が増えた(泣)

用語	意味
コンポーネント	Webアプリを細かいパーツ単位に分割するための仕組み。単体のVueファイルが単体のコンポーネントを表す？
オプション	コンポーネントの動作、構造を決定するためのJavaScriptオブジェクト。Vue規定のものが用意されている
状態	アプリの実行に伴って時々刻々変わるプロパティの値のこと?
リアクティブ	値の変化により画面の更新をトリガーできる状態はリアクティブであるとされる

Step2 実践

ようやく実践。実際にdata()オプションを追加し、そのプロパティをh1タグから参照してみる。

Step2.Vue

<script>
export default {
  // component options
  // declare some reactive state here.
  data() {
    return {
      message: '(^o^)'
    }
  }
}
</script>

<template>
  <h1>{{ message.split('').reverse().join('') }}</h1>
</template>

結果のプレビューが下図
テキストの変更が確認できる

Step3

ディレクティブについて

ディレクティブ

先頭がv-で始まるVueの特別な属性のこと。
Step2のマスタッシュ構文がHTMLのテキスト部分を補完したのに対し、タグの属性を動的に変更するにはディレクティブを用いる。

ディレクティブの構文は次の通り。
<div v-bind:id="dynamicId"></div>

頻繁に用いるので省略記法がよく使われる。属性の前にコロンを付けるだけ。
<div :id="dynamicId"></div>

Step3 実践

Step3.Vue

<script>
export default {
  data() {
    return {
      noisyClass: 'noisy',
      gentleId:'gentle'
    }
  }
}
</script>

<template>
  <ol>
  	<li>Don't make me red</li>
    <li :class=noisyClass>Here!!! make me red! plz!!!</li>
    <li :id=gentleId>By the way, Would you like to something to eat ?</li>
  </ol>
  <h1 :class=noisyClass>Make me red</h1>
</template>

<style>
.noisy {
  color: red;
}
#gentle {
  color: blue;
} 
  
</style>

結果は下図

Step4

イベントリスナーについて。
v-onディレクティブによりイベントを取得できる。

<button v-on:click="increment">{{ count }}</button>

これまた頻繁に使われるので省略記法がある。属性名の先頭に@を付けるだけ。

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

Step4実践

Step4.vue

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // コンポーネントの状態を更新する
      this.count++
    }
  }
}
</script>

<template>
  <!-- make this button work -->
  <button @mouseover="increment">One More Set !! : {{ count }}</button>
</template>

結果
カーソルを乗せるたびにカウントが増える

続く？

記事作りながらの実践はエネルギー使いますね。
次回に続きます...多分。