【Vue.js】令和のメン募は動画でやろうぜ！

## はじめに
![music_black_metal_band_corps_paint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/2e497e77-67b0-275b-59e7-a0227c1bfd2e.png)

暑いですね！絶賛夏バテ中です。私は普段エレクトリックベースを弾いています。
大学を卒業してしばらくの間バンド活動は行っていなかったのですが、転職を機にバンドメンバーとシェアハウスに住み__「ここから俺のサクセスストーリーが始まるんや！！」__と鼻息荒くしてバンドを始めました。

__が、そのバンドは結成半年、一回のライブで解散をしました。（チーン）__

## メン募とは
__メン__（バー）__募__（集）の略語です。
私が中学生の頃は「バンドやろうぜ！！」「GIGS」という二大バンド雑誌がありまして、巻末にはメンバー募集のコーナーがありました。

>当方Vo.全パート募集
作詞やります。完全プロ志向の方のみでよろしくお願いします
東京ドームの舞台に立つまで私の夢は続きます

上の内容を解説すると__インフラ、フロントエンド、ネットワークに精通したエンジニア募集。
当方プログラミング未経験、打倒GAFAを目指しています__くらいの感じです。
かなり極端な例ですが、近いものは結構見ましたね。

さてさて、YouTube、Instagramなどの動画メディア全盛の令和二年、前述のような文章だけではなかなかメンバーは集まりにくいもの。
これからの楽器奏者の名刺がわりにパート別の演奏動画を投稿することでメンバー募集のお手伝いに使えるサイトを考案しました。
覚えたてのVue.jsでそのメリットを活かしきれずの制作でうまくいっていない部分が多々ありますが、今後の自分を見つめ直す上で公開いたします。
　　
## 実装
メモ:デプロイが未完了です
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Vue.jsで演奏動画投稿のサイトを作りました。<br>最低限の実装しかできてませんがこれを拡張して行ったら結構面白いと思う。<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/xVpkXi3PsM">pic.twitter.com/xVpkXi3PsM</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1296161606284349443?ref_src=twsrc%5Etfw">August 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
最低限の実装ですがGuitar,Bass,Drumそれぞれのタブでジャンル分けして演奏動画を一覧して、再生をします。
![スクリーンショット 2020-08-20 3.54.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/2b762f36-40ad-911c-1703-cd7bafb8e5bd.png)

コードは、こちらの記事を参考にしました。
[【Vue.js】爆速でSPAを作る](https://qiita.com/nagimaruxxx/items/8fc59a5ca05bb91bfe1f)
本来は弾いてみた系の動画を貼りたかったのですが、素材を用意することができなくて、大物ミュージシャンの演奏動画をお借りしました。
元々の目指していたところはVue.jsを使用したアプリ制作を通してSPA(SinglePageApplication)に対する理解を深めることでした。
ですが、Vue.jsのコンポーネント指向などが理解はできるものの実装にうまく落とし込めませんでした。
ですので、主にうまくいかなかった点をピックアップしていきます。

## コンポーネント指向を活かせなかった
[コンポーネントの基本](https://jp.vuejs.org/v2/guide/components.html)
例えばなのですが、各コンポーネントはGASで用意したデータベースのURLと背景画像以外は全て同じです。
なのでVue.jsのメリットであるコンポーネントの再利用が生かせるはずだったのですがいまいち理解できず、実装をしてみたものの画面に表示されずでした。
データベースと画像のURLだけが違ったコンポーネントが３つ存在します。__そして初期表示がかなり重い時があります。__

```javascript
const { default: Axios } = require("axios");
<template>
 <div class="container">
  <div class="columns is-multiline ">
     <div v-for='data in datas' :key='data.name' class="column is-4">
      <infinite-loading @infinite="infiniteHandler" spinner="spiral">
       <div slot="spinner"></div>
       <div slot="no-more"></div>
       <div slot="no-results"></div>
      </infinite-loading>
      <iframe id="ytplayer" type="text/html" width="320" height="180" :src="data.url" frameborder="0"></iframe>
      <p>name: {{ data.name }} </p>
      <p>title: {{ data.title }} </p>
      <div class="buttons has-addons is-centered">
         <button class="button is-success">Like</button>
         <button class="button is-primary">Stock</button>
         <button class="button is-info">Share</button>
      </div>
     </div>
  </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datas: []
    }
  },
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  },
  mounted: function () {
    this.getData()
  },
  methods: {
    infiniteHandler ($state) {
      if (this.end > this.datas.length) {
      // 表示するデータが無くなった場合
        $state.complete()
      } else {
      // 表示するデータがある場合
        this.getData()
        $state.loaded()
      }
    },
    async playVideo () {
      await this.player.playVideo()
    },
    getData: async function (event) {
      let url = 'SPREADSHEET_URL'
      this.axios.get(url)
        .then(response => (this.datas = response.data))
    }
  }
}
</script>
<style lang="scss">
body {
  background-image: url("../assets/guitar.jpg");
  background-color:rgba(255,255,255,0.8);
  background-blend-mode:lighten;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

```

##無限スクロールがうまくいかなかった

Vue.jsのライブラリで無限スクロールのライブラリを使用しました。
本来は読み込み中はスピナーが回転して見栄えが良いのですがそのスピナーがずっと回り続けていたので該当の部分は表示されないようにしました。
無限スクロールもうまく動いていません。

```javascript
      <infinite-loading @infinite="infiniteHandler" spinner="spiral">
       <div slot="spinner"></div>
       <div slot="no-more"></div>
       <div slot="no-results"></div>
      </infinite-loading>
```
こちらの記事をよく読み再チャレンジしたいですね。
[Vue.jsでお手軽実装！無限スクロールを実装する2つの方法](https://tech.bita.jp/article/41)

##BULMAが便利だった
良かった点もあげておきます。
下記のコードだけでいい感じのボタンを実装してくれました。
![スクリーンショット 2020-08-20 3.54.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/60284feb-bc3a-0c0b-4fa6-7a584fd26b4e.png)

BULMAは今後も使いたいですね。
現在はダミーなので中身も作らねばなりませんが。

```javascript
      <div class="buttons has-addons is-centered">
         <button class="button is-success">Like</button>
         <button class="button is-primary">Stock</button>
         <button class="button is-info">Share</button>
      </div>
```


## まとめ
今回の課題は夏にちなんだ自由課題というもので、当初はガリガリ君のアプリを作ろうとしたんですが諸事情で企画が
突然変わってしまいました。
夏には関係ないし、所々雑なところがありますが、出てきた物が全てですのでこの記事を時折読み返して今後に活かしたいと思います。
本来やりたかったことができなくなってモチベーションも下がり気味でこの企画自体無理やり捻り出したものでしたが作ってる途中で楽しくなったのでやってみないとわからないとはこのことなんだなと思いました。