前回はこちら
最初の記事はこちら
進め方
- タロットカードのデータをTypeScriptで配列にする ✅
- その中からランダムに1枚選ぶロジックを書く ✅
- 結果を表示する画面を作る（1ページ）✅
- カードごとに画像を表示してみる
- NuxtLinkでページ遷移（トップ→結果ページ）
- デザインを整える
- 応用：今日の運勢APIを取り入れてみる 👈
- データの組み合わせで文章を作る
今日は占いAPIを取り入れてみようと思います（その２）🔮
今回利用するAPIについては前回の記事に記載しています。
前回の復習と今回やること
前回は誕生日を入力したら星座を取得することができた。
今回は
- 12星座分の占いデータをAPIから取得する
- 自分にあった占い結果を表示させる
APIからデータを取得する
今回使うAPIについてはこちらにまとめている。
こちらで非商用利用が可能な無料版のWEB APIを利用する。（利用したい場合はリンクを貼るなどのルールがあるので、利用規約について確認すること。）
▼そもそもAPIとは？
API＝Application Programming Interface の略。
あるプログラムの機能を、別のプログラムで利用できるようにやりとりをするための仕組みのこと。
Web API ではHTTP通信を用いてその機能を利用することができる。
Google Map APIやAmazon APIなど、いろんな企業がAPIを公開している。
今回使う 占い配信 Web ad Fortune 無料版API は、データの年月日を指定すると12星座ごとの占い結果をJSON形式で返してくれるというもの。
APIの仕組みについては下記のページを参考にしました。
APIを取得するための関数を書く
▼そもそもfetchとは？
- APIにデータを取りに行くための関数
- フェッチ API では、fetch() を呼び出してリクエストを行う
- fetch() 関数は Promise を返す
- このPromiseはサーバーのレスポンスを表す Response オブジェクトで履行される
- レスポンスに対して適切なメソッドを呼び出すと、リクエストのステータスを調べたり、レスポンス本体をテキストや JSON など様々な形式で取り出すことができる
例）
async function getData() {
// URL を格納した文字列
const url = "https://example.org/products.json";
try {
// レスポンスを格納した文字列
const response = await fetch(url);
// レスポンスがOKじゃなかったらエラーをthrowする
if (!response.ok) {
throw new Error(`レスポンスステータス: ${response.status}`);
}
// レスポンスがOKだったら
// jsonに レスポンスのjsonを格納してconsoleに表示させる
const json = await response.json();
console.log(json);
} catch (error) { // エラーの時
console.error(error.message);
}
}
▼今回のアプリに合わせて書いてみる
前述のものはjsなので、Vueのリアクティブを使って書く必要がある。
参考
https://www.takatechskill.com/archives/577
// 占いAPIを取得する
const horoscope = ref(null)
const isLoading = ref(false)
const errorMessages = ref('')
const fetchHoroscope = async () => {
// 【あとで】2025/07/01 を今日の日付にできるようにする
const url = '/api/api/horoscope/free/2025/07/01'
try {
const response = await fetch(url)
if (!response.ok) {
throw new Error('データの取得に失敗しました')
}
const data = await response.json()
console.log(data) // ← 一旦中身を確認
// {{horoscope}} にデータを格納
horoscope.value = data
} catch (error) {
console.error('エラー:', error)
// errorの型エラーを解消
errorMessages.value = (error as Error).message
} finally {
// ローディング状態の管理
isLoading.value = false
}
}
下記ができた！
- 生年月日を入れたら
星座が表示される -
データを取得を押したらAPIで取得したデータが表示される
次にやること
- 生年月日を入れやすくするように、1990年くらいを初期表示にする
- 一旦2025/7/1の運勢を取得しているので、今日の運勢を取得できるようにする
- 自分の星座にマッチした運勢だけ表示させる
- ラッキーアイテムなど、項目ごとに表示させる