はじめに
最近ChatGPTで占いができるらしいと聞いたので、タロット占いを試してみた🔮
すると、どのように占ったかが「分析」というタブでPythonコードを見ることができた！
確かにカードをランダムに引くことで占いができるのか、と気付き。。🧐（神聖さはない気がするけど）
これ、もしかしてTSとNuxtでもできるかもと思ったので勉強がてらやってみる🐣
配列や型定義など、基本的なところは勉強した程度。
占いについての知識は全くないので検索したり、GPTに聞きながら調べた。
※応用として占いAPIを利用できたらと考えている💭
今回はChatGPTにはコードを出力させず、自分が詰まったときにアドバイスをもらう補助的な役割で使った。
学べそうなこと
| 機能 | 学べそうなこと |
|---|---|
| カード一覧の配列を作る | TypeScriptでの配列・型の書き方 |
| ランダムにカードを引く | JavaScriptのロジック（Math.randomなど） |
| 結果を表示する画面を作る | コンポーネントの作成・分割 |
| NuxtLinkで遷移させる | ルーティングやページ遷移の理解 |
| 引いたカードに応じて画像を表示 | 条件分岐と画像の扱い |
進め方
（イメージをGPTに伝えて補足してもらった）
-
タロットカードのデータをTypeScriptで配列にする
型の作り方、配列の書き方 -
その中からランダムに1枚選ぶロジックを書く
JavaScriptの基本的な処理 -
結果を表示する画面を作る（1ページ）
Nuxtのページ、表示の基礎 -
カードごとに画像を表示してみる
条件分岐、画像の表示 -
NuxtLinkでページ遷移（トップ→結果ページ）
ルーティングの基本 -
デザインを整える
CSSの利用 -
応用：今日の運勢APIを取り入れてみる
APIの呼び出しとデータ表示 - データの組み合わせで文章を作る
セットアップ
プロジェクト作成。
✔ TypeScript
✔ Vue Router
✔ Pinia
✔ ESLint + Prettier
Install Oxlint for faster linting? (experimental)はNoにした。
ステップ1.タロットカードのデータをTypeScriptで配列にする
src/store/tarotCards.ts を作成した。
⭐️カードの情報
- 番号
- カードの名前
- 内容（タロットカードには正位置と逆位置があるから２パターン？）
const tarotCards = [
{
id: 0,
name: '愚者（The Fool）',
normalMeaning: '自由、冒険、無限の可能性',
reverseMeaning: '無計画、不安定、軽率',
},
{
id: 1,
name: '魔術師（The Magician）',
normalMeaning: '創造力、チャンス、行動力',
reverseMeaning: '詐欺、自己中心、実力不足',
},
// 以下略
]
ここまででGPTに確認したら２つ修正点が出た✅
📝①storeじゃなくてdataみたいなディレクトリにtsファイルを作るといい！
** 🗂️ storeとdataの違いをちゃんと理解する**
| フォルダ | 使い道 | 例 | 備考 |
|---|---|---|---|
| store | アプリ全体で使う状態（state）管理 | 「今引いたカードはこれ！」など動的なデータ | Piniaで使う（defineStore()を書く場所） |
| data（自作） | ただの静的なデータ置き場 | 「全部のタロットカード一覧」など最初から決まってるデータ | TypeScriptの配列を置くのにピッタリ |
📝②型定義をした方が良い！
TypeScriptは勝手に型を推論してくれるため、明示的に書かなくても動くことが多い。
でも型を定義すると再利用・保守性がUPするのでtypeを作ってexportしよう。
// 型（type）定義
export type TarotCard = {
id: number
name: string
normalMeaning: string
reverseMeaning: string
}
// 配列に型をつける
export const tarotCards: TarotCard[] = [
{
id: 0,
name: '愚者（The Fool）',
normalMeaning: '自由、冒険、無限の可能性',
reverseMeaning: '無計画、不安定、軽率',
},
{
id: 1,
name: '魔術師（The Magician）',
normalMeaning: '創造力、チャンス、行動力',
reverseMeaning: '詐欺、自己中心、実力不足',
},
]
次やること
2 . その中からランダムに1枚選ぶロジックを書く
参考