Vue.jsアプリケーションにおける共通データフェッチ処理の設計方法

Vue.js を用いたアプリケーション開発では、多くのページで同じようなデータフェッチ処理が必要になるケースがあります。例えば、以下のようなコードをほぼすべてのページで使う場合です。

async function fetchChannel() {
  try {
    const data = await getIDB('channel', props.id);
    channel.value = data;
    groupAliases.value = data.groupAliases;
    groupAliasNames.value = (data.groupAliases || []).map(alias => alias[0]);
  } catch (error) {
    channel.value = null;
  }
}

async function fetchAlias() {
  try {
    aliases.value = await getIDBs('alias', 'channelIDIndex', props.id);
  } catch (error) {
    console.error('alias:', error);
  }
}

async function fetchGroup() {
  try {
    groups.value = await getIDBs('group', 'channelIDIndex', props.id);
  } catch (error) {
    console.error('group:', error);
  }
}

onBeforeMount(async () => {
  await fetchChannel();
  await fetchAlias();
  await fetchGroup();
});

このコードは各ページで繰り返し書かれていると、次のような問題が発生します：

コードの重複: 同じコードを複数箇所に記述すると、修正や変更時の手間が増えます。
可読性の低下: ページコンポーネントのロジックが複雑になり、メンテナンスが困難になります。
バグの増加: 修正漏れや一貫性のない挙動が発生しやすくなります。

これらの問題を解決するために、共通処理をまとめて再利用可能な設計にすることが推奨されます。以下では、その具体的な方法について説明します。

1. 共通処理をユーティリティ関数として抽出する

データフェッチ処理をユーティリティ関数として抽出することで、簡潔かつ再利用可能なコードを実現できます。

ユーティリティ関数の実装例

以下のように、データフェッチ処理を専用のファイル (dataFetchHelpers.js) にまとめます：

// dataFetchHelpers.js
export async function fetchChannelData(channelId) {
  const result = {
    channel: null,
    groupAliases: [],
    groupAliasNames: [],
  };

  try {
    const data = await getIDB('channel', channelId);
    result.channel = data;
    result.groupAliases = data.groupAliases || [];
    result.groupAliasNames = result.groupAliases.map(alias => alias[0]);
  } catch (error) {
    console.error('fetchChannelData:', error);
  }

  return result;
}

export async function fetchAliases(channelId) {
  try {
    return await getIDBs('alias', 'channelIDIndex', channelId);
  } catch (error) {
    console.error('fetchAliases:', error);
    return [];
  }
}

export async function fetchGroups(channelId) {
  try {
    return await getIDBs('group', 'channelIDIndex', channelId);
  } catch (error) {
    console.error('fetchGroups:', error);
    return [];
  }
}

ユーティリティ関数の利用例

各ページでは、上記のユーティリティ関数を呼び出すだけでデータを取得できます：

import { fetchChannelData, fetchAliases, fetchGroups } from './dataFetchHelpers';

onBeforeMount(async () => {
  const channelId = props.id;

  const { channel, groupAliases, groupAliasNames } = await fetchChannelData(channelId);
  channel.value = channel;
  groupAliases.value = groupAliases;
  groupAliasNames.value = groupAliasNames;

  aliases.value = await fetchAliases(channelId);
  groups.value = await fetchGroups(channelId);
});

この方法により、各ページのコードが簡潔になり、可読性が向上します。

2. Vue のカスタムフックとして抽出する

Vue 3 の Composition API を利用して、カスタムフックとしてデータフェッチ処理を抽出する方法もあります。

カスタムフックの実装例

カスタムフックを作成し、状態管理とデータフェッチ処理を一元化します。

// useChannelData.js
import { ref } from 'vue';

export function useChannelData(channelId) {
  const channel = ref(null);
  const groupAliases = ref([]);
  const groupAliasNames = ref([]);
  const aliases = ref([]);
  const groups = ref([]);

  const fetchAllData = async () => {
    try {
      const channelData = await getIDB('channel', channelId);
      channel.value = channelData;
      groupAliases.value = channelData.groupAliases || [];
      groupAliasNames.value = groupAliases.value.map(alias => alias[0]);

      aliases.value = await getIDBs('alias', 'channelIDIndex', channelId);
      groups.value = await getIDBs('group', 'channelIDIndex', channelId);
    } catch (error) {
      console.error('useChannelData:', error);
    }
  };

  return { channel, groupAliases, groupAliasNames, aliases, groups, fetchAllData };
}

カスタムフックの利用例

各ページでは、以下のようにカスタムフックを利用します：

import { onBeforeMount } from 'vue';
import { useChannelData } from './useChannelData';

onBeforeMount(async () => {
  const { channel, groupAliases, groupAliasNames, aliases, groups, fetchAllData } = useChannelData(props.id);
  await fetchAllData();
});

3. どちらの方法を選ぶべきか？

ユーティリティ関数は、単純なデータ取得処理を他のプロジェクトや環境でも再利用したい場合に適しています。
カスタムフックは、Vue の状態管理と組み合わせた統合的な処理を構築したい場合に適しています。

まとめ

共通処理をまとめることは推奨されます。これにより、コードの再利用性、一貫性、可読性、保守性が向上します。
ユーティリティ関数やカスタムフックを活用することで、各ページで同じ処理を繰り返し記述する手間を省きましょう。
プロジェクトの規模や要件に応じて、最適な設計を選択してください。

コードの整理と再利用性の向上は、開発者の生産性を大きく向上させる重要なステップです。ぜひ試してみてください！ 🔨🤖

登録日：2025-01-15

更新日：2025-01-15

by プログラマーこまつ

コメント tweetでコメント