Тёмный

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

だれでもエンジニア / 山浦清透
Подписаться 118 тыс.
Просмотров 75 тыс.
50% 1

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

Опубликовано:

 

16 фев 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 123   
@hanco6362
@hanco6362 3 года назад
小学生はどうか分からんけど、今まで見た中で一番分かりやすかったっ!
@hakka2314
@hakka2314 Год назад
本当に分かりやすいです!これまで読んだり聞いたりした非同期の解説の中で最も分かりやすくて、ずっと残っていて欲しい動画です…!
@yosu6358
@yosu6358 3 года назад
今までのasync/await/Promiseの解説動画の中でこの動画が一番でわかりすい
@Hbao863
@Hbao863 3 года назад
めっちゃ分かりやすい。あなたこそが救世主です。
@DeaDenDfromNRC
@DeaDenDfromNRC Год назад
歴史を振り返りながらの解説、とてもわかりやすかったです。素晴らしい解説でした。
@manapecar2109
@manapecar2109 Год назад
初心者にも分かりやすく解説されていて、本当に助かります!この動画何度も見に来てます!
@user-vv9ik7xs4k
@user-vv9ik7xs4k 8 месяцев назад
今まで観た動画の中で1番わかりやすかった!素晴らしい動画
@aya2222
@aya2222 3 года назад
昨日からいろんな動画みたり色々調べたりしてたけど、この動画で概要がつかめました。ありがとうございます!
@carphirosima4362
@carphirosima4362 Год назад
苦戦していた非同期処理がやっとわかりました。感謝しきれません⭐ありがとう御座いました😃
@guiya8496
@guiya8496 3 года назад
今までで一番わかりやすいですねぇ
@Mr-ej6cu
@Mr-ej6cu 3 года назад
とても分かりやすかったです。時代背景が分かると理解しやすいですね。
@kazumachihaya337
@kazumachihaya337 3 года назад
今までなんとなくで使っていたのですが、この動画を見て完全に理解できました!!
@taka005
@taka005 2 года назад
説明がわかりやすくて、面白かったです。
@madedamayanti1230
@madedamayanti1230 3 года назад
私は日本人じゃなくて、コードも勉強始めたばかりなんでが、この説明はめっちゃ分かりやすいです!ありがとうございます! 前はずっと混乱して、今分かってなってきた!
@KiyotoUniv
@KiyotoUniv 3 года назад
よかったですー!
@cameronjp7866
@cameronjp7866 Год назад
説明が面白く、分かりやすかったです。ありがとうございます
@Joker-gj3cc
@Joker-gj3cc Год назад
とてもわかりやすかったです!!小学生でもわかります。
@user-tf8px9qt8g
@user-tf8px9qt8g Год назад
まじでわかりやすい!ありがとうございます!!😊
@sasamaru0322
@sasamaru0322 8 месяцев назад
ありがとうございます 歴史的観点から説明頂けたから、とても理解しやすかったです
@ykou
@ykou 3 года назад
初心者に分かりやすくて助かりますー
@user-fh3yr3kp4e
@user-fh3yr3kp4e 5 месяцев назад
async/awaitとPromiseの関係が今までで一番わかりやすくて勉強になりました!!ありがとうございました!!
@FantaLABRA335
@FantaLABRA335 3 года назад
async/awaitとPromiseの関係性がよくわかりました! 歴史を交えた説明があると、「なぜこの仕様になったのか?」がとっても理解しやすいです!
@KiyotoUniv
@KiyotoUniv 3 года назад
良かったです!技術には誕生した背景があるので、そこから学ぶと理解しやすいですよね😊
@user-gi1yh5lz2t
@user-gi1yh5lz2t 3 года назад
わかりやすかったです!
@Yamazae
@Yamazae 3 года назад
非同期処理という言葉しか聞いたこと無かったけど、めちゃくちゃ分かりやすかった。歴史って大事だと感じた。
@user-iz3dx8ci3q
@user-iz3dx8ci3q 2 года назад
これを理解できる小学生がいましたらマジで尊敬しますわ😅😅😅
@user-vv8qu5oi9d
@user-vv8qu5oi9d Год назад
非常にわかりやすかったです。ありがとう
@kuro0315
@kuro0315 3 года назад
めちゃくちゃわかりやすい
@polymetisoutis
@polymetisoutis 6 месяцев назад
本当に分かり易いです🫶‼ 例示されたソースコードがこれまで読み耽ってきた解説の類に纏まりを持たせてくれました!!ありがとうございます!!
@itsumo5656
@itsumo5656 Год назад
いつもながら軽快な説明と分かってもらおうする気持ちが全面に出ていてこちらにも伝わってきます。もし予備校の講師であれば人気の先生となるでしょう。内容も日頃知りたいと思う内容がおおいです。こんごもよろしくです。
@morinosuke
@morinosuke 3 года назад
最近は、フロントもバックもjavascriptが多くなってきているようなので、こういうお話しは助かります!
@ExisVR
@ExisVR Год назад
本とか公式ドキュメントを全部読んで覚えてたのに、結局これ微妙に複雑で記憶に定着せず、割とすぐ忘れてしまってはまた覚え直してもすぐ忘れちゃうので、学習効率をなんとかしたいなと思っていました。 この動画は記憶にも定着しやすそうでわかりやすくて復習にとても便利でした。 本当に感謝です!🥷
@user-cc5ht5zi2m
@user-cc5ht5zi2m 8 месяцев назад
この動画が無料で見れるなんて信じられません😂 非常に分かりやすかったです!
@qwevo1
@qwevo1 3 года назад
Muchas gracias por la ayuda sensei, pude comprender de mejor manera. Saludos desde Tabasco, México!
@TheinfinityLight
@TheinfinityLight 3 года назад
Apenas y las entiendo en mi idioma. Che algoritmo de youtube ahora me las recomienda en japones Jajajaja
@pikamot9252
@pikamot9252 Год назад
小学生でjavascript勉強してるけどとても分かりやすかったです!
@KiyotoUniv
@KiyotoUniv 3 года назад
コードの字が後半小さくて読みにくいので、今回実行したコードをアップしました! gist.github.com/kiyodori/94cdab994e2925a0ac2477eb02ff75d7
@user-to6js8ry1j
@user-to6js8ry1j 5 месяцев назад
わかりやすかったです
@funsaigyokusai08
@funsaigyokusai08 3 года назад
めっっっっっっっっっっっちゃわかりやすい
@nateha727
@nateha727 2 года назад
10:26 人類『普通に書きたーい!』で草 そうだよね、普通に書きたいよね、普通にかけるようになってよかったねぇ
@javacjapan
@javacjapan 2 года назад
説明を分かりやすくすると正確性が阻害されることが多いけど、これは正確かつ分かりやすいので文句無しにスゴイ。 コールバック地獄の状態で複雑な分岐がある処理に正しくエラーハンドリングや、エラー時の繰り返しリトライ制御とか入れようとするとマジで死ねる。
@user-tg3td8ru5s
@user-tg3td8ru5s 26 дней назад
最高です。こういう基本を解説してくれるの本当にありがたいです。非同期はasync/awaitで書いていて、たまにPromiseやコールバック関数がでてきてジェネリック型を使用したりと理解が複雑になっていました。今まで非同期関数の直列処理がasync/awaitで並列処理がPromiseと思っていましたが、こういった歴史的背景があったんですね。
@user-ou3fe1sr4x
@user-ou3fe1sr4x 6 месяцев назад
僕も現在開発で使っていますが既存の処理を真似したりしてちゃんとわかってないのです!この解説動画はかなりありがたいです!!
@mitsuichi9230
@mitsuichi9230 2 года назад
めっちゃわかった 感謝です
@KiwamuOkabe
@KiwamuOkabe 3 года назад
コールバック地獄まではこのスピードで理解できたのですがPromiseから速度が上って理解が辛かったです。
@NanayaMiki
@NanayaMiki 2 года назад
ありがたい!
@basil_283
@basil_283 2 месяца назад
25歳の小学生なので助かりました。
@user-ub8yp6zf5u
@user-ub8yp6zf5u 3 года назад
小学生のうちに非同期処理に興味持ち始めたい人生だった
@user-qu3tz2qy3g
@user-qu3tz2qy3g 2 года назад
非同期処理を同期処理として動かすのがasync awaitなんですね!
@yusukem
@yusukem 3 года назад
小学生じゃないですが、分りやすかったです! コードの開発の歴史からたどるのは、作った人の意図をくみ取れて、 凄く分りやすく、勉強にもなります!!!!
@jaguar_imo3866
@jaguar_imo3866 3 года назад
とてもわかりやすいですし、テンポも聴きやすいです! 顔を振るたびに音が近くに行ったり遠くに行ったりするのが少し聞きづらく感じたので、ピンマイクなどを導入しても良いかもと思いました!
@rararaundoudb
@rararaundoudb 3 года назад
鬼わかったし、めっちゃ便利やん、すげー
@user-jy8zn4kq7p
@user-jy8zn4kq7p 3 года назад
C#のタスクやasync/awaitの時代の流れとかも、色々発展しましたよね。
@NGotoh-wg7bo
@NGotoh-wg7bo Год назад
そごいチャレンジ精神。さすがですね。
@hakusai3325
@hakusai3325 Год назад
3:42 先に画面だけ表示して、後からデータを持ってくる。 関数の引数が関数 5:43 待ち状態 完了した状態 完了した時の値をthenで繋げて、次の処理に渡せる。 10:37 関数に対してasyncを付ける=非同期関数  関数の呼び出しの前にawitを付けるとpromiseの結果が返ってくるまで(resolveされるまで)待ってくれる。  log関数がpromiseを返してくれる thenを使わなくてもいい
@tadakuniyasuda8214
@tadakuniyasuda8214 3 года назад
わかりやすいです。ありがとうございます。ただし、実際にasync/await を使用するために、練習が必要です。どこで練習できますか?
@user-wn8gz4ei8k
@user-wn8gz4ei8k Год назад
async/awaitまでの変遷が分かりやすかったです! 途中の「コールバックじごーく」などはいらなかったかな笑
@user-zs5sr6yo8c
@user-zs5sr6yo8c 3 года назад
asyncってエイシンクと読むと思っていました
@willywonka6697
@willywonka6697 3 года назад
非常にわかりやすかったです!ありがとうございました。 質問です。Can I useでasync/await, Promiseを調べると、IE11では対応していないようなのですが、IEでも非同期処理を実現したい場合は、コールバック地獄と向き合わざるを得ないということになるのでしょうか?
@KiyotoUniv
@KiyotoUniv 3 года назад
抜け道的な方法があります! [TypeScript]IE11でも手軽に動くawait/async qiita.com/SoraKumo/items/9ab9382419e78dea9b98
@kakkoiinippon
@kakkoiinippon Год назад
🇯🇵🇯🇵🇯🇵説明もいいし、演技もあっていいですね。令和五年
@Sofia_-Grant
@Sofia_-Grant 2 года назад
*【質問】* 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();
@okojo_MK
@okojo_MK 5 месяцев назад
4:17 クレバー!!の勢い好きwww
@falconno6554
@falconno6554 Год назад
C言語から始めたので非同期処理自体はなんとなくわかっている(つもり)だったのですが、JavaScriptでPromiseやasync/awaitってのがよくわからなかったですね… やっとわかるようになりましたが
@shinhashi2057
@shinhashi2057 3 года назад
動画を見てスッキリしました よく分かりました。ありがとうございます😊
@yukisakuma6230
@yukisakuma6230 3 года назад
使えるだけじゃなく、ここまで説明できるまで理解深めないとな!頑張ろう!!!
@ababaroid6083
@ababaroid6083 3 года назад
最近はJavaScript触ってないけど分かりやすかったと思います けど小学生は無理じゃないかな・・・ まだ知っている事を前提とする単語がいっぱい出てきていたので
@sakana482
@sakana482 3 года назад
止めて見るとき手がかぶって邪魔だから指し棒とかでお願いできませんか
@vstar8659
@vstar8659 3 года назад
なるほど、わかりました(>_
@yamat0jp
@yamat0jp Год назад
さいこう〜
@jp-kq9xb
@jp-kq9xb 2 года назад
中学生には理解できました
@yayuyo7188
@yayuyo7188 3 года назад
await 演算子以下に記述されたコードの実行も待つということでいいですかね? 例えば func = async () => { await log(3); console.log("done"); ... としたらconsole.logの部分もlog(3)が実行される(resolveが返る)までは実行されないと
@paseri9697
@paseri9697 10 месяцев назад
playwrightでドツボにはまっています
@te5222
@te5222 2 года назад
アラサーでもわかりました
@frisk_seed
@frisk_seed 2 года назад
10:57 thenメソッド内でreturnするとその値でresolve した状態の新しいPromiseオブジェクトを返すから、thenメソッド内でnew Promiseをして新しいオブジェクトを作る必要はないと思うんだけど違ったっけ? 書いても動くけどそんな面倒なことをしなくてもいいのがPromiseチェーンのいいところだった気が…
@yoshi8171
@yoshi8171 3 года назад
寸劇風、お気に入りですね!笑
@KiyotoUniv
@KiyotoUniv 3 года назад
Yoshiさん、僕なりの試行錯誤です笑。 難しい内容もできる限り分かりやすく、あとできれば面白く伝えたいと思っていて、それで寸劇風にチャレンジしては、なんか違うと思っては普通のスタイルに戻し、でもやっぱり面白くしようと寸劇風にチャレンジしてはを繰り返してます笑
@nyarbuncle
@nyarbuncle 3 года назад
RとPy使ってデータ収集してる小学六年生でもわかりやすいって言ってたよ先生。
@nish5922
@nish5922 2 года назад
0:00 導入 2:40 本編開始
@shinichirouikebe2911
@shinichirouikebe2911 3 года назад
前より上手く書けるかもしれない
@sanko4198
@sanko4198 24 дня назад
なんでコールバックだとバックグラウンドで走るのかがわかりません
@user-xl8mr6dr7c
@user-xl8mr6dr7c 3 года назад
小学生おじさんでもわかったよ!
@mouushida9025
@mouushida9025 3 года назад
某偉人系の解説口調になって笑いました。( ´艸`)
@NS-qq6nr
@NS-qq6nr 3 года назад
内容はすごく勉強になりましたが、言い方(途中のよく分からないキャラの喋り方)が生理的に受けつけず10分で我慢できなくなり脱落しました。
@user-zm3es7zi2d
@user-zm3es7zi2d 2 года назад
すごく分かります。
@soshina3
@soshina3 3 месяца назад
12:03
@ken-vh2fp
@ken-vh2fp 3 года назад
寸劇は素人には難しいので、デジタルで演出するのが良いと思います。内容は素晴らしいです。
@kotaro4734
@kotaro4734 3 года назад
非同期処理にasync/awaitを付けて、わざわざ普通の同期処理にしてるんですよね。 それなら最初から同期処理をデフォにして、非同期処理したいときだけasyncを付けるとか、 そんな仕様にしてほしいですわJavaScriptさん。
@davidaxelgonzalezflores3536
@davidaxelgonzalezflores3536 3 года назад
A comment in english!
@azeru1210
@azeru1210 3 года назад
jsのは知らんけども、async/awitは基本的にケツを蹴る順番を定義してるだけになるはず🤔
@animelife5166
@animelife5166 Год назад
説明わかりやすいだけに、時々入る謎の芝居が残念です... 普通に喋ってくれたら最高でした
@godzillaking8358
@godzillaking8358 3 года назад
関数の読み方ちゃうって要あるよな
@user-ko7ls7fe9z
@user-ko7ls7fe9z 2 месяца назад
こういう人が職場にいたらなぁ
@FizmimiFiz
@FizmimiFiz 3 года назад
ヒヨコ<パラダイスみてーな国が作りてえ
@metboos506
@metboos506 Год назад
今の小学生は本当に賢いな~ オジサン(;´д`)トホホ
@xign17
@xign17 3 года назад
小学生には理解できないとおもう。小生には理解できましたけど
@thiaresaez
@thiaresaez 3 года назад
@user-xn2ju3gf6v
@user-xn2ju3gf6v 2 года назад
めちゃくちゃ分かりやすいのに文句言ってる人はろくに勉強してないんだろうな笑
@maild3pmaild
@maild3pmaild 2 года назад
中指で指す人意外と多い
@groundzero6175
@groundzero6175 Год назад
アシンクではなくエイシンクな気がする
@Yoran91
@Yoran91 Год назад
いきなり消費者金融出てきた
@user-od2uo9dd8v
@user-od2uo9dd8v 2 года назад
声と顔がどことなく西島隆弘に似てる
@TY-dn6mj
@TY-dn6mj 5 месяцев назад
ところどころ変なテンションで話さなければすごくわかりやすいです。
@user-iq3nj2ez7b
@user-iq3nj2ez7b 3 месяца назад
へんな芝居以外良い
@novacofee
@novacofee Год назад
わかりやすかったけど、小学生には無理だと思う
@misogi
@misogi 3 года назад
「アシンク」が気になりました(小並感)
Далее
小学生でもわかるSQLの基本【SQL講座①】
15:34
УГАДАЙ ГДЕ ПРАВИЛЬНЫЙ ЦВЕТ?😱
00:14