はじめに
初めまして、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の選択が重要であることも理解できました！