質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.70%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 641

supermaruetsu

score 114

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

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

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

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

*草案*

  1. TagsServiceというサービスクラスで関連データを整理取得し、ProfileControllerに注入する方法
  2. 新たにTagsControllerをつくり、VueJsでAjaxを2回行う方法
    ※2. に関しては下記のような方法になります。
// Profile.vue

<template>

//元々のデータ
....

//新しいTagデータ
....

</template>

<script>
    data: function() {
        return {
            ProfileData: [],
            TagsData: []
        }
    },
    created() {
      get(`/api/profile/${this.$route.params.id}`)
        .then((res) => {
           this.ProfileData = res.data.profile
           // ProfileDataにデータがセットされたら、次にTagを取得しデータセット
           get(`/api/tag/${this.$route.params.id}`)
             .then((res) =>{
                this.TagsData = res.data.tag
             })
        })
      },
</script>

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/06 11:53

    ご回答ありがとうございました。大変参考になりました!!
    また並列処理の資料も拝読させてもらいます。

    キャンセル

+1

ここまで分かってるなら好きなように作ればいいと思いますよ。

自分なら1に近くLaravel側で必要なデータは用意します。
タグなら大体多対多のリレーションなので
Profileの取得時に少し足せばいいだけ。
jsonにタグ情報も加えられるのでVue.js側は表示を変更。
表示部分はシンプルに。

後はタグの追加・削除機能などを付ける。
ここもVue.jsでやって複雑になるならTagsController用意したほうがいいかもしれません。
タグの入力をどういうUIにするか次第です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/06 11:51

    ご回答ありがとうございました。大変参考になりました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.70%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる