A vue.js（Vue 3）

概要

JavaScriptのUIフレームワーク。
コンポーネント思考。

Vue2のサポートは「2023年12月31日」に終了しました。（公式）

公式チュートリアル : https://ja.vuejs.org/tutorial/#step-1

★★★ props が 優秀なコードの心臓 ★★★

Vue3からTypescriptが推奨となった。
vue3系 大規模なサービスでも使える仕様になった。

■Composion API
Vue3から登場。
ロジックごとに切り出すことが可能な関数ベースのAPI。
1回書いたソースコードを場面に合わせながら使い回すことができる。
綺麗なコードで運用が楽に。
大規模開発に対応するため出現。

■単一ファイルコンポーネント（SFC（single file components））
HTML、CSS、JavaScriptを単一のファイルに収めたものです。

■Typescriptとの相性
Typescriptを使うならvuexよりpinia。
pinia … tsフレンドリーな状態管理ツール。

状態管理機能 provide/inject がかなり便利で使いやすい。

プログラミング

前提: SFC + Composion API + Typescript
★★★ props が 優秀なコードの心臓 ★★★
公式: reactive より ref 推奨。

<!-- setup : SFCでComposion APIを使用可能に -->
<!-- lang="ts" : SFCでTypescriptを使用可能に -->
<script setup lang="ts">

// import
import { ref } from 'vue'

// ref: リアクティブな変数
const sampleValue = ref('Hello') // 値の初期化
const result = sampleValue.value // 値の取得
sampleValue.value = 'Bye'        // 値の再代入

</script>

<!-- template -->
<template>
  <!-- 値の設定 -->
  <span>{{ sampleValue }}</span>
</template>