JavaScriptだけで恋愛おみくじを作ってみた（乱数・履歴保存・SNS共有まで）

JavaScriptだけで簡単な「恋愛おみくじ」を作ってみました。

最初は単純にランダムで結果を表示するだけでしたが、実際に作り始めると意外と考えることが多くありました。

実装した機能

• ランダムで運勢を表示
• 結果をLocalStorageへ保存
• SNS共有用のテキスト生成
• 毎日違う結果を表示する仕組み
• スマホ表示への最適化

ランダム処理

まずは基本的な乱数です。

const results = [
  "大吉",
  "中吉",
  "小吉",
  "吉",
  "末吉",
  "凶"
];

const result = results[Math.floor(Math.random() * results.length)];

しかし、この方法ではリロードするたびに結果が変わってしまいます。

そこで日付を組み合わせて、同じ日なら同じ結果になるようなロジックに変更しました。

const today = new Date().toISOString().slice(0,10);

const seed = today.split("-").join("");

const index = Number(seed) % results.length;

これだけでも「毎日の運勢」らしい挙動になります。

LocalStorageで履歴保存

履歴も保存しておくとUXが向上します。

localStorage.setItem("fortune", result);

表示時は

const history = localStorage.getItem("fortune");

だけで取得できます。

SNS共有

最近は結果を画像化したり、シェアできるようにすると利用率が上がります。

私は画像生成機能も試しましたが、Canvas APIだけでも十分実装できます。

作ってみて感じたこと

恋愛おみくじ自体はシンプルな仕組みですが、

• ランダム性
• キャッシュ
• SEO
• スマホUI
• 共有機能

など、意外とフロントエンドの勉強になる題材でした。

実際に動作するサンプルや、UI・SEOについてまとめた内容は個人ブログでも紹介しています。

参考：https://mmcwant.livedoor.blog/

同じようなミニWebアプリを作っている方がいれば、実装方法などぜひ教えてください。