Laravel いいね機能を追加しよう(1)

いいね機能では、いいねテーブルの更新前後で画面遷移は発生させずに、ハートの色といいね数表示を変化させるようにします。

これを実現するため、いいね機能ではクライアント(PCやスマホのブラウザ)からサーバー(Laravel側)へ通信する方法として、formタグではなくJavaScriptを使用します。

今回は、ハートを押された時のサーバーへの通信や、ハートの色やいいね数表示の切り替えといった一連の処理を効率的に開発できるよう、JavaScriptのフレームワークであるVue.jsを使用します。

1. Vue.jsをインストールする

Vue.jsをインストールします。

laravelディレクトリのpackage.jsonを以下の通り編集してください。

.
└──laravel
    └── package.json

package.json

// 略
  "devDependencies": {
    "axios": "^0.19",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0", //-- 最後にカンマを追加
    //-- ここから追加
    "vue": "^2.6.11", 
    "vue-template-compiler": "^2.6.11"
    //-- ここまで追加
  }
// 略

編集が終わったら、laradockディレクトリで以下コマンドを実行してください

$ docker-compose exec workspace npm install

2. いいね機能のVueコンポーネントを作成する

次に、いいね機能を持つVueコンポーネントを作成します。

resources/jsディレクトリにcomponentsディレクトリを作成し、そこにArticleLike.vueを作成してください。

.
└──laravel
    └── resources
        └── js
            └── components
                └── ArticleLike.vue

ArticleLike.vue

<template>
  <div>
    <button
      type="button"
      class="btn m-0 p-1 shadow-none"
    >
      <i class="fas fa-heart mr-1"
      />
    </button>
    10
  </div>
</template>

<script>
</script>

現段階では、ハートのアイコンを持つボタンと、ダミーのいいね数だけで構成されるVueコンポーネントとなります。