◆当ページにはプロモーションが含まれています

JavaScript

Vue.jsでREST API対応のリポジトリパターンを作ってみよう!

みなさん、こんにちは。どんぶラッコです。

今日は、Vue.jsでリポジトリパターンを使ってみよう!という内容です。

本内容は、以下の記事がとても参考になりました。

上記内容を基に自分なりに使いやすい様にカスタマイズしたので、そのパターンを公開します。

リポジトリパターンとは?

リポジトリパターン とは、データ操作のロジックをビジネスロジックから分離することです。

例えば、Vue.js2であれば データ取得のロジックを axios モジュールを使いつつこんなふうに記述したりしませんか?

// ...前略

methods: {
   async getHogeData(){
     const res = await axios.get('/api/hoge')
     // ....略
   }
}

でもこれ、もしhogeデータを取得するURLを /api/v2/hoge に変えたら、いちいち全てのvueファイルの中身を書き換えに行かなくてはいけないですね。

それは面倒臭いですし、書き換えを忘れてしまうファイルが出てきてしまうかもしれません。

そこで登場するのが リポジトリパターン という考え方なのです。

データを取得するためのモジュールを作成し、vueファイル側ではそのモジュールを読むこむようにします。

そうしておくことで、万が一データの取得先が変わったとしても、作成したモジュールファイルの中身を書き換えればOKになります。

どんぶラッコ
どんぶラッコ
もしDBのお引っ越しをしたとしても、向き先をすぐに指定できるから便利だね!

ということで、早速始めていきましょう!

今回は Laravel-mixを用いて Laravelの上に乗っかっている Vueファイルに対して設定をする想定で記述をしていきます。

ただし、Nuxt.jsなどの他のフレームワークを使ったとしてもやること自体は変わらないです。是非参考にしてみてください!

コーディング例

まずは Repository.js というファイルを作成します。私の場合は、Repositories というディレクトリを作成し、その中に作成しました。

import axios from 'axios'

// laravel-mix ではない場合 以下の2行は不要
axios.defaults.withCredentials = true
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

export default (resource) => {
  return {
    index: () => {
      return axios.get(`/api/${resource}`)
    },
    store: (payload) => {
      return axios.post(`/api/${resource}`, payload)
    },
    show: (id) => {
      return axios.get(`/api/${resource}/${id}`)
    },
    update: (id, payload) => {
      return axios.put(`/api/${resource}/${id}`, payload)
    },
    delete: (id) => {
      return axios.delete(`/api/${resource}/${id}`)
    }
  }
}

参考先URLとは異なり、Repositoryの時点でREST APIの型を作成してしまいます。

index, store … などの命名規則は Laravel の make:controller –resource で生成される命名に準拠しています。

例えば photos というModelに対しては下記のメソッドが生成されます。

動詞URIアクションルート名
GET/photosindexphotos.index
GET/photos/createcreatephotos.create
POST/photosstorephotos.store
GET/photos/{photo}showphotos.show
GET/photos/{photo}/editeditphotos.edit
PUT/PATCH/photos/{photo}updatephotos.update
DELETE/photos/{photo}destroyphotos.destroy

参考: https://readouble.com/laravel/8.x/ja/controllers.html

次に、取得したいModelのリポジトリを作っていきます。

ここでは、 hogeRepository.js としておきます。

import Repository from './Repository'

const resource = 'hoge'
const repository = Repository(resource)

export default repository

最後に、 RepositoryFactory.js を作成し、その中に記述していきます。

import HogeRepository from './hogeRepository'

const repositories = {
  hoge: HogeRepository
}

export const RepositoryFactory = {
  get: name => repositories[name]
}

これで完成です!

では、先ほどの method例を書き換えてみましょう。

import { RepositoryFactory } from '../Repositories/RepositoryFactory'
const HogeRepository = RepositoryFactory.get('hoge')

export default {
  // 略
  methods: {
    async getHogeData(){
      const res = await HogeRepository.index()
      // ....略
     }
  }
}

以上です!是非みなさんも使ってみてください♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です