【TypeScript&Nuxt.js】占いアプリ⑦応用：占いAPIを取り入れてみる-3

前回はこちら

最初の記事はこちら

進め方

1. タロットカードのデータをTypeScriptで配列にする ✅
2. その中からランダムに1枚選ぶロジックを書く ✅
3. 結果を表示する画面を作る（1ページ）✅
4. カードごとに画像を表示してみる
5. NuxtLinkでページ遷移（トップ→結果ページ）
6. デザインを整える
7. 応用：今日の運勢APIを取り入れてみる 👈
8. データの組み合わせで文章を作る

前回書いたメモ

次にやること

• 生年月日を入れやすくするように、1990年くらいを初期表示にする
• 一旦2025/7/1の運勢を取得しているので、今日の運勢を取得できるようにする👈
• 自分の星座にマッチした運勢だけ表示させる👈
• ラッキーアイテムなど、項目ごとに表示させる

前回まででAPIで取得したjsonデータを出力することができた。
今回は上記の👈のTodoをやってみたい。

今日の運勢を取得する

const fetchHoroscope = async () => {
  // 2025/07/01 を今日の日付にして、今日の運勢が取得できるようにする
  const url = '/api/api/horoscope/free/2025/07/01'

今日の日付は下記で生成できている。

const today = new Date().toISOString().split('T')[0]
console.log(today) // 2025-08-01

これをハイフン「-」を「/」に置き換えて yyyy/mm/dd形式にする。

const todaySlash = today.replace(/-/g, '/'); // "2025/08/01"
console.log(todaySlash) // 2025/08/01

そして、APIのURLを修正する。

  const url = `/api/api/horoscope/free/${todaySlash}`

今日の日付（8/1）のデータを取得することができた。

入力された生年月日の星座の運勢だけを出力する

前々回、生年月日から星座を判定することはできた。

// 星座判定
const zodiacSign = computed(() => {
  const m = month.value
  const d = day.value

  if ((m === 3 && d >= 21) || (m === 4 && d <= 19)) return '牡羊座'
  if ((m === 4 && d >= 20) || (m === 5 && d <= 20)) return '牡牛座'
  if ((m === 5 && d >= 21) || (m === 6 && d <= 21)) return '双子座'
  if ((m === 6 && d >= 22) || (m === 7 && d <= 22)) return '蟹座'
  if ((m === 7 && d >= 23) || (m === 8 && d <= 22)) return '獅子座'
  if ((m === 8 && d >= 23) || (m === 9 && d <= 22)) return '乙女座'
  if ((m === 9 && d >= 23) || (m === 10 && d <= 23)) return '天秤座'
  if ((m === 10 && d >= 24) || (m === 11 && d <= 22)) return '蠍座'
  if ((m === 11 && d >= 23) || (m === 12 && d <= 21)) return '射手座'
  if ((m === 12 && d >= 22) || (m === 1 && d <= 20)) return '山羊座'
  if ((m === 1 && d >= 21) || (m === 2 && d <= 18)) return '水瓶座'
  if ((m === 2 && d >= 19) || (m === 3 && d <= 20)) return '魚座'
  return ''
})

このzodiacSign===jsonデータのsign の内容を出力させる。
※この辺りもだいぶGPTの力を借りてしまった…。

まず、jsonデータを見るとこうなっている

// const data = await response.json() 

{
  "horoscope": { // horoscopという名前のオブジェクト
    "2025/08/11": [ // APIキー
      { /* 牡羊座の運勢 */
          // 〜〜〜〜コンテンツが入る
          "sign": "牡羊座"
      },
      { /* 牡牛座の運勢 */ 
          // 〜〜〜〜コンテンツが入る
          "sign": "牡羊座"
      },
      // ... 他の星座
    ]
  }
}

dataのhoroscopeというオブジェクトの、今日の日付（APIキー）の中から、
zodiacSign（ユーザーの星座あ）===sign（jsonデータの中のプロパティ）が一致するものを探して抽出するということ。

    // 今日の日付のjsonデータの配列
    // const resultArray = data.horoscope?.todaySlash
    // todaySlashは変数なのでブラケット記法を使う
    // ? ：存在しなければ undefined を返す
    const resultArray = data.horoscope?.[todaySlash]

    // zodiacSign（ユーザーの星座） と一致するデータを検索（find関数）
    // みつかればその要素を userHoroscope.value にセットする
    userHoroscope.value =
    // { sign: string } 型注釈
    // item.sign === zodiacSign.valueとなる要素を見つける    
      resultArray.find((item: { sign: string }) => item.sign === zodiacSign.value)

このようになる。
テンプレート側も修正

      <div v-if="userHoroscope">
        <h2>{{ userHoroscope.sign }} の今日の運勢</h2>
        <p>順位: {{ userHoroscope.rank }}</p>
        <p>{{ userHoroscope.content }}</p>
        <p>ラッキーアイテム: {{ userHoroscope.item }}</p>
        <p>ラッキーカラー: {{ userHoroscope.color }}</p>
      </div>

ただ、このままだとTSエラーが出ているので次回解消する。