🍣 そろそろ寿司を降らさないと〇ぜ！ #Vue.js

この記事は、クソアプリアドベントカレンダーの２４日目の記事です。

エル、知ってるか？夜明けまでが今日（２３日）なんだ。
つまり、夜明けまでの投稿すれば、24日のアドベンドカレンダーは遅れたことにはならない。
~~だって、みんな寝てるじゃん(23日29時の発言)~~

今年のアプリは寿司だ。ソウルフードの寿司だ。
日本人の叡智が詰まった究極のご飯、寿司だ。
いまや、日本と言えば、SUSHIってくらい寿司だ。

これ以降の文章は、GPT-4に丸投げした。(ちょっと弄ったけど)
「私は好きにした、君らはいいねしろ」

ビジター、アプリはここからアクセスできる。
用件はそれだけだ。じゃあな。
https://sushilyrain.netlify.app/

🚀 プロジェクトの概要

このアプリは、ユーザーがボタンを押すか、一定時間待機すると、画面上のランダムなX座標から寿司の絵文字が出現し、画面の右端に向かって横断します。アニメーションの終了後、寿司は消えます。
今の時代に、アクティブデスクトップ壁紙があれば、壁紙にして、楽しんでいたことでしょう。

💻 コードの解説

プロジェクトのコアはVue 3のComposition APIを使用しています。以下に主要な部分を簡単に紹介します。
テンプレート部分


<template>
  <!-- ヘッダー部分 -->
  <div class="header">
    <h1>sushilyRain</h1>
    <h2>The rain will turn into sushi after midnight...</h2>
    <!-- 寿司を追加するボタン -->
    <div>
      <label>sushi:</label>
      <button @click="addSushi">Add</button>
    </div>
    <!-- 自動追加のオンオフ切り替え -->
    <div>
      <label>autoAdd:</label>
      <button @click="isAutoAdd = !isAutoAdd">{{ isAutoAdd ? 'stop' : 'start' }}</button>
    </div>
  </div>
  <!-- 寿司の絵文字が出現する部分 -->
  <div>
    <div v-for="rain in rains" :key="rain.id" class="box" :class="`box${rain.id}`" :style="rain.style"
      @animationend="rain.show = false" v-show="rain.show">
      🍣
    </div>
  </div>
</template>

addでボタンで、寿司を追加できます。
autoAddボタンを操作することで寿司の自動追加をオンオフ切り替えます。

スクリプト部分


<script setup>
import { ref, watch } from 'vue';

let nextId = 0;
let intervalId = null;
const isAutoAdd = ref(true);
const rains = ref([]);
const addSushi = () => {
  const randomLeft = Math.random() * (window.innerWidth - 50); // 50はボックスの幅
  const newItem = {
    id: nextId++,
    show: true,
    style: {
      left: `${randomLeft}px`,
      animation: `moveDiagonally ${Math.random() * 10}s forwards`
    }
  };
  rains.value.push(newItem);
}

intervalId = setInterval(addSushi, 800)
const manageAutoAdd = () => {
  if (isAutoAdd.value) {
    intervalId = setInterval(addSushi, 800)
  } else {
    clearInterval(intervalId);
  }
}

watch(isAutoAdd, manageAutoAdd);

</script>

addSushi 関数で新しい寿司の絵文字を追加し、
watch で isAutoAdd の状態変化を監視しています。
ポイントは、移動速度をランダムで設定することで、寿司の移動が単調になることを防いでいます。

スタイル部分


<style>
/* 基本スタイルとアニメーションキーフレーム */
button {
  margin-left: 5px;
}

.box {
  position: absolute;
  top: 0px;
  z-index: 1;
  font-size: 50px;
}

.header {
  text-align: center;
  z-index: 999;
  position: relative;
}

body {
  background-color: #121212;
  color: rgb(205, 204, 204);
  overflow: hidden;
}

@keyframes moveDiagonally {

  to {
    transform: translate(calc(100vw - -50px), calc(100vh - 50px)) rotate(300deg);
  }
}
</style>

CSSアニメーションで寿司が画面を横切る動きを実現しています。

🌟 ハイライト

ランダムな出現位置: 寿司が出現するX座標はランダムで、画面の幅に依存します。これにより、アプリに予測不可能性と面白みを加えています。
アニメーションのカスタマイズ: CSSアニメーションはカスタマイズ可能で、異なる速度や動きを簡単に実装できます。
ユーザーインタラクション: ボタンを押すことでアニメーションを即座に開始できるため、ユーザーのインタラクションを取り入れています。

📚 結論

この小さなプロジェクトを通じて、Vue.jsとCSSアニメーションの強力な組み合わせを楽しく学ぶことができました。初心者にも分かりやすいように、コードの全体像と重要な部分を紹介しています。ぜひチェックして、あなたのプロジェクトにも応用してみてください！