前回は、アプリの主役となるタロット画像22枚を「public」フォルダへ適切に配置し、プログラムから呼び出しやすい状態を整えました。しかし、現在の状態ではただの「画像ファイルの集まり」に過ぎません。

第6回となる今回は、これらの画像に「カードの名前」や「占いの意味」という情報を紐づけ、さらに「ランダムに1枚を引く（ドローする）」という、占いアプリの心臓部となるロジックを自らの手で構築していきます。

カード情報のデータ構造を設計する
プログラムの世界では、バラバラの情報をひとまとめにして扱うために「配列（リスト）」と「オブジェクト（辞書）」という概念をよく使います。

今回は src フォルダの中に、新しくデータの定義だけを担当する専用ファイル（例：tarotData.ts）を作成します。UI（画面の見た目）を作るファイルと、データやロジックを担当するファイルを明確に分けることで、後から見返したときに整理された美しいシステムになります。

このファイルの中で、タロットカード1枚1枚の情報を定義していきます。具体的には、大アルカナ22枚それぞれに対して、以下のような項目（プロパティ）を持たせます。

id: 管理用の番号（0〜21）

name: カードの名前（例：「愚者 – The Fool」）

image: 画像のパス（前回準備した /images/rider_waite_1909/00_fool.jpg などの文字）

uprightMeaning: 正位置（真っ直ぐ）で出た時の意味

reversedMeaning: 逆位置（逆さま）で出た時の意味

これら22枚分のデータブロックを1つの大きなリスト（配列）として定義することで、プログラムが「タロットカードのデッキ全体」を認識できるようになります。

「ランダムに1枚を引く」仕組みの実装
データが定義できたら、次はそのデッキからカードを引くアクションを作ります。
占いにおいて最も神秘的な「偶然性」は、プログラムの世界では「乱数」という技術を使って表現します。

JavaScript（TypeScript）には、Math.random() という、0から1の間のランダムな小数を生成する便利な標準機能が備わっています。これを利用して、独自の drawRandomCard（ランダムにカードを引く）という関数（命令のまとまり）を作成します。

この関数の中で行う計算は2つだけです。

どのカードを引くか： 乱数に22（カードの総数）を掛け算し、小数点以下を切り捨てることで、0から21までのランダムな整数を作り出します。これが、先ほど定義した配列からカードを1枚選び出す「インデックス番号」になります。

正位置か、逆位置か： もう一度乱数を生成し、「0.5より大きければ正位置、小さければ逆位置」という50%の確率の判定ロジックを組み込みます。

TypeScriptによる「型」の恩恵
ここで少しだけ、今回採用している「TypeScript（タイプスクリプト）」の強みに触れておきましょう。
TypeScriptでは、「カードデータとは、必ず名前と画像パスと意味を持っているものである」という『型（ルール）』を事前に定義することができます。

これにより、万が一22枚のデータを打ち込んでいる途中で「uprightMeaning（正位置の意味）」というスペルを打ち間違えたり、画像パスを書き忘れたりしても、エディター（VS Code）が即座に赤い波線でエラーを警告してくれます。人間による「うっかりミス」をシステムが未然に防いでくれるため、安心して開発を進められるのです。

次回（第7回）は、今回作成したデータとロジックを活かすための入り口となる「トップ画面」を作成していきます。ダークトーンの背景にボタンが並ぶ、スマホアプリらしいUIの構築に入りますのでお楽しみに！

【編集後記】
ただの文字の羅列だったコードファイルに、22枚のタロットの深い意味（「新しい始まり」「運命の転換」など）を入力していく作業は、まるで自分のパソコンの中に小さな宇宙を創り出しているような不思議な没入感がありました。そして Math.random() というたった一行の数学的な関数が、ユーザーの運命を左右する「偶然性」を生み出す。ロジックと神秘が交差するこの瞬間こそ、占いアプリ開発の最も面白い醍醐味だと感じています。