Vue 3のスクリプトセットアップを利用してプロジェクトの初期化を簡素化

作成日 2025.03.03
Vue.js
Vue.js

Vue 3のスクリプトセットアップ構文を使用すると、シンプルかつ効率的にコンポーネントの初期化と構築が可能になります。

1. スクリプトセットアップとは何か
2. スクリプトセットアップの利点
3. 基本的なセットアップ
4. Propsの定義
5. Emitの使用
6. リアクティブ変数の宣言
7. コンポーネントのインポート
8. Composition APIの使用
9. コンピューテッドプロパティ
10. ウォッチャーの利用
11. テンプレートリファレンス
12. 複数のPropsとEmitを使った例
13. 環境変数の利用
14. 非同期処理
15. スタイルの適用
16. スクリプトセットアップでのTypeScript使用
17. まとめ

スクリプトセットアップとは何か

Composition APIの構文をより簡潔に書ける新しい構文形式です。

スクリプトセットアップの利点

冗長な記述が減り、パフォーマンスの向上やコードの可読性が向上します。

基本的なセットアップ

スクリプトセットアップを使った基本的なコンポーネント構造。

<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
const message = 'Hello, Vue 3 Script Setup!';
</script>

Propsの定義

Propsをスクリプトセットアップ内で定義。

<script setup>
defineProps({
  title: String,
  count: Number
});
</script>

Emitの使用

イベントの発火をシンプルに記述。

<script setup>
const emit = defineEmits(['increment']);

function handleClick() {
  emit('increment');
}
</script>

リアクティブ変数の宣言

リアクティブなデータを定義。

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

コンポーネントのインポート

他のコンポーネントをインポートして使用。

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

Composition APIの使用

Composition APIのリアクティブプロパティやライフサイクルフックを利用。

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('コンポーネントがマウントされました');
});
</script>

コンピューテッドプロパティ

計算プロパティをスクリプトセットアップ内で定義。

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

ウォッチャーの利用

リアクティブデータの変更を監視。

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`Countが${oldVal}から${newVal}に変更されました`);
});
</script>

テンプレートリファレンス

テンプレート要素への参照を取得。

<template>
  <input ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref(null);

onMounted(() => {
  inputRef.value.focus();
});
</script>

複数のPropsとEmitを使った例

PropsとEmitを組み合わせた実用例。

<script setup>
defineProps(['label']);
const emit = defineEmits(['submit']);

function handleSubmit() {
  emit('submit', 'データ送信');
}
</script>

環境変数の利用

環境変数をVue 3スクリプトセットアップで使用。

<script setup>
const apiUrl = import.meta.env.VITE_API_URL;
</script>

非同期処理

非同期データ取得のサンプル。

<script setup>
import { ref, onMounted } from 'vue';

const data = ref(null);

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  data.value = await response.json();
});
</script>

スタイルの適用

Scopedスタイルの適用。

<template>
  <p class="text">Hello, styled Vue!</p>
</template>

<style scoped>
.text {
  color: blue;
}
</style>

スクリプトセットアップでのTypeScript使用

TypeScriptを使った型安全なコード例。

<script setup lang="ts">
interface Props {
  id: number;
  name: string;
}

defineProps<Props>();
</script>

まとめ

Vue 3のスクリプトセットアップを活用することで、コードの可読性、保守性、パフォーマンスが向上し、開発体験が大幅に改善されます。