「占いアプリを自分で作ってみたいけど、タロットカードの情報ってどうやってプログラムに覚えさせればいいんだろう…」「配列とかオブジェクトって言葉は聞いたことあるけど、正直よくわかっていない」。そんな悩みを持つ方に向けて、この記事では占いアプリ開発シリーズで作った「カードデータの設計」を、プログラミング初心者の方にもわかるようにやさしく整理し直してお届けします。読み終わる頃には、22枚のタロットカードの情報をプログラムの中でどう管理し、ランダムに1枚を引く仕組みをどう作るのか、その全体像がつかめるはずです。
前回までのおさらい：画像を並べただけでは占いアプリは動かない
前回の記事では、アプリの主役となるタロット画像22枚を「public」フォルダへ配置しました。ただ、これだけではまだ「画像ファイルが集まっているだけ」の状態で、占いアプリとしては動きません。今回は、これらの画像に「カードの名前」や「占いの意味」といった情報を紐づけて、占いアプリの心臓部となる仕組みを自分の手で作っていきます。
カード1枚分の情報を「オブジェクト」にまとめる
プログラミングでは、名前のついた情報をひとまとめにする箱のようなものを「オブジェクト」と呼びます。例えば、タロットカードなら次のような情報をひとつのオブジェクトにまとめられます。
- id：カードを見分けるための管理番号（0〜21）
- name：カードの名前（例：「愚者 – The Fool」）
- image：画像ファイルの置き場所（前回用意したパス）
- uprightMeaning：正位置（まっすぐ）で出たときの意味
- reversedMeaning：逆位置（逆さま）で出たときの意味
1枚のカードにつき、この5つの情報をワンセットにしておくことで、プログラムが「このカードは何者なのか」をきちんと認識できるようになります。
22枚まとめて管理する「配列」という考え方
カード1枚分の情報が作れたら、次は同じ形の情報を22枚分、順番に並べて入れておく「配列（リスト）」という入れ物を使います。配列は、たくさんのデータを整理してひとまとめに扱うための、いわば「引き出し」のようなものです。この配列の中に22枚分のオブジェクトをすべて詰め込むことで、プログラムは「タロットカードのデッキ全体」を認識できるようになります。
TypeScriptの「型」でうっかりミスを防ぐ
今回のデータ作成では「TypeScript（タイプスクリプト）」というプログラミング言語の便利な機能にも触れておきましょう。TypeScriptでは、「カードデータには必ず名前と画像パスと意味が入っている」という決まり（型）を、あらかじめ定義しておくことができます。
これにより、22枚分のデータを入力していく途中で項目名を打ち間違えたり、画像パスを書き忘れたりしても、エディター（コードを書くソフト）が赤い波線ですぐに教えてくれます。人間による「うっかりミス」をシステムが未然に防いでくれるので、安心して作業を進められるのが大きなメリットです。
占いアプリの心臓部「ランダムに1枚引く」仕組みを作る
カードのデータが揃ったら、いよいよ占いアプリの心臓部、そのデッキから1枚を「ランダムに引く」処理を作ります。JavaScript（TypeScript）には、0から1の間のランダムな小数を作ってくれる「Math.random()」という標準機能が備わっています。これを使って、独自の「drawRandomCard（ランダムにカードを引く）」という命令のまとまり（関数）を作成します。
この関数の中でやっていることは、実はシンプルで2つだけです。
- どのカードを引くか：ランダムな数字に22（カードの総数）を掛け算し、小数点以下を切り捨てることで、0〜21までのランダムな整数（カードのインデックス番号）を作り出します。
- 正位置か逆位置か：もう一度ランダムな数字を作り、「0.5より大きければ正位置、小さければ逆位置」という50%の確率で決まる判定ロジックを組み込みます。
占いにおいて最も神秘的な「偶然性」は、プログラムの世界では「乱数」という技術によって表現されているんですよね。ロジックと神秘が交差するこの瞬間こそ、占いアプリ開発でいちばん面白い部分だと感じています。
データ設計が完成して見えてきたもの・次回予告
タロットカード22枚分の情報を「オブジェクト」と「配列」で整理し、TypeScriptの「型」でミスを防ぎながら、「ランダムに1枚引く」仕組みまで作ることができました。ただの文字の羅列だったコードファイルに、22枚のタロットの意味を入力していく作業は、まるで自分のパソコンの中に小さな宇宙を作っているような、不思議な没入感がありました。
次回の記事では、今回作ったデータとロジックを実際に活かすための入り口となる「トップ画面」を作っていきます。ダークトーンの背景にボタンが並ぶ、スマホアプリらしいUIの構築に入りますので、お楽しみに。
よくある質問（FAQ）
Q. プログラミング初心者でも、タロット占いアプリのようなものは作れますか？
A. はい、作れます。今回紹介した「オブジェクト」「配列」「関数」といった考え方は、Web開発の基本となるものです。一つひとつは難しくないので、少しずつ手を動かしながら覚えていけば、個人開発でも十分に形にできます。
Q. なぜExcelやスプレッドシートではなく、プログラムでカードデータを管理するのですか？
A. スプレッドシートは人間が見るには便利ですが、アプリの画面にリアルタイムで表示したり、ランダムに1件だけ取り出したりする処理とは相性がよくありません。プログラムの中にデータを持たせることで、画面の表示やランダム抽選と直接つなげられるようになります。
Q. Math.random()は本当にランダムなのですか？偏りはありませんか？
A. Math.random()は「疑似乱数」と呼ばれる、計算によって作られたランダムな数値です。占いアプリのような一般的な用途では十分にランダムに感じられる結果が得られますが、抽選会のような厳密な公平性が求められる場面では、より専門的な乱数生成の仕組みが使われることもあります。
Q. TypeScriptを使わないと、こうしたアプリは開発できませんか？
A. TypeScriptを使わなくても開発は可能です。ただ、今回のようにカードの数が多いデータを扱う場合、TypeScriptの「型」の仕組みがあると入力ミスにすぐ気づけるので、特に初心者の方にはおすすめの選択肢です。
まとめ
今回は、占いアプリの心臓部となる「カードデータの設計」について解説しました。最後に、要点を振り返っておきましょう。
- カード1枚分の情報（名前・画像パス・意味など）は「オブジェクト」としてひとまとめにする
- 22枚分のオブジェクトは「配列」に並べることで、デッキ全体として管理できる
- TypeScriptの「型」を使うと、入力ミスをエディターが自動で教えてくれて安心
- Math.random()を使えば、「どのカードを引くか」と「正位置か逆位置か」をランダムに決められる
- ロジックと偶然性が交差する仕組みこそ、占いアプリ開発ならではの面白さがある
このシリーズは第1回から公開しています。準備から少しずつ形になっていく過程をまとめていますので、ぜひあわせて読んでみてください。