あなたにピッタリなジェイソン・ステイサムの映画を教えてくれるアプリを作りました【Vue.js】

#はじめに
こんにちは。__ジェイソン・ステイサム__が大好きなたわちゃんと申します。
（参照：「ジェイソン・ステイサムで妄想するのが日課になっていたので、いっそBOTにしてみた。」https://qiita.com/twtjudy1128/items/88f3e8f09c449f49456c ）

今回も愛情が溢れすぎた結果、ステイサム関連のアプリを作成してしまいました。
ステイサムが好きな方も、そうでない方も、ぜひ一度お試しいただけますと幸いです。

#目的
・もっとステイサムの魅力を伝えたい
・ステイサムの映画をみんなにも見てほしい
・なんならステイサムと結婚したい
・Vue.jsを使ったフロントエンドの実装に挑戦する

#完成したもの
▼コチラが実際に作ったものです！
https://trusting-yalow-80ebbf.netlify.app/jason.html

2枚の画像から、気になるステイサムたんの画像を選んでいきます。
それを10回繰り返すと・・・

最終的に選んだ画像を元に、あなたにオススメのステイサムたんの映画を教えてくれます！より魅力が伝わるように、YoutubeからTrailerを埋め込んでます♪

完成した〜〜〜(´；ω；｀)

ジェイソンステイサムのオススメ映画を教えてくれるアプリ！

I made an app that teaches you a recommended movie of Jason Statham❤#protoout #jasonstatham #本人に届け #javascript #vuejs #駆け出しエンジニア pic.twitter.com/0uYyYOIMDz

— カレー大好き★たわちゃん (@unias_tawa) August 5, 2020

#作り方
▼ソースコードの全貌はGistから
https://gist.github.com/twtjudy1128/86f9adb21072c6ffc5f79bb28049872f

###フレームワーク・ライブラリなど
・Vue.js
・Youtube Player API
・Bootstrap

###画像の切り替え部分

Bookstrapのcardを使って、まず枠組みを作ります！

      <div class="card-group">

      <!-- A card -->
      <div class="card bg-dark" style="width: 30rem;" v-show="show">
        <img v-bind:src="a.imgsrc" class="card-img-top" alt="img-thumbnail" />
        <div class="card-body">
          <button class="btn btn-lg btn-block btn-danger" v-on:click="clickA()" >Ａ</button>
        </div>
      </div>

      <!-- B card -->
      <div class="card bg-dark" style="width: 30rem;" v-show="show">
        <img v-bind:src="b.imgsrc" class="card-img-top" alt="img-thumbnail" />
        <div class="card-body">
          <button class="btn btn-lg btn-block btn-danger" v-on:click="clickB()" >Ｂ</button>
        </div>
      </div>

script部分に全画像分の画像URL、動画URL、紹介文をまとめて、配列がシャッフルされるようにします！クリックされるごとに、crickCountが増えていくので、その数字と同じ配列番号の画像が出てくるようにすることで、重複しないようにしました！

   <script>
      let clickCount = 0;
      const app = new Vue({
        el: '#app',
        data: {
          show: true,
          show2: false,
          message : '',
          a: {
            imgsrc: '',
            movie:'',
            resultText:''
          },
          b: {
            imgsrc: '',
            movie:'',
            resultText:''
          },
          imgs: [
            {//メカニック
              imgsrc: 'https://cdn-ak.f.st-hatena.com/images/fotolife/u/unias_tawa/20200804/20200804083430.jpg',
              movie: "https://www.youtube.com/embed/CMklQNn0OH0",
              resultText: "あなたにオススメな映画は「メカニック」何事も完璧なスマートなステイサムたんが見れるよ！"
            },
            //（省略しますが、ここに全画像分の情報を入れます）
          ],
        },
        async created() {
          // 配列をシャッフル
          this.imgs.sort(() => Math.random() - 0.5);
          // 最初の画像もシャッフルした0と1番目
          this.a.imgsrc = this.imgs[0].imgsrc;
          this.a.movie = this.imgs[0].movie;
          this.a.resultText =this.imgs[0].resultText;
          this.b.imgsrc = this.imgs[1].imgsrc;
          this.b.movie = this.imgs[1].movie;
          this.b.resultText =this.imgs[1].resultText;
          // 次に出てくる画像の配列番号
          clickCount = 2;
        },
        methods: {
          //Aボタンを押したら、Bの画像を次の画像に切り替え
          clickA: function () {
            console.log('入れ替える配列番号：' + clickCount);
            //ランダムで画像変更
            this.b.imgsrc = this.imgs[clickCount].imgsrc;
            this.b.movie = this.imgs[clickCount].movie;
            this.b.resultText =this.imgs[clickCount].resultText; 
            clickCount++;                  
          },
          //Bボタンを押したら、Aの画像を次の画像に切り替え
          clickB: function () {
            console.log('入れ替える配列番号：' + clickCount);
            //ランダムで画像変更
            this.a.imgsrc = this.imgs[clickCount].imgsrc;
            this.a.movie = this.imgs[clickCount].movie;
            this.a.resultText =this.imgs[clickCount].resultText;
            clickCount++;
          }
        }
      });

###結果画面への切り替え

まず、divにshow2のクラスをつけて、初期値をfalseにして非表示にしておきます。（前述のコード参照）

      <div class="result" v-show="show2">
         <!-- Youtube -->
         <iframe width="640" height="360" v-bind:src="movie"
         frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        <h4><br>{{message}}</h4>
      </div>

そして、scriptでclickCountが11回以上になったら、画像画面を非表示にし、結果画面が表示されるようにしました！

        methods: {
            clickA: function () {
               if(clickCount > 11){
                  this.show = !this.show;
                  this.show2 = true;
                  this.movie = this.a.movie;
                  this.message = this.a.resultText;
                }
            },
            clickB: function () {
              if(clickCount  > 11){
                 this.show = !this.show;
                 this.show2 = true;
                 this.movie = this.b.movie;
                 this.message = this.b.resultText;
              }
            }
          }

#作ってみた感想・反省点
こうやって見ると比較的シンプルですが、初心者の私は制作に15時間以上かかりました。とても苦しかったですが、当初に思い描いていたものが作れた喜びは大きいです。

そして、何より__ステイサムがかっこいい。__

彼の画像や動画があったからこそ、15時間も向き合えたのだと思います。
もうほんと好き。大好き。

HTMLとCSSも今回初めてまともに触れたのですが、フロントエンド楽しいですね。
それがわかったのも嬉しいなぁって思いました。

反省点は、スマホ最適化ができなかったことと、できればポップアップみたいな感じで動画を出したかったことです。プラスアルファの実装ができるように、早く基礎を積みたいです！

#おわりに
是非アプリ使ってみて、どの映画をオススメされたか、コメントやTwitterなどで教えてください♪
また、こうしたらもっと良いよ！といったアドバイスもいただけると嬉しいです。
<< アプリURL▶https://trusting-yalow-80ebbf.netlify.app/jason.html >>

本業は営業企画なので、仕事と両立して勉強するの正直しんどいんですけど、毎週のQiita投稿が本当に励みになってます！

最後までご覧いただき、ありがとうございました～～～！