BLOG 2024.07.16

毎日弁当の中身に困っているエンジニアへ | お弁当をランダムで決められるサイトを作ってみた

Written by XU

INDEX

はじめに Preview

今回、お弁当の中身のメニューをランダムに生成するページを作ってみました。

エンジニアの先輩の水野さんにアイデアを相談し、またリードエンジニアの大越さんにアドバイスをいただきながら、作成したのでぜひ英語訳と一緒にご覧になってください。

背景 Background

ある日、私はシニアエンジニアの水野さんに相談しました。

(One day, I had a casual talk with senior engineer Mizuno-san.)

私: アイデアがあります！ランチ用の弁当のランダムなメニューを生成する面白いページを作ってみたいのですがどう思いますか？ランチを決めるのは、毎日とても時間がかかり、ギリシア神話に登場するシーシュポスのようで困っています。

(Me: I have an idea. Could I create a funny page that generates random menus for our lunch—bento? You know, making a decision about lunch is almost an endless job, like what Sisyphus did.)

水野さん: いいアイデアですね。EVOWORXのウェブサーバーを使って作成してみてください。

(Mizuno-san: You can give it a try. We are allowed to upload some things to the EVOWORX web server.)

そこで、私は小さなデモを作成することにしました。

(So, I made a small attempt to create a tiny demo, which I have attached below.)

デモ Demo

まず最初に、テキストのみで、デモを作成しました。

In the very beginning, i made a demo only with text content.

https://codepen.io/evolab/pen/RwzPagX

作り方　Illustration

JavaScriptで食材の配列データを作成し、クリック時にMath.random関数を使用してランダムに食材を取得しています。

(I created a list and used Math.random in JavaScript to generate the content of my menu group randomly, by using click event.)

レイアウトでは、CSSのdisplay: flexを使用して、弁当の材料を表示するUIカードを管理しました。

(In my layout, I used display: flex in CSS to manage those UI cards that display the ingredients of the bento.)

問題点 Problems

デモを作成しましたが、見た目がシンプルです。正しく動作はしますが、あまり面白くありません。

(Anyway, it looks a bit simple. This case works normally but without any interest.)

もっと魅力的にするために、各アイテムに画像を追加してみようと思います。

(To make it more appealing, maybe I should add a picture for each item.)

ただし、リストをオプションに変更すると、ランダム関数が変に動作してしまいます。

(However, something has bothered me. When I change the list to options, the random function acts weirdly.)

解決策 Solution

問題を解決するために、リードエンジニアの大越さんに聞きました。

(I asked our lead engineer, Okoshi-san, who has the dominant knowledge in frontend technology in EVOWORX.)

下記は私のコードです。

(my codes has attached below.)

const m1 = [ 
{ name: 'キュウリ', img: 'cucumber.jpg' }, 
{ name: 'キャベツ', img: 'cabbage.jpg' }, 
{ name: 'なす', img: 'eggplant.jpg' }, 
{ name: 'トマト', img: 'tomato.jpg' }, 
{ name: 'レタス', img: 'lettuce.jpg' }, 
{ name: '小松菜', img: 'komazuna.jpg' }, 
]; 
const s1Name = m1[getRandom(m1.length)].name; 
const s1Img = m1[getRandom(m1.length)].img; 
const content1 = `<div><img src="./img/${s1Img}" alt=""><p>${s1Name}</p></div>`; 
item1.insertAdjacentHTML('beforeend', content1);

私: SOS、大越さん、私のdemoでトラブルが発生しました。JavaScriptを使ってHTMLのliタグにdivタグ全体を入れたいのですが、insertAdjacentHTMLがうまくいきません。

(Me: SOS, Okoshi-san, some troubles have happened in my work. I want to insert a whole div tag into an li tag in HTML using JavaScript. insertAdjacentHTML seems wrong in my case.)

大越さん: insertAdjacentHTMLはテキストの挿入、2回クリックするとliタグに2つの結果が表示されてしまいます。Element.innerHTMLはテキストの上書きです。だからinsertAdjacentHTMLではなく、Element.innerHTMLを使うべきです。

(Okoshi-san: Oh Joe-san, clicking once will insert one group, clicking twice will show two sets of results in your li tag when you use insertAdjacentHTML. Cause, insertAdjacentHTMLonly means to run action of insertion, without any function of over-writing. In this case, you should use Element.innerHTML.)

const content1 = `<div><img src="./img/${s1Img}" alt=""><p>${s1Name}</p></div>`; 
item1.innerHTML = content1;

大越さん: ジョさんのコードは、JavaScriptでオブジェクトを使用して名前と画像を含めています。オブジェクトをランダムに選択するときは慎重に行う必要があります。一度だけランダムな値を取得するべきです。下記のコードのように：

(Okoshi-san: Be careful. I have seen that you are using objects in JavaScript to contain the name and image. The way you select the object randomly should be done so carefully. You should only get the random value once, like this:)

const s1 = getRandom(m1.length);

大越さん: ジョさんが書いたコードで実行した結果は名前と画像が一致していません。配列内から食材の名前をランダムに取得する処理と、食材の画像をランダムに取得する処理を別々に実行しているからです。

(Okoshi-san: Running your codes will cause name and image to mismatch in one item, since pinking up names or images of food from different random actions. )

よって、liタグにコンテンツを表示するには、次のようにするべきです。

(Then, the content you want to be showed in the li tag should look like this:)

const content1 = `<div><img src="./img//${m1[s1].img}" alt="${m1[s1].name}"><p>${m1[s1].name}</p></div>`;

${m1[s1].name}は、m1の配列内に存在するのnameキーの値（食材の名前）をランダムに取得しています。

(${m1[s1].name} means s1 is only one tiny item in m1, then you want to pick the name which comes from the random result s1 of m1.)

大越さん: さらに、Bento UIはジョさんのレイアウトよりも良さそうです。このページに適用するのが、おすすめですよ。gridレイアウトを使って。頑張ってください！

(Okoshi-san: Hold on. Bento UI seems better than your layout. I suggest you apply it to your page. You know what i am saying, using grid layout. Good luck!)