JavaScriptの勉強を始めたばかりの頃、数値やアルファベットを扱うだけではなかなか実感が湧かないことってありますよね。私もいろいろな本や動画で学んできましたが、一番面白くて理解しやすかったのは、先輩が教えてくれた「カレー作りを再現するJavaScriptの説明」でした。
そこで今回は、その経験を活かして備忘録と復習+αを兼ねて、JavaScriptで本格的なクッキングに挑戦してみましょう!
1. カレーを作る関数:makeDetailedCurry
まず、カレーを作る手順を一つずつ書いた関数があります。この関数の名前は makeDetailedCurry
(「本格カレー作り」)です。
関数とは、特定の処理をまとめた部分のことです。
const makeDetailedCurry = () => { console.log("本格カレー作りスタート!"); }
最初に「カレー作りがスタートしたよ!」というメッセージを表示します。
2. 材料を準備する
次に、カレーの材料を準備します。ここで使う材料を ingredients
という名前のオブジェクト(たくさんの物をまとめた箱のようなもの)にまとめています。
const ingredients = { 玉ねぎ: "みじん切り", にんじん: "乱切り", じゃがいも: "一口大にカット", 鶏肉: "一口大にカット", にんにく: "すりおろし", しょうが: "すりおろし", };
例えば、「玉ねぎ」は「みじん切り」にしておく、といった風に、準備方法も一緒に書かれています。
3. スパイスの準備
次に、使うスパイスをリストにして準備しています。
const spices = [ "カレーパウダー", "ガラムマサラ", "クミンシード", "コリアンダーパウダー", "ターメリック", "チリパウダー", "カルダモン", "クローブ", "シナモン", "フェヌグリーク" ];
これらはカレーを特別な味にするためのスパイスです。
4. カレー作りの手順を書く
カレー作りの各手順をリストにして、順番に行います。
let steps = [];
まずは空っぽのリスト(手順を入れる箱)を steps
として作ります。そして、材料の準備から始めて、順番に手順をリストに追加していきます。
材料の準備
Object.entries(ingredients).forEach(([ingredient, preparation]) => { steps.push(${ingredient}を${preparation}にする); });
これは、各材料(ingredient
)をどのように準備するか(preparation
)をリストに入れています。例えば「玉ねぎをみじん切りにする」といった感じです。
他の手順も追加
次のステップではスパイスを使ったり、材料を炒めたりする手順を書いています。
steps.push("フライパンでクミンシードを乾煎りして香りを引き出す");
これは「クミンシードというスパイスを炒めて香りを引き出す」という手順です。他にもたくさんの手順を順番に追加しています。例えば、
「玉ねぎを炒める」
「にんにくとしょうがを加える」
「鶏肉や野菜を加える」
「スパイスを全部加える」
spices.forEach((spice) => { steps.push(`${spice}を加える`); });
「水を加えて煮込む」
などの手順を全部リストに入れています。
5. 手順を表示する
最後に、全ての手順を順番に実行して表示します。
steps.forEach((step, index) => { console.log(ステップ${index + 1}: ${step}); });
steps
リストの中身をひとつずつ取り出して、「ステップ1」「ステップ2」といった感じで順番に表示します。
6. カレー完成のメッセージ
console.log("本格カレーが完成しました!おいしいカレーを召し上がれ!");
最後に「本格カレーが完成しました!」というメッセージを表示します。
7. カレーを返す
関数 makeDetailedCurry
は最後に「本格カレー」という文字を返します。これは、このカレーを他の関数で使うためです。
return "本格カレー";
8. スプーンを添える関数:serveWithSpoon
次に、カレーにスプーンを添えるための関数があります。この関数の名前は serveWithSpoon
です。
const serveWithSpoon = (dish) => { console.log(${dish}にスプーンを添えて、いただきましょう!); };
この関数は、「dish
(料理)」にスプーンを添える、というメッセージを表示します。
9. カレーを作ってスプーンを添える
最後に、カレーを作り、そのカレーにスプーンを添えます。
const curry = makeDetailedCurry(); serveWithSpoon(curry);
まず makeDetailedCurry()
でカレーを作って、その結果を curry
という名前に入れます。そのあとで serveWithSpoon(curry)
で、作ったカレーにスプーンを添えるメッセージを表示しています。
まとめ
いかがでしたか?makeDetailedCurry
関数でカレーを作り、serveWithSpoon
関数でスプーンを添えることで、本格カレーができました。カレー作りだとJavaScriptでの処理の流れをより具体的に理解できたのではないでしょうか。私ももっとコードに関する理解を深めていきたいなと思いました。
採用拡大中!
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています!
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう!
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/