【TypeScript&Nuxt.js】占いアプリ③選んだカードを表示させる

前回はこちら

進め方

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

App.vue の <template> を編集してカード情報を表示する

<div class="p-results">
  <h2>今日の運勢</h2>
  <div class="p-results-card">
    <p>タロットNo: {{ selectedCard.id }}</p>
    <p>名前: {{ selectedCard.name }}</p>
    <p>意味: {{ selectedCard.normalMeaning }}</p>
  </div>
</div>

※動画では「ID」になっているが、「タロットNo」に変更

正位置or逆位置をランダムで決めたい

自分で考えてもわからなかったのでGPTに聞いてみた。☁️

JavaScript（TypeScript）で Math.random() を使えば、0〜1未満の乱数が出る。

たとえばこうすると 50% の確率で「正位置」か「逆位置」を選べる：

const isReversed = Math.random() < 0.5 // trueなら逆位置、falseなら正位置

用語	意味
Math.random()	0以上1未満の小数をランダムに出す
< 0.5	50% の確率で true/false を作れる
ref で状態管理	Vueの「記憶の箱」だね
? :	三項演算子（条件によって表示を切り替える）

そもそもMath.random() についての理解ができていないので、次の記事で学習する。