🏷️

Vue.js において何を use~~ と命名するか

2022/08/26に公開

結論

Composition API を使った関数 (Composable function) は use~~ という命名が推奨されている。


以下、公式ドキュメントのまとめ

use~~ の命名について公式の記述

公式ドキュメントに、Composable function は名前を use で始めることを推奨する記述があります。

It is a convention to name composable functions with camelCase names that start with "use".

https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices

composable functions には、"use"で始まるキャメルケースの名前を付けるのが慣例となっています。

では、Composable function の定義を確認します。

Composable function の定義

In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

https://vuejs.org/guide/reusability/composables.html#what-is-a-composable

Vueアプリケーションの文脈では、"composable"は、Vueの Composition APIを活用して、ステートフルなロジックをカプセル化して再利用する機能です。

最後に Composition API の定義を確認します

Composition API の定義

こちらに記載されています。

https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api

以下の API をまとめて Composition API と呼びます。

  • Reactivity API
    • ref や reactive, computed, watch など
  • Lifecycle Hooks
    • onMounted, onUnmounted, onBeforeUnmounted などコンポーネントのライフサイクルに処理をフックするための機能
  • Dependency Injection
    • provide, inject の祖先・子孫の関係で値を提供・受け取る機能

Discussion