前回は、開発した初期画面を「Wrangler」を用いてインターネット上へ本番公開（デプロイ）する、感動の瞬間を体験しました。インフラのパイプラインが安全に開通したことで、ここからは安心して「アプリの中身」を作り込んでいくことができます。

第5回となる今回は、タロット占いアプリの命とも言える「カード画像」の準備と、Reactプロジェクトにおける画像ファイルの正しい配置ルールについて解説します。ただ画像をフォルダに入れるだけに見えますが、実はWeb開発特有の重要なセオリーが隠されています。

占いアプリの主役となる「画像素材」の調達
タロットアプリを開発する上で最も重要なパーツは、プログラムのロジックではなく「タロットカードそのものの画像」です。
今回は、世界中で最も親しまれている伝統的な「ライダー・ウェイト版（1909年）」の画像を使用します。この版はすでにパブリックドメイン（著作権フリー）となっているため、個人開発のアプリでも安全に利用することができます。

インターネット上のアーカイブなどから大アルカナと呼ばれる22枚のカード画像（「愚者」から「世界」まで）をダウンロードし、ファイル名をプログラムから扱いやすいように英語と数字で統一（例：00_fool.jpg、01_magician.jpgなど）して手元に準備しておきましょう。

Reactにおける2つのフォルダ：「src」と「public」
画像素材が準備できたら、それをViteで作成したプロジェクトフォルダの中に配置します。ここで初心者の方が必ず一度は迷うのが、「画像はどこに保存すればいいのか？」という問題です。

プロジェクトのフォルダ内を見ると、主に「src（ソース）」と「public（パブリック）」という2つのフォルダが存在します。この2つには、明確な役割の違いがあります。

src（ソース）フォルダ
ここは「工場の中」です。人間が書いたプログラム（JavaScriptやCSS）が置かれ、最終的なビルド（第4回で解説した圧縮作業）の際に、機械が読みやすい形へ徹底的に加工・変換される場所です。

public（パブリック）フォルダ
ここは「ショーウィンドウ」です。ここに置かれたファイルは、ビルドの際にも一切加工されず、「そのままの形」で本番サーバーの公開用フォルダへコピーされます。

画像は「public」フォルダへ配置する
今回のように、22枚もの大量のカード画像や、アプリのアイコン（ファビコン）などは、プログラムによって加工される必要のない「静的な完成品ファイル（静的アセット）」です。

そのため、これらは「public」フォルダの中に配置するのが正解です。
具体的には、public フォルダの中に新しく images というフォルダを作り、さらにその中に rider_waite_1909 といった分かりやすい名前のフォルダを作成して、22枚の画像をすべて格納します。

こうすることで、プログラム側から画像を呼び出す際のパス（住所）が非常にシンプルになります。
例えば、Reactのコード内で画像を読み込む際、URLを /images/rider_waite_1909/00_fool.jpg と指定するだけで済むのです。いちいち複雑なプログラムの相対パス（../../のような記述）を書かなくて良くなるため、コードがスッキリと読みやすくなります。

次回（第6回）は、今回配置した22枚の画像ファイルと、それぞれのカードが持つ「意味（正位置・逆位置）」をプログラムに教え込むための「データ定義」を行っていきます。いよいよ、占いの心臓部となるロジックの構築に入ります！

【編集後記】
無機質なコードが並んでいた開発用フォルダの中に、色鮮やかな22枚のタロット画像がずらりと並んだ瞬間、ただの「Webシステム」が突然「魔法の道具」へと変貌したような感覚を覚えました。プログラムを書く時間と同じくらい、こうした「素材（アセット）を丁寧に準備し、規則正しく配置する作業」は、開発のモチベーションを爆発的に高めてくれます。さあ、役者は揃いました。次はいよいよ、彼らに命（ロジック）を吹き込んでいきます！