Geek Snipe

アイスクリームを作りながらコールバック、プロミス、Async/Awaitを学ぼう 🍧🍨🍦

今日はアイスクリーム屋さんを開いて、非同期JSを学んでいきます。途中で、次の使い方を理解します。

  • コールバック

  • プロミス

  • Async / Await

  • 非同期JavaScriptって何？

  • 同期と非同期JavaScriptの違い

  • コールバック

  • プロミス

  • Async / Await

  • まとめ

YouTubeでもこのチュートリアルを見ることができますよ

プロジェクトを効率的に作りたいなら、これはあなたのためのものです。

非同期javascriptの理論はあなたが複雑で大きなプロジェクトを小さなタスクに分割するのを助けます。

そして、この3つのテクニックのいずれか (コールバック、プロミス、またはAsync/await) を使って、小さなタスクを走らせ、最終結果を得ます。

さあ、始めましょう！

同期システム

このシステムでは、タスクは1つずつ完了します。

これは、10個のタスクを1つの手で達成するようなものです。なので、1つのタスクを一度に完了させる必要があります。

GIFを見てください 👇

あなたは、1枚目の画像が完全に読み込まれるまで、2番目の画像が読み込まれないことに気づくでしょう。

注釈：

デフォルトでは、JavaScriptは同期的で [シングルスレッド] です。これを、1つのスレッドは1つの手だと考えてください。

非同期システム

このシステムでは、タスクは独立して完了します。

ここでは、10個のタスクに10本の手が与えられると想像してください。つまり、それぞれの手は独立してタスクをこなすことができます。

GIFを見てください 👇

あなたは、すべての画像が自分のペースで読み込まれていることに気づくでしょう。誰も誰を待っているわけではありません。

まとめると -

3枚の画像がマラソンで走るとき、->

  • 同期：3枚の画像は同じレーン上にいます。他を抜くことは許されていません。レースは一つ一つ終わります。3番目の画像が停止すると、みんなが止まります。

  • 非同期： 3枚の画像は異なるレーン上にいます。それらは自分のペースでレースを終えます。誰も待たない。

例

開始する前に、例を見て疑問を解消しましょう。

同期

同期システムをテストするために、JavaScriptにこれを書いてください。

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

フルスクリーンモード エンターフルスクリーンモード

コンソール上の結果 👇

非同期

アイスクリームを食べるのに2秒かかるとしましょう。
さて、非同期システムをテストしましょう、JavaScriptにこれを書いてください。

注釈: setTimeout()関数については、この記事で後ほど説明します。

console.log("I");

// これは2秒後に表示される

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

フルスクリーンモード エンターフルスクリーンモード

コンソール上の結果 👇

セットアップ

  • このプロジェクトには、Codepen.ioを開いてコーディングを始めることができます。また、VSコード上でも行うことができます。

  • JavaScriptセクションを開く

  • 完了したら、デベロッパーコンソールウィンドウを開きます。コードを書いて結果をコンソールで確認しましょう。

関数の中に別の関数を引数としてネストすることをコールバックと言います。

イラストのコールバック ->

注釈 : 安心してください、例はこれから来ます。

なぜ私たちはコールバックを使うのか？

複雑なタスクを行うときに、そのタスクを小さなステップに分割します。これらのステップ間の関係を時間（任意）と順序に従って確立するために、コールバックを使用します。

これを見てください 👇

これらはアイスクリームを作るために必要な小さなステップです。そして、ステップの順序とタイミングが重要です。果物を切ってすぐにアイスクリームを出すことはできません。

同時に、前のステップが完了しないと、次のステップに進むことはできません。

もっと詳しく説明するために、アイスクリーム屋を開始しましょう

でも待ってください....

私たちは2つの側面を持つことになります。

  • ストアルームには材料があります[バックエンド]
  • 私たちはキッチンでアイスクリームを生産します[フロントエンド]

データをストアしましょう

さて、オブジェクトの中に材料を保存しましょう。始めましょう！

オブジェクトの中に材料を保存する 像这样 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

フルスクリーンモード エンターフルスクリーンモード

私たちの他の材料はこちら 👇

JavaScriptオブジェクトにこれらを格納する 像这样 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

フルスクリーンモード エンターフルスクリーンモード

すべてのビジネスはお客様の注文順にかかっています。次に、生産が始まり、アイスクリームを提供します。したがって、2つの関数を作成しましょう。

  • order
  • production

イラストを見てください 👇

私たちの関数を作りましょう。

注釈 : 矢印関数を使います。

let order = () =>{};

let production = () =>{};

フルスクリーンモード エンターフルスクリーンモード

さて、これらの2つの関数間の関係をコールバックを使って確立しましょう。これを見てください 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

フルスクリーンモード エンターフルスクリーンモード

小さなテストをしましょう

console.log()関数を使ってテストを行い、2つの関数間の関係がどのように確立されたかについての疑問を解消しましょう。

let order = (call_production) =>{

console.log("Order placed. Please call production")

// 👇が呼ばれる関数
  call_production();
};

let production = () =>{

console.log("Production has started")

};

フルスクリーンモード エンターフルスクリーンモード

テストを実行するために、order関数を呼び出す必要があります。そして、2番目の関数であるproductionをその引数として配置します。

// 私たちの2番目の機能の名前 👇
order(production);

フルスクリーンモード エンターフルスクリーンモード

コンソール上の結果 👇

ちょっと休憩しましょう

今のところ順調です、休憩を取ってください！

console.logをクリアしましょう

このコードを保持して、すべてを削除してください[stocks変数を削除しないでください]。最初の関数で別の引数を渡して、注文[果物の名前]を受け取ることができるようにしましょう。

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

フルスクリーンモード エンターフルスクリーンモード

これが私たちのステップと、各ステップが実行するのにかかる時間です。

タイミングを確立するために、関数setTimeout()は、引数として関数を取るコールバックも使用するので、非常に優れています。

今、果物を選びましょう。

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// 注文を置いてください。開始するために製造を呼び出す
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // 現在は空
};

// Trigger 👇
order(0, production);

フルスクリーンモード エンターフルスクリーンモード

コンソール上の結果 👇

注釈: 結果が2秒後に表示されます。

stocks変数からイチゴをどのように選んだか疑問に思っている場合。フォーマット付きのコードはこちらです 👇

何も削除せずに、今私たちの生産機能に書き始めてください。
これらを書いてください 👇

注釈: 矢印関数を使用します。

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

フルスクリーンモード エンターフルスクリーンモード

結果 👇

私たちの既存のsetTimeout関数にもう一つsetTimeout関数をネストして、果物を切るようにしましょう。このように 👇

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

フルスクリーンモード エンターフルスクリーンモード

結果 👇

覚えていますか、これが私たちのステップのリストです。

関数を別の関数の中にネストすることを[コールバックとも呼ばれます]を使って、アイスクリーム生産を完成させましょう。

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

フルスクリーンモード エンターフルスクリーンモード

コンソール上の結果 👇

混乱していますか？

これはコールバック地獄と呼ばれています。こんな感じです 👇

この問題の解決策は何でしょうか？

これはコールバック地獄問題を解決するために発明され、私たちのタスクをより適切に扱うためのものです。

でもまず、休憩を取ってください！

これがプロミスがどのように見えるかです。

一緒にプロミスを分解しましょう！

プロミスの3つの状態は次のとおりです。

  • ペンディング: これは初期段階です。ここでは何も起こりません。注文をするのに時間をかけているお客様のように考えてみてください。でも何も注文していません。

  • 解決: これはお客様が食事を受け取り、満足していることを意味します。

  • 拒否: これはお客様が注文を受け取らずにレストランを去ったことを意味します。

アイスクリーム生産にプロミスを取り入れましょう。

でもちょっと待ってください......

私たちはもう4つのことを理解する必要があります ->

  • 時間と仕事の関係
  • プロミスチェーン
  • エラー処理
  • .finallyハンドラ

小さなステップで一つずつ、アイスクリーム屋を始めてそれぞれ理解していきましょう。

時間と仕事の関係

覚えていますか、これがアイスクリームを作るための私たちのステップと、各ステップにかかる時間です。

これを実現するために、JavaScriptの変数を作成しましょう 👇

let is_shop_open = true;

フルスクリーンモード エンターフルスクリーンモード

今度は

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/joyshaheb/learn-callbacks-promises-async-await-by-making-ice-cream-4n76

タグ

javascriptに関連する記事
codenewbieに関連する記事
webdevに関連する記事
beginnersに関連する記事

最新の記事

画像
#failure#digitalocean#kubernetes
Digital OceanのKubernetesチャレンジに失敗
画像
#devops#cybersecurity#infosec#devsecops
ソフトウェア構成分析の実行方法
画像
#svelte#sveltekit#tailwindcss#webdev
TailwindCSSをSvelteKitで使う方法
画像
#javascript#webdev#programming
JavaScriptの「Strict Mode」とは？
画像
#webdev#programming#opensource#architecture
ECサイト内検索を最適化する8つのコツ
画像
#twitter#api#discuss
TwitterのAPI利用に2月9日から課金開始
画像
#javascript#tutorial#node#productivity
自分のCRMをNotionとHazel Baseで自動化する
画像
#owasp#appsec#cryptographic
OWASPトップ2 "暗号的な失敗"を開発者に説明する
画像
#flutter#frontend#beginners#abotwrotethis
Flutterフロントエンド開発者のための要点