0Pricing
Vue Academy · レッスン

useCounter：シンプルなComposable

count ref、increment/decrement関数、reset、必要なものだけの公開

「useCounter：シンプルなComposable」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

useCounterを構築する

小さいながらも完全なコンポーザブル、useCounterを作成します。数値を管理し、それを変更するメソッドを公開する、最初のコンポーザブルにぴったりの例です。

初期値を受け取る

関数にデフォルト値を持つinitialパラメーターを指定し、呼び出し側が任意の値からカウンターを開始できるようにします。

function useCounter(initial = 0) {
  // ...
}

内部のcount ref

内部でrefを作成し、初期値にinitialを設定します。これがコンポーザブル自身が所有するリアクティブな状態です。

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

increment関数

refを更新する関数を定義します。countはリアクティブなので、利用側の表示もすべて自動的に更新されます。

function increment() {
  count.value++;
}

decrementとreset

対になる操作を追加します。resetでは、クロージャーに保持された元のinitialを使用します。

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

APIを返す

リアクティブな状態とすべてのメソッドを含むオブジェクトを返します。これがコンポーザブルの公開インターフェースです。

return { count, increment, decrement, reset };

完全なコンポーザブル

まとめると、全体は簡潔で、どのコンポーネントでも再利用できます。

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

コンポーネントで使用する

<script setup>で呼び出して分割代入します。テンプレートではcountを直接（自動的にアンラップされた状態で）使い、メソッドをバインドできます。

const { count, increment, decrement, reset } = useCounter(10);

テンプレートで使用する

メソッドをボタンに結び付けます。クリックするたびに共有されたrefが更新され、ビューも更新されます。

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

独立したインスタンス

useCounterを呼び出すたびに、それぞれ独自のcount refが作成されます。2つのコンポーネントが呼び出すと、互いに分離された別々のカウンターを取得します。

const a = useCounter();   // own count
const b = useCounter(100); // own count

算出値を追加する

isZeroのcomputedのような派生状態を追加して、コンポーザブルを拡張できます。他の値と一緒に返すこともできます。

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

確認問題

useCounterを呼び出すたびに独自の状態が得られるのはなぜでしょうか。

まとめ

useCounter(initial)を作成しました。内部にcount refを持ち、increment／decrement／reset関数を備え、リアクティブな状態とメソッドを公開するオブジェクトを返します。呼び出すたびに独立したインスタンスが生成されます。

よくある質問

「useCounter：シンプルなComposable」レッスンは無料ですか？

はい。「useCounter：シンプルなComposable」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「useCounter：シンプルなComposable」で何を学びますか？

count ref、increment/decrement関数、reset、必要なものだけの公開 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「useCounter：シンプルなComposable」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 優れたComposableとは
  2. useCounter：シンプルなComposable
  3. useFetch：非同期データComposable
  4. VueUse：Composableライブラリ
← Vue Academyに戻る