Vueのデータバインディング #TypeScript

はじめに

初めまして、Vue.jsを学び始めた初心者の方向けに、Vueの基本からComposition APIについて掘り下げていきたいと思います。
この記事では、Vueの基本的な概念や気づきを共有し、特にデータバインディングに焦点を当てて説明します。

Vueとは

さっくりですがVueについて簡単に説明します。
Vueは、JavaScriptのフロントエンドフレームワークの1つで、MVVM(Model-View-ViewModel)パターンをベースにしたライブラリです。
以下に、Vueの特徴を記載します。

シンプルで学習しやすい
・ Vueは直感的な構文を持ち、JavaScriptとHTMLを組み合わせることができます。初心者でも扱いやすいのが特徴
軽量で高速
・ Vueは小さなサイズのライブラリで、高速な動作を提供します。これにより、ページの読み込みやレンダリングが迅速に行える
コンポーネントベース
・ Vueはコンポーネントベースの開発を重視しており、UIを小さな再利用可能な部品に分割できます。これにより、効率的な開発が可能
リアクティブなデータバインディング
・データの変更が自動的にビューに反映されるため、手動でDOMを操作する必要がありません。これにより、開発プロセスがスムーズになります。

Vueのデータバインディング: Composition APIとOptions APIの比較

データバインディングは、Vue.jsにおける重要な概念です。Vue.jsでのデータバインディングに関するComposition APIとOptions APIの比較を通じて、両者の違いについて簡単に説明します。

使用環境

フロントエンドフレームワーク: Vue.js 3.2.13 （Composition APIを使用）
スクリプト言語: TypeScript 4.5.5
スタイル言語: CSS (Scoped styling)

Options API

Options APIはVue.js 2.xで主に使用されていました。
以下は、Options APIを使ったデータバインディングの例です。

<script>
export default {
  data() {
    return {
      inputValue: '', // 入力値を保持するデータ
    };
  },
};
</script>

<template>
  <div class="data-binding-example">
    <!-- 入力フィールド -->
    <input v-model="inputValue" placeholder="何か入力してください" />

    <!-- 入力値の表示 -->
    <p>入力した値: {{ inputValue }}</p>
  </div>
</template>

Options APIを使用する場合、dataオブジェクト内にinputValueを宣言して、その後v-modelディレクティブを使って入力フィールドとバインドします。

Composition API

Composition APIはVue.js 3.xで導入された新しいAPIです。
以下は、Composition APIを使ったデータバインディングの例です。

<script setup lang="ts">
import { ref } from "vue";

const inputValue = ref(""); // 入力値を保持するリアクティブな変数
</script>

<template>
  <div class="data-binding-example">
    <!-- 入力フィールド -->
    <input v-model="inputValue" placeholder="何か入力してください" />

    <!-- 入力値の表示 -->
    <p>入力した値: {{ inputValue }}</p>
  </div>
</template>

Composition APIを使うことで、コードを機能ごとにまとめることができ、再利用性やメンテナンス性を向上させることができます。

上記GIFはComposition APIを使用して作成したものです。
入力内容が自動的にビューに反映される様子がわかりますね！

まとめ

Vue.jsの基礎からComposition APIに焦点を当ててデータバインディングを説明しました。Composition APIを使用することで、コードを機能ごとにまとめ、再利用性やメンテナンス性を向上させることができます。Options APIとComposition APIの比較を通じて、プロジェクトの規模や開発ニーズに応じた適切なAPIの選択が重要であることも理解できました！