既存アプリケーションの機能追加について

現在既存のアプリがあり、機能追加を任されております。
手探りでやり始めるより大枠を掴んでから取り掛かった方が後々楽になると考えており、アドバイスをいただければ有難いです。

追加機能は「タグ」機能です。
もともと各ユーザーが持つ住所や名前が入ったプロフィールカードに、タグを3つ、4つ加えた新しいプロフィールカードを作成することになりました。

現状
フロント）【Vue.js】component化されたprofile.vueがajaxでuser_idをサーバーサイドへ投げ、データを取得、バインド
サーバーサイド）【Laravel】 ProfileController@showがidを受け取り、紐付けされたユーザーの名前、住所などを検索、VueJSへ送信

悩み
手順を含め、ずばりどのような仕組みで追加設計を行うか
具体的には、そもそも送信していたプロフィール関連のデータ「＋α」のTagデータをどのようにフロントに追加するか

草案

TagsServiceというサービスクラスで関連データを整理取得し、ProfileControllerに注入する方法
新たにTagsControllerをつくり、VueJsでAjaxを2回行う方法

※2. に関しては下記のような方法になります。

javascript
1// Profile.vue
2
3<template>
4
5//元々のデータ
6....
7
8//新しいTagデータ
9....
10
11</template>
12
13<script>
14    data: function() {
15        return {
16            ProfileData: [],
17            TagsData: []
18        }
19    },
20    created() {
21      get(`/api/profile/${this.$route.params.id}`)
22        .then((res) => {
23           this.ProfileData = res.data.profile
24           // ProfileDataにデータがセットされたら、次にTagを取得しデータセット
25           get(`/api/tag/${this.$route.params.id}`)
26             .then((res) =>{
27                this.TagsData = res.data.tag
28             })
29        })
30      },
31</script>
32

草案として上記2つを考えておりますが、ほかに良い方法がありますでしょうか。
初心者のため、これくらいしか思いつきませんでした。。。
またこの2つでやりくり出来そうであれば、その旨をお知らせいただきたい事に加え、方法1 or 2（フロントからリクエストを送る（加えてTagControllerを用意する）のか、サーバーサイドでサービスクラスを一つ設けるのがいいのか）どちらがベターなのかをお知らせいただければ幸いです。

長文になりますが、何卒よろしくお願い申し上げます。

行動規範の内容に同意します

回答2件

ベストアンサー

2でやる場合は、例でcreatedで2回ajaxでデータを取ってきているところは、順番に戻りの値の受け渡し等が必要なさそうなので、Promise.allやajax通信ライブラリに準備された方法で並列処理にするとajax処理の待ち時間が少なくなります。
MDN Promise
JavaScriptのPromise

設計としては、既存アプリケーションの機能拡張ということで、現状の他プログラムが1、2のどちらの作りに寄せているかに合わせて改修すれば引き継ぎなどのプロジェクトとしての保守性が高く保てると思います。
タグ情報が、プロフィールカードに密なデータであれば、1の方法でやるほうがAPIの戻り値やVue.js側での繰り返し処理でのデータ取扱が自然にやり取りできるかと思います

投稿2017/08/04 22:15

編集2017/08/04 22:22