ペストパスタはG-dが存在する証拠です

自家製カッペリーニ (エンジェル ヘア) に山盛りの新鮮なペストを添える以上に嬉しいことは、人生の中でほとんどありません。私は真のグルメで、特にイタリア料理に関しては、いつもより複雑なレシピに挑戦していますが、このようなミニマルな料理のシンプルさと楽しさは満足をやめることがありません。もし最後の食事を選ぶという（不運な）幸運があったとしたら、パスタよりも寿司かペストかという難しい決断になるだろうが、それでも最終的にはペストパスタが勝つと思う。

ペストの話をするとお腹が空いてくる

どうすればいいですか？さて、もちろんペストパスタを作ります。時には「Quando a Roma!」と言いたくなることもあります。

まずは、フレンドリーなイタリアのマーケット「イル メルカート ディ ジョバンニ」で買う食材のリストを作成しましょう。不変オブジェクト配列と可変オブジェクト配列の両方を使用して、2 つのレシピから買い物リストを作成します。必要なことを単に書き出す方が効率的ですが、そのほうがはるかに楽しいのはご存知でしょう。ペスト パスタの作り方をプログラムする方法について、あなたは飢えていると思います。それでは、早速詳しく見ていきましょう。「マンジャ マンジャ!」

個別のパスタとペストのレシピ配列を作成する

まず、pastaRecipeArray と pestoRecipeArray の変数を宣言します。各変数はオブジェクトの配列に割り当てられ、各オブジェクトは個々の材料を表します。

配列値を各変数に割り当てるときは、Object.freeze() メソッドを使用して、配列値が不変であることを確認します。 (これについては後で詳しく説明します)

各レシピ オブジェクトには、次のようなキーと値のペアを持つ 3 つのプロパティがあります:

• 'name' = '文字列' 形式の材料の名前
• 'recipe' = 材料がどのレシピに必要かを示す、'配列' 形式の値 (パスタ、ペスト、または両方)
• 'price' = かなり非現実的なダミー コンテンツを使用した、「数値」形式の米ドルでの材料の価格

(注: この投稿では内容を簡潔かつ比較的シンプルにするために、数量やその他の詳細を省略しました。JSON を使用してこれらのオブジェクトを実装することもできますが、簡単に ダイジェスト ここ。）

これらの配列を確立するコードは次のようになります:

const pastaRecipeArray = Object.freeze([
  { "name": "Eggs", "recipe": ["pasta"], "price": 6.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Semolina Flour", "recipe": ["pasta"], "price": 12.95 }
])

const pestoRecipeArray = Object.freeze([
  { "name": "Basil", "recipe": ["pesto"], "price": 6.99 },
  { "name": "Black Pepper", "recipe": ["pesto"], "price": 9.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Parmesan", "recipe": ["pesto"], "price": 15.99 },
  { "name": "Pine Nuts", "recipe": ["pesto"], "price": 13.98 }
])

レシピ キーが配列形式の値を指していることがわかります。両方のレシピで一部の材料が使用されるため、このように設定しました。

pastaRecipeArray が適切に設定されていることをテストするには、配列内の各オブジェクトを反復処理するために使用されるコールバック関数である .forEach() メソッドを利用できます。成分をパラメータとして使用すると、次のようにコンソールにログインできます:

pastaRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

コンソールを調べると、次のような出力が表示されるはずです:

Object {name: "Eggs", recipe: Array(1), price: 6.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Semolina Flour", recipe: Array(1), price: 12.95}

同様に、次のように pestoRecipeArray をログに記録できます:

pestoRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

結果は次のようになります:

Object {name: "Basil", recipe: Array(1), price: 6.99}
Object {name: "Black Pepper", recipe: Array(1), price: 9.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Parmesan", recipe: Array(1), price: 15.99}
Object {name: "Pine Nuts", recipe: Array(1), price: 13.98}

(注: Array(1) や Array(2) などの出力が表示された場合は、これらのキーを選択するように関数を書き直すか、コンソールで配列をクリックして詳細を確認する必要があります。含まれるもの。)

買い物リスト配列の作成

レシピ配列を確立したので、次のステップに進み、買い物リスト配列を作成します。これを行うには、オブジェクト配列 pastaRecipeArray と pestoRecipeArray を結合して、shoppingListArray という名前の新しい可変変数を作成します。次のようにスプレッド演算子を使用してこれを行います:

const shoppingListArray = [...pastaRecipeArray, ...pestoRecipeArray]

次に、次の console.log() を使用して、新しいリストがどのようになるかを確認してみましょう。今後は、煩雑な部分を取り除くために、オブジェクト全体ではなくオブジェクト内のプロパティ値をログに記録します。このコードを使用して、プロセスの各ステップ後にリストがどのように変化するかを確認するとよいでしょう。

shoppingListArray.forEach((ingredient) => {
      console.log(ingredient.name)
})

コンソールでリストが 1 つに結合されていることがわかります。今回は各成分名のみが記録されています。

Eggs
Extra Virgin Olive Oil
Kosher Salt
Semolina Flour
Basil
Black Pepper
Extra Virgin Olive Oil
Kosher Salt
Parmesan
Pine Nuts

不変配列と可変配列

pastaRecipeArray と pestoRecipeArray を不変にする必要があるのはなぜですか?それらを不変にすると、割り当て後に値を変更できなくなります。これらのレシピを単に破棄することはしたくありません。私たちは彼らを別の輝かしい日のために救いたいと思っています。私たちが一時的な変更可能な買い物リストに何を書き込もうとしているかに関係なく、これらの不変の家族のレシピは存続する必要があります。

また、もちろん元のレシピに影響を与えることなく、新しく作成した shoppingListArray から材料を追加または削除して、この料理を特定の好みに合わせて作成できるようにしたいと考えています。

材料の追加、置換、削除

お気づきかと思いますが、パスタとペストのレシピを買い物リストに組み込んだところ、「エクストラ バージン オリーブ オイル」と「コーシャー ソルト」が重複してしまいました。二度買う必要はないので処分しましょう。重複を削除するもっと手の込んだ方法がありますが、ここでは .splice() を使用して最初のエクストラ バージン オリーブ オイル オブジェクトを削除します。

.splice() メソッドは、配列内の要素を破壊的に削除または置換します。最初のパラメータは削除する最初の要素を表し、2 番目のパラメータはその開始点から削除する要素の数を表します。 「エクストラ バージン オリーブ オイル」は配列内の 2 番目のオブジェクトですが、配列は「0」から始まるため、技術的には 2 番目のオブジェクトは「1」で表されます。以下を実行しましょう:

shoppingListArray.splice(1, 1)

コンソールには、「Extra Virgin Olive Oil」オブジェクトが 1 つだけあることがわかります。 (注: オリジナルのレシピ配列の 1 つで .splice() または同様のメソッドを使用しようとすると、TypeError が発生します。これは、Object.freeze() を使用して不変にするためです。)

まだ「コーシャ ソルト」が余っているので、.splice() を最大限に使用するつもりです。最初の 2 つのパラメータに加えて、配列内の要素を新しい要素に置き換えることができる 3 番目のパラメータがあります。私はペストにレモンを少し加えるのが大好きですが、塩辛い食べ物は好きではありません。そこで、余分な「コーシャー ソルト」を新しい「レモン」オブジェクトに置き換えましょう。読みやすくするためにレモン オブジェクトを変数として宣言し、それを 3 番目の .splice() パラメータとして含めます。

const lemon = { "name": "Lemon", "recipe": ["pesto"], "price": 2.04 }

shoppingListArray.splice(6, 1, lemon)

今日はちょっと 生意気な気分なので、少し趣向を変えて、.push() を使用してローストトマトを追加しましょう。 .push() を使用すると、各パラメータが新しい要素を表すように要素を配列の末尾に追加できます。 そこで、リストに「チェリートマト」を加えてみましょう。そういえば「にんにく」も忘れてました！

const tomatoes = { "name": "Cherry Tomatoes", "recipe": ["pesto"], "price": 5.99 }

const garlic = { "name": "Garlic", "recipe": ["pesto"], "price": 2.99 }

shoppingListArray.push(tomatoes, garlic)

買い物リストの整理

すべての材料を十分に確立したので、ショッピング体験をシームレスにする方法で材料を整理しましょう。

.sort() を使用してリストをアルファベット順に整理しましょう。

shoppingListArray.sort((a, b) => {
  const nameA = a.name
  const nameB = b.name

  if (nameA  nameB) {
    1
  }
  return 0
})

ショッピング リストはコンソールで次のように表示されます。

Basil
Black Pepper
Cherry Tomatoes
Eggs
Extra Virgin Olive Oil
Garlic
Kosher Salt
Lemon
Parmesan
Pine Nuts
Semolina Flour

予想されるコストを事前に計画する

これで市場に行く準備が整いましたが、まず、.reduce() を使用して、必要な資金がどれだけあるかを確認しましょう。 .reduce() についてはやることがたくさんあり、お腹が空いてきたので詳細は省略します。

const ingredientsPrice = shoppingListArray.reduce((accumulator, ingredient) => {
  return accumulator   ingredient.price
}, 0)

console.log("You will need $"   ingredientsPrice   " to make pesto pasta. Man is life is expensive.")
// You will need $98.39 to make pesto pasta. Wow, life is expensive.

新しいレシピリスト配列の作成

それで、私たちは店に行って材料を手に入れましたが、今度は材料をそれぞれのレシピに分けて戻し、すべてをテーブルに並べて整理整頓したいと思います。 .filter()、.includes()、そしてもちろん .forEach() を使用して 2 つの新しい配列、pastaIngredients と pestoIngredients を作成し、コンソールに記録しましょう。

const pastaIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pasta')
})

pastaIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

const pestoIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pesto')
})

pestoIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

それを「まとめる」

これらをコンソールに記録するとわかるように、元の不変レシピ配列である pastaRecipeArray と pestoRecipeArray を変更せずに、shoppingListArray を正常に作成できました。その後、shoppingListArray を破壊的に変更して、好みに応じて成分を追加、削除、置換できるようになりました。また、店に行く前に必要な金額も計算しました。最後に、素晴らしい食事の準備として、これらの材料をそれぞれのレシピ、パスタ材料とペスト材料に分離することができました。

まあ、なんとおいしい料理でした。皆さんも私と同じように楽しんでいただければ幸いです。 またまた、マンジャマンジャ!