【Vue.js】猫の知識をランダムに表示するだけのアプリ

2025年1月1日

どうもです、タドスケです。

冬休み明けから Web 系の開発をお手伝いすることになりまして、現在必死で勉強しています。

せっかくなので勉強がてらブログに公開できるものを作ってみようと思い、Vue.js と WebAPI を使って簡単なアプリを作ってみました。

作ったもの

ページを表示するたびに、猫に関するランダムな知識がランダムで表示されます。

データを読み込み中…

コード

コードは以下です。

<div id="app">
  <p v-if="loading">データを読み込み中...</p>
  <p v-else-if="error">{{ error }}</p>
  <p v-else>{{ catFact }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        catFact: '',
        loading: false,
        error: null,
      };
    },
    methods: {
      async fetchCatFact() {
        this.loading = true;
        this.error = null;
        this.catFact = '';

        try {
          const response = await fetch('https://catfact.ninja/facts');
          if (!response.ok) {
            throw new Error('データの取得に失敗しました');
          }

          const data = await response.json();
          const facts = data.data;

          if (facts && facts.length > 0) {
            // ランダムな豆知識を取得
            const randomFact = facts[Math.floor(Math.random() * facts.length)];
            this.catFact = randomFact.fact;
          } else {
            this.error = '豆知識が見つかりませんでした。';
          }
        } catch (err) {
          this.error = err.message;
        } finally {
          this.loading = false;
        }
      },
    },
    mounted() {
      // 初回ロード時に豆知識を取得
      this.fetchCatFact();
    },
  }).mount('#app');
</script>

ChatGPT に書いてもらったものを一部編集しています。