Findyのエンジニアおみくじの舞台裏を大公開！

新年、明けましておめでとうございます。

ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。

今年も「エンジニアおみくじ」の季節がやって参りました 🎉

企画の詳細につきましては↓の記事をご参照ください。

findy-code.io

今回はエンジニアおみくじ開発の舞台裏をお話ししようと思います。

エンジニアおみくじとは
舞台裏① 企画からエンジニアが関わる
舞台裏② おみくじパターンは18万通り以上
まとめ

エンジニアおみくじとは

エンジニアおみくじは Findy で毎年1月に開催しているイベントです。

期間中にFindyへログインし、引いたおみくじをシェアすると抽選でプレゼントがもらえます。

さらに今年はおみくじのパターンを増やしました。

その数、なんと 18万7,500通り！！

たくさんご用意しましたので是非お楽しみください。

舞台裏① 企画からエンジニアが関わる

ファインディでは、企画の段階からエンジニアがプロジェクトに参加しており、おみくじの内容に関してもエンジニアの監修が入っています。

エンジニアチームからは、用語やトレンドを共有したり、技術検証のフィードバックなどを行いました。運勢の一覧も皆でチェックしました。

今年は年収やスキル偏差値などに加え、生成AIやセキュリティといった項目が盛り込まれてあります。

中には思わずニヤニヤしてしまうものもあるでしょう。

面白い運勢が出ましたら「#Findyエンジニアおみくじ2025 」のハッシュタグを付けてシェアをお願いします。

舞台裏② おみくじパターンは18万通り以上

実は、これまでのエンジニアおみくじは「運勢別に固定の画像を返す」という仕様であり、画像作成の工数を抑えるため、60パターンしかありませんでした。

単純な構成だっため実装面では楽でしたが、画像を作成するデザインチームへの負担が大きいという課題がありました。また、おみくじを引き直した際に結果が重複する確率もそこそこあり、ユーザー体験の面からもパターンの増加は必須でした。

このような背景から、今回は運勢（6通り）、各項目（5⁵通り）、コメント（10通り）からなる 6×5×5×5×5×5×10 = 187,5000 通りの組み合わせを用意することにしました。

すごい数ですね。ちなみに既存のやり方では休まず働いて15年かかる作成量であると試算されました。

ここはエンジニアチームの出番です💪

大量の組み合わせの画像を作成するのは現実的でないため、実装を根本から見直し、動的に画像へテキストを挿入する形式を採用しました。

// ※説明のためコードを一部変更しております
const textMaps = [
  // 年収
  {
    '超大吉': {
      0: '項目1',
      1: '項目2',
      2: '項目3',
      3: '項目4',
      4: '項目5',
    },
    '大吉': { ... },
    '中吉': { ... },
    :
  },
  // スキル偏差値
  {
    '超大吉': { ... },
    '大吉': { ... },
    :

// ※説明のためコードを一部変更しております
const noteMap = {
  '超大吉': {
    0: 'コメント1',
    1: 'コメント2',
    2: 'コメント3',
    3: 'コメント4',
    4: 'コメント5',
    5: 'コメント6',
    6: 'コメント7',
    7: 'コメント8',
    8: 'コメント9',
    9: 'コメント10',
  },
  '大吉': { ... },
  '中吉': { ... },
  :

// ※説明のためコードを一部変更しております
const ids = [...];
const index = '超大吉';
const texts = [textMaps[0][index][ids[0]], textMaps[1][index][ids[1]], textMaps[2][index][ids[2]], textMaps[3][index][ids[3]], textMaps[4][index][ids[4]]];
const note = noteMap[index][ids[5]];

return (
  <div style={{ backgroundImage: 'url(...)' }}>
    <span>{texts[0]}</span>
    <span>{texts[1]}</span>
    <span>{texts[2]}</span>
    <span>{texts[3]}</span>
    <span>{texts[4]}</span>
    <p>{note}</p>
  </div>
);