皆さん、こんにちは！すぎです！
今回は、占い機能を実装する過程をお見せします。
初心者プログラマーがJavaScript（Vue.js）を使用してランダムな運勢を表示する簡単なアプリケーションを作成していきます。顔アイコンが連動します。
新しい技術やウェブサイトの変化に興味がある方は、ぜひ参考にしてみてください。
この内容はYouTubeでもやっています。ぜひチェックしてみてください！
1. 運勢リストの準備
まずは、運勢のリストを準備します。リストの内容は以下の通りです。
- 大吉
- 中吉
- 小吉
- 末吉
- 凶
このリストを基に、ボタンをクリックすると運勢がランダムに表示されるようにしていきます。
2. 占いボタンの作成
次に、運勢を占うボタンを作成します。このボタンには、JavaScriptの「onClick」イベント、（Vue.jsではv-onディレクティブ）を組み込みます。このボタンを押すと、運勢のリストからランダムに1つ選ばれ、その結果が画面に表示される仕組みです。
<button @click="showFortune">運勢を占う</button>ボタンをクリックすると、現状では常に「大吉」が表示されるようになっているので、次にこれをランダムに表示するように改善します。
3. JavaScriptでランダムな運勢を表示
JavaScriptでランダムに運勢を表示するコードを追加します。配列からランダムなインデックスを生成し、それに基づいて運勢を表示します。
fortunes: [{
result: "大吉",
},
{
result: "中吉",
},
{
result: "小吉",
},
{
result: "末吉",
},
{
result: "凶",
}
],これで、ボタンを押すたびに異なる運勢が表示されるようになりました。
4. 画像の追加
次に、運勢に合わせて画像を表示する機能を追加します。たとえば、大吉が出たら喜びの表情、中吉なら少し嬉しそうな表情といった具合です。画像をJavaScriptで動的に変更する仕組みを以下のように実装します。
fortunes: [{
result: "大吉",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/喜び.png"
},
{
result: "中吉",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/少し嬉しい.png"
},
{
result: "小吉",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/通常.png"
},
{
result: "末吉",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/少し悲しい.png"
},
{
result: "凶",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/悲しみ.png"
}
],これで、運勢の結果に応じて表情が変わる占い機能が完成です。
5. メッセージのカスタマイズ
さらに、結果に表示されるメッセージも少し特別感を出すためにカスタマイズしました。例えば、次のようにメッセージを出すことで、占いがより楽しくなります。
- 大吉: 「運命は今日、あなたに微笑む」
- 中吉: 「幸運の風があなたの背中を押す」
- 小吉: 「小さな一歩が奇跡を生む」
- 末吉: 「嵐の中にも必ず光が差す」
- 凶: 「静けさの中に答えが見つかる」
これらのメッセージは、JavaScriptの条件分岐を使って表示することができます。
fortunes: [{
result: "大吉",
message: "運命は今日、あなたに微笑む。",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/喜び.png"
},
{
result: "中吉",
message: "幸運の風があなたの背中を押す。",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/少し嬉しい.png"
},
{
result: "小吉",
message: "小さな一歩が大きな奇跡を生む。",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/通常.png"
},
{
result: "末吉",
message: "静けさの中に、答えは見つかる。",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/少し悲しい.png"
},
{
result: "凶",
message: "嵐の後には必ず陽が昇る。",
image: "https://kotobukilab.com/media/wp-content/uploads/2024/09/悲しみ.png"
}
],
6. 完成
これで占い機能が完成しました！運勢の結果が表示されるたびに、それに合った画像とメッセージが表示されるようになっています。
1日1回、どうぞ！
ここまで読んでいただきありがとうございました。
