Vue.js触ってみた

# はじめに
Azure Kubernetes ServiceにのせるQuarkus（Javaのコンテナフレームワーク）アプリを作っていた時にモダンなフロントエンドフレームワークであるVue.jsを使ってアプリを書いてみました。
その時に学んだことをアウトプットしておきます。

# Vue.jsとは
双方向バインディングや条件付きレンダリングなど様々な便利機能を持つことが特徴のフロントエンドフレームワーク。
### クイックスタート
https://ja.vuejs.org/guide/quick-start.html

## Vue.jsのコンポーネント
引用

https://ja.vuejs.org/guide/essentials/component-basics.html

> コンポーネントによって UI を独立した再利用可能なピースに分割し、それぞれのピースを切り離して考えることができるようになります。アプリケーションはネストされたコンポーネントのツリーによって構成されているのが一般的です
> 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475719/c3468cb9-2de7-a81f-6ab9-0511cae22141.png)


Vueは画面の特定の部分や機能を担当する再利用可能なユニットをコンポーネントという単位でファイルを分ける。

## VScodeでVue.jsの開発環境を整える

https://qiita.com/tetusan/items/81b1f863f28731dcb19c

https://zenn.dev/sdkfz181tiger/books/363d20b1e591fc/viewer/7a8706


# Vue.jsの機能
## 双方向バインディング
見た目と実データをリアルタイムで同期させる仕組み。
つまり、データが変更されると同時にUIが自動的に変化し、UIが変化するとリアルタイムでデータにも反映される。この双方向のデータフローによってコードが簡潔に記述できる。

```jsx
<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475719/9450d308-dbee-08e4-1347-a53abb2c98bc.png)
※フォームにユーザが入力した内容がリアルタイムにmsgに反映されるためh1が変わる。

### scriptタグ
javascriptを書くところ。

- export default→このファイルがvueコンポーネントであることを示す。
- data()関数→このvueコンポーネントが持つデータを定義するための関数。
- return文→{ msg: ‘Hello World!’ }というオブジェクトを返すために使用される。

### template
HTMLを書くところ。

‘{{ }}’を使ってスクリプト部分で定義されたメソッドや変数を使うことができる。
```
<input v-model="msg">
```
→HTMLのinputタグ。v-modelディレクティブはvueの双方向データバインディング。入力フィールドとmsgプロパティの値を同期させ、それが結果的にh1タグのmsgにも反映される。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

## クライアントサイドルーティング
引用

https://ja.vuejs.org/guide/scaling-up/routing

> サーバーサイドのルーティングとは、ユーザーがアクセスしている URL のパスに基づいて、サーバーがレスポンスを送信することを意味します。従来のサーバーレンダリングの Web アプリでリンクをクリックすると、ブラウザーはサーバーから HTML レスポンスを受け取り、新しい HTML でページ全体を再読み込みします。
> 
> しかし [**Single-Page Application**](https://developer.mozilla.org/ja/docs/Glossary/SPA)(SPA) では、クライアントサイドの JavaScript がナビゲーションを横取りし、動的に新しいデータを取得し、ページを完全に再読み込みすることなく現在のページを更新します。これは一般的に、ユーザーが長期間にわたって多くのインタラクションを実行することが期待される実際の「アプリケーション」のようなユースケースで特に、より迅速なユーザーエクスペリエンスにつながります。
> 
> このような SPA では「ルーティング」はクライアントサイド、つまりブラウザーで行われます。クライアントサイドのルーターは、[**History API**](https://developer.mozilla.org/ja/docs/Web/API/History) や [**`hashchange` イベント**](https://developer.mozilla.org/ja/docs/Web/API/Window/hashchange_event)などのブラウザー API を使用して、アプリケーションのレンダリングビューを管理する責任を負っています。
> 

ユーザが最初にホーム画面を訪れた段階で、サーバは自動的にindex.htmlとvueコンポーネントすべてを返す。
**それ以降の画面遷移はユーザ側のリクエストが直接サーバにいくことはなく、クライアント側のvueのルーティング機能を使ってページの遷移が行われる。** 
そして、遷移にあたって情報が必要な時に適宜非同期にvueがサーバのAPIを呼ぶ。

### 処理フロー
上記を踏まえた上での処理フローは以下のようなイメージとなる。
（例）
フロントエンド：Vue.js
バックエンド：Quarkus

### **ステップ1: 初期リクエストの処理**

- **Quarkus（バックエンド）の役割**:
    - ユーザーがWebブラウザでアプリケーションのURLにアクセスしたとき、最初のリクエストはQuarkusサーバーによって処理される
    - この時点で、Quarkusサーバーは主に静的コンテンツ（HTML、CSS、JavaScriptファイルなど）を提供する役割を担う
    - QuarkusはVue.jsアプリケーション（フロントエンドのコード）を含む静的リソースをユーザーのブラウザに送信する

### **ステップ2: Vue.js（フロントエンド）の起動**

- **Vue.jsの役割**:
    - ブラウザが静的リソースをロードし、Vue.jsアプリケーションが起動する
    - Vue.jsアプリケーションが完全にロードされると、アプリケーションの初期状態（例えば、ホームページの表示）を設定する

### **ステップ3: データのロード**

- **非同期データの取得**:
    - Vue.jsアプリケーションは、ユーザーインターフェースを初期化するのに必要なデータを取得するために、QuarkusサーバーのREST APIに対して非同期リクエストを送信する
    - このリクエストは、例えばスレッド一覧や特定のコンテンツの詳細など、動的なデータを取得するためのものである

### **ステップ4: レスポンスとUIの更新**

- **Quarkusからのレスポンス**:
    - Quarkusサーバーは、Vue.jsからのリクエストを受け取り、必要なデータを処理（データベースからのデータ取得など）してレスポンスとして返す
    - このレスポンスは通常、JSON形式で行われる
- **Vue.jsによる表示の更新**:
    - Vue.jsアプリケーションは、Quarkusからのレスポンスを受け取り、得られたデータをもとにユーザーインターフェースを更新する

## 条件付きレンダリング

```jsx
<template>
  <button @click="toggle">Toggle</button>
  <p v-if="isVisible">これは表示されるかもしれないテキストです。</p>
  <p v-else>別のテキストがここに表示されます。</p>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>
```

- methodsセクション：コンポーネント内で使用される関数を定義する。
- toggle()メソッド：toggleという名前のメソッドを定義している。このメソッドが呼び出されたときに行う操作を記載する
- <button @click="toggle">Toggle</button>：HTMLのbuttonタグ。@clickはボタンがクリックされた時に発生するクリックイベントに対するリスナーを表す。”toggle”はmethodsセクション内に定義されたtoggleメソッドを表す。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/button


## リストレンダリング

```jsx
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'アイテム1' },
        { id: 2, text: 'アイテム2' },
        { id: 3, text: 'アイテム3' }
      ]
    };
  }
};
</script>
```

## イベントハンドリング

```jsx
<template>
  <button v-on:click="greet">クリックして挨拶</button>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('こんにちは！');
    }
  }
};
</script>
```


## ある程度わかったら…
無料なのが信じられないWebテキストがあります。

https://zenn.dev/sdkfz181tiger/books/363d20b1e591fc/viewer/eeadde

実際にバインディングしたりこんなの作ったり実践的で勉強になるし楽しかったです！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475719/2d12232f-4e04-bcf1-fead-0d00bd315c68.png)