script setupでComposableをインポートして使う
Composableのインポート、サードパーティ製VueUse Composableの利用、インポートの整理について学習します。
「script setupでComposableをインポートして使う」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Composables と script setup
Composablesは、再利用可能なリアクティブロジックをまとめた関数です。<script setup>では、トップレベルでインポートして呼び出すだけで簡単に利用できます。
トップレベルでインポートする
Composablesは必ず<script setup>のトップレベルで呼び出してください。条件分岐、ループ、ネストした関数の中で呼び出してはいけません。そうすることで、Vueがリアクティブ機能とライフサイクルフックを正しく登録できます。
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>トップレベルが重要な理由
Composablesは、onMountedのようなライフサイクルフックを登録したり、watcherを設定したりすることがよくあります。これらはコンポーネントのsetup中に実行する必要があり、そのためにはComposablesをトップレベルで同期的に呼び出さなければなりません。
必要なものだけ分割代入する
Composableは、リアクティブな値と関数のオブジェクトを返します。コンポーネントで使うものだけを分割代入し、同じComposableを2回呼び出す場合は名前を変更して衝突を避けます。
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>VueUse の紹介
VueUseは、すぐに使えるComposablesを集めた人気のライブラリです。よくあるロジックを自分で書く代わりに、テスト済みのComposableをインポートできます。一度インストールすれば、必要なものをインポートして使えます。
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>useLocalStorage を使う
useLocalStorageは、localStorageと同期するrefを返します。refを変更するとブラウザーのストレージが更新され、ページを再読み込みしても値が保持されます。
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>useMouse で座標をリアクティブに扱う
useMouseは、ポインターの位置をリアクティブなrefとして追跡します。イベントリスナーの追加と削除を代わりに行うため、クリーンアップを手動で管理する必要はありません。
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>Composables を組み合わせる
Composableから別のComposableを呼び出すこともできます。この階層化はComposition APIの中心的な考え方です。小さな部品を作り、それらを組み合わせて大きな機能を構築します。
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}トップレベルの await
<script setup>では、トップレベルでawaitを直接使用できます。コンポーネントは非同期setupになり、フレームワークはPromiseが解決されるまでレンダリングを一時停止できます。
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>非同期 setup と Suspense
トップレベルのawaitを使うコンポーネントは、親によって<Suspense>境界で囲む必要があります。Suspenseは非同期setupが完了するまでフォールバックコンテンツを表示します。
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>ベストプラクティス
- Composablesには
useプレフィックスを付けて名前を付けます。 - 必ずトップレベルでのみ呼び出します。
- ref（または
toRefsでラップしたreactive）を返します。 - 独自に作成する前に、一般的な用途にはVueUseを優先します。
クイックチェック
Composablesについての理解を確認してください。
まとめ
Composablesの使い方を学びました。
<script setup>のトップレベルでインポートして呼び出します。- 必要なものを分割代入し、必要に応じて名前を変更します。
- VueUseには、
useLocalStorageやuseMouseなど、すぐに使えるComposablesがあります。 - トップレベルの
awaitを使うとsetupが非同期になり、<Suspense>と組み合わせられます。
よくある質問
「script setupでComposableをインポートして使う」レッスンは無料ですか？
はい。「script setupでComposableをインポートして使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「script setupでComposableをインポートして使う」で何を学びますか？
Composableのインポート、サードパーティ製VueUse Composableの利用、インポートの整理について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「script setupでComposableをインポートして使う」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- script setup入門
- definePropsとdefineEmits
- defineExposeとuseAttrs
- script setupでComposableをインポートして使う