小学生でもわかるasync/await/Promise入門【JavaScript講座】

JavaScriptの非同期処理を小学生でもわかるように噛み砕いて解説しました！
山浦清透のプログラミング講座・エンジニアキャリア情報のKZbinチャンネルです。
よろしくお願いします^ ^
■独学で自走できるエンジニアになるためのプログラミング学習サービス
dokugaku-engineer.com/
■UdemyでAWSやGitの入門講座を販売中
linktr.ee/yamaura
■プロフィール
山浦 清透（やまうらきよと）
Web系エンジニア
1987年生まれ、福岡県出身。京都大学大学院卒。
2014年に未経験からエンジニアに転向し、既存サービスの運営、新規事業の立ち上げ等を経験。プログラミングの修得に四苦八苦してきた経験から、開発現場で使えるエンジニアリング知識を発信。Udemy受講者数6万人。

[@hakka2314]

本当に分かりやすいです！これまで読んだり聞いたりした非同期の解説の中で最も分かりやすくて、ずっと残っていて欲しい動画です…！

[@Hbao863]

めっちゃ分かりやすい。あなたこそが救世主です。

[@yosu6358]

今までのasync/await/Promiseの解説動画の中でこの動画が一番でわかりすい

[@hanco6362]

小学生はどうか分からんけど、今まで見た中で一番分かりやすかったっ！

[@guiya8496]

今までで一番わかりやすいですねぇ

[@manapecar2109]

初心者にも分かりやすく解説されていて、本当に助かります！この動画何度も見に来てます!

[@DeaDenDfromNRC]

歴史を振り返りながらの解説、とてもわかりやすかったです。素晴らしい解説でした。

[@Mr-ej6cu]

とても分かりやすかったです。時代背景が分かると理解しやすいですね。

[@aya2222]

昨日からいろんな動画みたり色々調べたりしてたけど、この動画で概要がつかめました。ありがとうございます！

[@madedamayanti1230]

私は日本人じゃなくて、コードも勉強始めたばかりなんでが、この説明はめっちゃ分かりやすいです！ありがとうございます！ 前はずっと混乱して、今分かってなってきた！

[@KiyotoUniv]

よかったですー！

[@user-gi1yh5lz2t]

わかりやすかったです！

[@kazumachihaya337]

今までなんとなくで使っていたのですが、この動画を見て完全に理解できました！！

[@kuro0315]

めちゃくちゃわかりやすい

[@FantaLABRA335]

async/awaitとPromiseの関係性がよくわかりました！ 歴史を交えた説明があると、「なぜこの仕様になったのか？」がとっても理解しやすいです！

[@KiyotoUniv]

良かったです！技術には誕生した背景があるので、そこから学ぶと理解しやすいですよね😊

[@Yamazae]

非同期処理という言葉しか聞いたこと無かったけど、めちゃくちゃ分かりやすかった。歴史って大事だと感じた。

[@user-vv9ik7xs4k]

今まで観た動画の中で1番わかりやすかった！素晴らしい動画

[@carphirosima4362]

苦戦していた非同期処理がやっとわかりました。感謝しきれません⭐ありがとう御座いました😃

[@taka005]

説明がわかりやすくて、面白かったです。

[@ykou]

初心者に分かりやすくて助かりますー

[@ExisVR]

本とか公式ドキュメントを全部読んで覚えてたのに、結局これ微妙に複雑で記憶に定着せず、割とすぐ忘れてしまってはまた覚え直してもすぐ忘れちゃうので、学習効率をなんとかしたいなと思っていました。 この動画は記憶にも定着しやすそうでわかりやすくて復習にとても便利でした。 本当に感謝です！🥷

[@user-tf8px9qt8g]

まじでわかりやすい！ありがとうございます！！😊

[@cameronjp7866]

説明が面白く、分かりやすかったです。ありがとうございます

[@user-vv8qu5oi9d]

非常にわかりやすかったです。ありがとう

[@user-iz3dx8ci3q]

これを理解できる小学生がいましたらマジで尊敬しますわ😅😅😅

[@user-fh3yr3kp4e]

async/awaitとPromiseの関係が今までで一番わかりやすくて勉強になりました！！ありがとうございました！！

[@sasamaru0322]

ありがとうございます 歴史的観点から説明頂けたから、とても理解しやすかったです

[@qwevo1]

Muchas gracias por la ayuda sensei, pude comprender de mejor manera. Saludos desde Tabasco, México!

[@TheinfinityLight]

Apenas y las entiendo en mi idioma. Che algoritmo de youtube ahora me las recomienda en japones Jajajaja

[@Joker-gj3cc]

とてもわかりやすかったです！！小学生でもわかります。

[@morinosuke]

最近は、フロントもバックもjavascriptが多くなってきているようなので、こういうお話しは助かります！

[@funsaigyokusai08]

めっっっっっっっっっっっちゃわかりやすい

[@itsumo5656]

いつもながら軽快な説明と分かってもらおうする気持ちが全面に出ていてこちらにも伝わってきます。もし予備校の講師であれば人気の先生となるでしょう。内容も日頃知りたいと思う内容がおおいです。こんごもよろしくです。

[@user-to6js8ry1j]

わかりやすかったです

[@user-cc5ht5zi2m]

この動画が無料で見れるなんて信じられません😂 非常に分かりやすかったです！

[@javacjapan]

説明を分かりやすくすると正確性が阻害されることが多いけど、これは正確かつ分かりやすいので文句無しにスゴイ。 コールバック地獄の状態で複雑な分岐がある処理に正しくエラーハンドリングや、エラー時の繰り返しリトライ制御とか入れようとするとマジで死ねる。

[@NanayaMiki]

ありがたい！

[@mitsuichi9230]

めっちゃわかった　感謝です

[@nateha727]

10:26 人類『普通に書きたーい！』で草 そうだよね、普通に書きたいよね、普通にかけるようになってよかったねぇ

[@polymetisoutis]

本当に分かり易いです🫶‼ 例示されたソースコードがこれまで読み耽ってきた解説の類に纏まりを持たせてくれました！！ありがとうございます！！

[@Pikamot_ピカちゃんねる]

小学生でjavascript勉強してるけどとても分かりやすかったです!

[@user-ub8yp6zf5u]

小学生のうちに非同期処理に興味持ち始めたい人生だった

[@hakusai3325]

3:42 先に画面だけ表示して、後からデータを持ってくる。 関数の引数が関数 5:43 待ち状態 完了した状態 完了した時の値をthenで繋げて、次の処理に渡せる。 10:37 関数に対してasyncを付ける＝非同期関数　 関数の呼び出しの前にawitを付けるとpromiseの結果が返ってくるまで（resolveされるまで）待ってくれる。　 log関数がpromiseを返してくれる thenを使わなくてもいい

[@KiwamuOkabe]

コールバック地獄まではこのスピードで理解できたのですがPromiseから速度が上って理解が辛かったです。

[@rararaundoudb]

鬼わかったし、めっちゃ便利やん、すげー

[@yusukem]

小学生じゃないですが、分りやすかったです！ コードの開発の歴史からたどるのは、作った人の意図をくみ取れて、 凄く分りやすく、勉強にもなります！！！！

[@user-jy8zn4kq7p]

C#のタスクやasync/awaitの時代の流れとかも、色々発展しましたよね。

[@user-qu3tz2qy3g]

非同期処理を同期処理として動かすのがasync awaitなんですね！

[@jaguar_imo3866]

とてもわかりやすいですし、テンポも聴きやすいです！ 顔を振るたびに音が近くに行ったり遠くに行ったりするのが少し聞きづらく感じたので、ピンマイクなどを導入しても良いかもと思いました！

[@user-tg3td8ru5s]

最高です。こういう基本を解説してくれるの本当にありがたいです。非同期はasync/awaitで書いていて、たまにPromiseやコールバック関数がでてきてジェネリック型を使用したりと理解が複雑になっていました。今まで非同期関数の直列処理がasync/awaitで並列処理がPromiseと思っていましたが、こういった歴史的背景があったんですね。

[@NGotoh-wg7bo]

そごいチャレンジ精神。さすがですね。

[@KiyotoUniv]

コードの字が後半小さくて読みにくいので、今回実行したコードをアップしました！ gist.github.com/kiyodori/94cdab994e2925a0ac2477eb02ff75d7

[@willywonka6697]

非常にわかりやすかったです！ありがとうございました。 質問です。Can I useでasync/await, Promiseを調べると、IE11では対応していないようなのですが、IEでも非同期処理を実現したい場合は、コールバック地獄と向き合わざるを得ないということになるのでしょうか？

[@KiyotoUniv]

抜け道的な方法があります！ [TypeScript]IE11でも手軽に動くawait/async qiita.com/SoraKumo/items/9ab9382419e78dea9b98

[@tadakuniyasuda8214]

わかりやすいです。ありがとうございます。ただし、実際にasync/await を使用するために、練習が必要です。どこで練習できますか？

[@user-zs5sr6yo8c]

asyncってエイシンクと読むと思っていました

[@kakkoiinippon]

🇯🇵🇯🇵🇯🇵説明もいいし、演技もあっていいですね。令和五年

[@user-ou3fe1sr4x]

僕も現在開発で使っていますが既存の処理を真似したりしてちゃんとわかってないのです！この解説動画はかなりありがたいです！！

[@basil_283]

25歳の小学生なので助かりました。

[@yukisakuma6230]

使えるだけじゃなく、ここまで説明できるまで理解深めないとな！頑張ろう！！！

[@yamat0jp]

さいこう〜

[@vstar8659]

なるほど、わかりました(>_

[@sakana482]

止めて見るとき手がかぶって邪魔だから指し棒とかでお願いできませんか

[@Sofia_-Grant]

*【質問】* async自体がPromiseインスタンスを返すなら、10:45にあるPromiseを返す関数をasyncに変えることも可能かと思い下記を実行しましたが、1,2,3が同時に出力されてしまいました。。。これはasyncを実行した時点で即座にfulfilledが返されるからという認識であっていますかね..? func = async () => { await log(1); await log(2); await log(3); }; log = async (num) => { setTimeout(function () { return console.log(num); }, 1000); } func();

[@shinhashi2057]

動画を見てスッキリしました　よく分かりました。ありがとうございます😊

[@okojo_MK]

4:17 ｸﾚﾊﾞｰ!!の勢い好きｗｗｗ

[@paseri9697]

playwrightでドツボにはまっています

[@user-wn8gz4ei8k]

async/awaitまでの変遷が分かりやすかったです！ 途中の「コールバックじごーく」などはいらなかったかな笑

[@jp-kq9xb]

中学生には理解できました

[@ababaroid6083]

最近はJavaScript触ってないけど分かりやすかったと思います けど小学生は無理じゃないかな・・・ まだ知っている事を前提とする単語がいっぱい出てきていたので

[@te5222]

アラサーでもわかりました

[@yoshi8171]

寸劇風、お気に入りですね！笑

[@KiyotoUniv]

Yoshiさん、僕なりの試行錯誤です笑。 難しい内容もできる限り分かりやすく、あとできれば面白く伝えたいと思っていて、それで寸劇風にチャレンジしては、なんか違うと思っては普通のスタイルに戻し、でもやっぱり面白くしようと寸劇風にチャレンジしてはを繰り返してます笑

[@falconno6554]

C言語から始めたので非同期処理自体はなんとなくわかっている(つもり)だったのですが、JavaScriptでPromiseやasync/awaitってのがよくわからなかったですね… やっとわかるようになりましたが

[@TY-dn6mj]

ところどころ変なテンションで話さなければすごくわかりやすいです。

[@shinichirouikebe2911]

前より上手く書けるかもしれない

[@nyarbuncle]

RとPy使ってデータ収集してる小学六年生でもわかりやすいって言ってたよ先生。

[@yayuyo7188]

await 演算子以下に記述されたコードの実行も待つということでいいですかね? 例えば func = async () => { await log(3); console.log("done"); ... としたらconsole.logの部分もlog(3)が実行される(resolveが返る)までは実行されないと

[@frisk_seed]

10:57 thenメソッド内でreturnするとその値でresolve した状態の新しいPromiseオブジェクトを返すから、thenメソッド内でnew Promiseをして新しいオブジェクトを作る必要はないと思うんだけど違ったっけ？ 書いても動くけどそんな面倒なことをしなくてもいいのがPromiseチェーンのいいところだった気が…

[@nish5922]

0:00 導入 2:40 本編開始

[@davidaxelgonzalezflores3536]

A comment in english!

[@user-xl8mr6dr7c]

小学生おじさんでもわかったよ！

[@soshina3]

12:03

[@NS-qq6nr]

内容はすごく勉強になりましたが、言い方（途中のよく分からないキャラの喋り方）が生理的に受けつけず10分で我慢できなくなり脱落しました。

[@user-zm3es7zi2d]

すごく分かります。

[@sanko4198]

なんでコールバックだとバックグラウンドで走るのかがわかりません

[@mouushida9025]

某偉人系の解説口調になって笑いました。( ´艸｀)

[@azeru1210]

jsのは知らんけども、async/awitは基本的にケツを蹴る順番を定義してるだけになるはず🤔

[@godzillaking8358]

関数の読み方ちゃうって要あるよな

[@thiaresaez]

Sí

[@kotaro4734]

非同期処理にasync/awaitを付けて、わざわざ普通の同期処理にしてるんですよね。 それなら最初から同期処理をデフォにして、非同期処理したいときだけasyncを付けるとか、 そんな仕様にしてほしいですわJavaScriptさん。

[@FizmimiFiz]

ヒヨコ＜パラダイスみてーな国が作りてえ

[@ken-vh2fp]

寸劇は素人には難しいので、デジタルで演出するのが良いと思います。内容は素晴らしいです。

[@animelife5166]

説明わかりやすいだけに、時々入る謎の芝居が残念です... 普通に喋ってくれたら最高でした

[@user-ko7ls7fe9z]

こういう人が職場にいたらなぁ

[@xign17]

小学生には理解できないとおもう。小生には理解できましたけど

[@groundzero6175]

アシンクではなくエイシンクな気がする

[@metboos506]

今の小学生は本当に賢いな～　ｵｼﾞｻﾝ(;´д｀)ﾄﾎﾎ

[@maild3pmaild]

中指で指す人意外と多い

[@user-xn2ju3gf6v]

めちゃくちゃ分かりやすいのに文句言ってる人はろくに勉強してないんだろうな笑

[@Yoran91]

いきなり消費者金融出てきた

[@user-od2uo9dd8v]

声と顔がどことなく西島隆弘に似てる

[@user-hm9tf1bv9d]

アロー関数に慣れん。 そこから教えれ！

[@misogi]

「アシンク」が気になりました(小並感)

[@yuuttana1223]

言い方が笑

[@KiyotoUniv]

悩んだ末よく分からなくなってああいう言い方に着地しました笑