こんにちは！2024年入社の新屋です！

研修でvue.jsを使っている際に、「composables」ディレクトリと「utils」ディレクトリの2つについて、どちらをどう使うのか曖昧になってしまう時が何度かありました。

使うたびに何度もわからなくなるのも困るなあと思ったので、備忘録がてら、この2つの違いと使い分け方を自分なりに調べてまとめてみます。

composablesとutilsについて

違いについて述べる前に、composablesとutilsの特徴について、公式ドキュメントを見て調べてみました。

composables：Vue 3のComposition APIに基づく再利用なロジックを格納するためのディレクトリ。状態管理や複雑なロジックをシンプルにし、複数のコンポーネント間で共有できるよう設計される

とあります。公式ドキュメントでは、以下のように名前付きエクスポートやデフォルトエクスポートの例が示されています。

TypeScript// composables/useFoo.ts
export const useFoo = () => {
 return useState('foo', () => 'bar')
}

// app.vue
<script setup lang="ts">
const foo = useFoo()// この部分でcomposablesディレクトリ内の
関数
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

utils：アプリケーション全体で使用するユーティリティ関数（特定のタスクや操作を簡単に実行するための汎用的な関数）を格納するためのディレクトリ、特定のコンポーネントやページに依存せず、どの部分からでも呼び出して利用できるよう設計されている。

とあります。こちらも、名前付きエクスポートやデフォルトエクスポートの例が示されています。

TypeScript// utils/index.ts
export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
 notation: 'compact',
 maximumFractionDigits: 1
})

// app.vue
<template>
 <p>{{ formatNumber(1234) }}</p>
</template>

…なんか調べた感じ、使い方がちょっと似ているような…

どちらも「関数を再利用している」という点でいえば、パッと見はすごく似ているもののように感じます。

２つのディレクトリの違い

しかし、この２つのディレクトリには明確な違いが3つあります。

1：目的

composablesは、VueのComposition API(※) に特化したロジックを定義・格納することが目的です。

一方、utilsは汎用的なユーティリティ関数を定義、格納することが目的です。

(※) Composition API：Vue 3で導入された新しいAPI。関数をインポートすることでVueコンポーネントを書くことができる。

例：ref()、reactive()、onMounted()、provide()、inject()など

2：Vueに対する依存性

composablesディレクトリ内に格納されるファイルは、１の目的で記述したようにVueコンポーネント内で使用されることを前提とした、VueのComposition API(※) に特化したロジックが多いため、Vueの特定の機能に大きく依存しています。

一方で、utilsディレクトリ内に格納されるファイルは純粋なJavascriptやTypeScriptの関数が多いため、Vueの特定の機能に依存しません。

3：使用例

composablesディレクトリは、状態管理やAPIの呼び出しなどのコンポーネント間で共有されるロジックを格納するためによく用いられます。

一方、utilsディレクトリは、数値のフォーマットや日付変換など、一般的なタスクを格納するためによく使われます。

以上のことを簡単にまとめると、

composables：VueのComposition APIに特化したロジックを定義・格納することが目的であり、状態管理やAPIの呼び出しなどのようなVueの特定の機能に依存しているファイルが格納される。

utils：汎用的なユーティリティ関数を定義、格納することが目的であり、数値のフォーマットや日付変換など、Vueの特定の機能に依存しない一般的なタスクを格納するためによく使われる。

という感じになります。

終わりに

今回は、研修を行う中で気になった、「composables」ディレクトリと「utils」ディレクトリの2つについての違いを調査してみました。

自分の中で曖昧だった２つのディレクトリの違いを理解することができたと思います。

Vueには他にも、多くの役割を持つディレクトリが存在しているので、また利用法に困ったときには、ブログを通してアウトプットしようと思います。

それでは、ありがとうございました。

参考リンク：

composables/ · Nuxt Directory Structure （composablesについての公式ドキュメント）

[和訳] Nuxt3 公式サイト~Composables Directory (zenn.dev) （公式ドキュメントを有志の方が日本語訳したもの）

utils/ · Nuxt Directory Structure （utilsについての公式ドキュメント）

【Nuxt 3】/composablesと/utilsの使い分け (zenn.dev) 

https://vuejs.org/guide/extras/composition-api-introduction.html （Composition APIについての公式コメント）