小学生でもわかるasync/await/Promise入門【JavaScript講座】
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- JavaScriptの非同期処理を小学生でもわかるように噛み砕いて解説しました！
山浦清透のプログラミング講座・エンジニアキャリア情報のTH-camチャンネルです。
よろしくお願いします^ ^
■独学で自走できるエンジニアになるためのプログラミング学習サービス
dokugaku-engin...
■UdemyでAWSやGitの入門講座を販売中
linktr.ee/yamaura
■プロフィール
山浦 清透（やまうらきよと）
Web系エンジニア
1987年生まれ、福岡県出身。京都大学大学院卒。
2014年に未経験からエンジニアに転向し、既存サービスの運営、新規事業の立ち上げ等を経験。プログラミングの修得に四苦八苦してきた経験から、開発現場で使えるエンジニアリング知識を発信。Udemy受講者数6万人。
25歳の小学生なので助かりました。
小学生はどうか分からんけど、今まで見た中で一番分かりやすかったっ！
今までのasync/await/Promiseの解説動画の中でこの動画が一番でわかりすい
めっちゃ分かりやすい。あなたこそが救世主です。
本当に分かりやすいです！これまで読んだり聞いたりした非同期の解説の中で最も分かりやすくて、ずっと残っていて欲しい動画です…！
async/awaitとPromiseの関係性がよくわかりました！
歴史を交えた説明があると、「なぜこの仕様になったのか？」がとっても理解しやすいです！
良かったです！技術には誕生した背景があるので、そこから学ぶと理解しやすいですよね😊
最高です。こういう基本を解説してくれるの本当にありがたいです。非同期はasync/awaitで書いていて、たまにPromiseやコールバック関数がでてきてジェネリック型を使用したりと理解が複雑になっていました。今まで非同期関数の直列処理がasync/awaitで並列処理がPromiseと思っていましたが、こういった歴史的背景があったんですね。
苦戦していた非同期処理がやっとわかりました。感謝しきれません⭐ありがとう御座いました😃
これを理解できる小学生がいましたらマジで尊敬しますわ😅😅😅
私は日本人じゃなくて、コードも勉強始めたばかりなんでが、この説明はめっちゃ分かりやすいです！ありがとうございます！
前はずっと混乱して、今分かってなってきた！
よかったですー！
async/awaitとPromiseの関係が今までで一番わかりやすくて勉強になりました！！ありがとうございました！！
今まで観た動画の中で1番わかりやすかった！素晴らしい動画
いつもながら軽快な説明と分かってもらおうする気持ちが全面に出ていてこちらにも伝わってきます。もし予備校の講師であれば人気の先生となるでしょう。内容も日頃知りたいと思う内容がおおいです。こんごもよろしくです。
この動画が無料で見れるなんて信じられません😂
非常に分かりやすかったです！
本とか公式ドキュメントを全部読んで覚えてたのに、結局これ微妙に複雑で記憶に定着せず、割とすぐ忘れてしまってはまた覚え直してもすぐ忘れちゃうので、学習効率をなんとかしたいなと思っていました。
この動画は記憶にも定着しやすそうでわかりやすくて復習にとても便利でした。
本当に感謝です！🥷
説明を分かりやすくすると正確性が阻害されることが多いけど、これは正確かつ分かりやすいので文句無しにスゴイ。
コールバック地獄の状態で複雑な分岐がある処理に正しくエラーハンドリングや、エラー時の繰り返しリトライ制御とか入れようとするとマジで死ねる。
とてもわかりやすかったです！！小学生でもわかります。
ありがとうございます
歴史的観点から説明頂けたから、とても理解しやすかったです
10:26
人類『普通に書きたーい！』で草
そうだよね、普通に書きたいよね、普通にかけるようになってよかったねぇ
非同期処理という言葉しか聞いたこと無かったけど、めちゃくちゃ分かりやすかった。歴史って大事だと感じた。
3:42
先に画面だけ表示して、後からデータを持ってくる。
関数の引数が関数
5:43
待ち状態
完了した状態
完了した時の値をthenで繋げて、次の処理に渡せる。
10:37
関数に対してasyncを付ける＝非同期関数
関数の呼び出しの前にawitを付けるとpromiseの結果が返ってくるまで（resolveされるまで）待ってくれる。
log関数がpromiseを返してくれる
thenを使わなくてもいい
本当に分かり易いです🫶‼
例示されたソースコードがこれまで読み耽ってきた解説の類に纏まりを持たせてくれました！！ありがとうございます！！
説明が面白く、分かりやすかったです。ありがとうございます
初心者にも分かりやすく解説されていて、本当に助かります！この動画何度も見に来てます!
歴史を振り返りながらの解説、とてもわかりやすかったです。素晴らしい解説でした。
説明がわかりやすくて、面白かったです。
小学生のうちに非同期処理に興味持ち始めたい人生だった
Muchas gracias por la ayuda sensei, pude comprender de mejor manera. Saludos desde Tabasco, México!
Apenas y las entiendo en mi idioma.
Che algoritmo de youtube ahora me las recomienda en japones
Jajajaja
コールバック地獄まではこのスピードで理解できたのですがPromiseから速度が上って理解が辛かったです。
昨日からいろんな動画みたり色々調べたりしてたけど、この動画で概要がつかめました。ありがとうございます！
今までで一番わかりやすいですねぇ
今までなんとなくで使っていたのですが、この動画を見て完全に理解できました！！
非同期処理を同期処理として動かすのがasync awaitなんですね！
小学生でjavascript勉強してるけどとても分かりやすかったです!
僕も現在開発で使っていますが既存の処理を真似したりしてちゃんとわかってないのです！この解説動画はかなりありがたいです！！
asyncってエイシンクと読むと思っていました
とても分かりやすかったです。時代背景が分かると理解しやすいですね。
async/awaitまでの変遷が分かりやすかったです！
途中の「コールバックじごーく」などはいらなかったかな笑
そごいチャレンジ精神。さすがですね。
非常にわかりやすかったです。ありがとう
めっちゃわかった 感謝です
初心者に分かりやすくて助かりますー
まじでわかりやすい！ありがとうございます！！😊
小学生じゃないですが、分りやすかったです！
コードの開発の歴史からたどるのは、作った人の意図をくみ取れて、
凄く分りやすく、勉強にもなります！！！！
最近は、フロントもバックもjavascriptが多くなってきているようなので、こういうお話しは助かります！
コードの字が後半小さくて読みにくいので、今回実行したコードをアップしました！
gist.github.com/kiyodori/94cdab994e2925a0ac2477eb02ff75d7
めっっっっっっっっっっっちゃわかりやすい
C#のタスクやasync/awaitの時代の流れとかも、色々発展しましたよね。
4:17 ｸﾚﾊﾞｰ!!の勢い好きｗｗｗ
めちゃくちゃわかりやすい
ありがたい！
わかりやすかったです！
とてもわかりやすいですし、テンポも聴きやすいです！
顔を振るたびに音が近くに行ったり遠くに行ったりするのが少し聞きづらく感じたので、ピンマイクなどを導入しても良いかもと思いました！
🇯🇵🇯🇵🇯🇵説明もいいし、演技もあっていいですね。令和五年
最近はJavaScript触ってないけど分かりやすかったと思います
けど小学生は無理じゃないかな・・・
まだ知っている事を前提とする単語がいっぱい出てきていたので
説明わかりやすいだけに、時々入る謎の芝居が残念です...
普通に喋ってくれたら最高でした
C言語から始めたので非同期処理自体はなんとなくわかっている(つもり)だったのですが、JavaScriptでPromiseやasync/awaitってのがよくわからなかったですね…
やっとわかるようになりましたが
内容はすごく勉強になりましたが、言い方（途中のよく分からないキャラの喋り方）が生理的に受けつけず10分で我慢できなくなり脱落しました。
すごく分かります。
鬼わかったし、めっちゃ便利やん、すげー
アラサーでもわかりました
使えるだけじゃなく、ここまで説明できるまで理解深めないとな！頑張ろう！！！
止めて見るとき手がかぶって邪魔だから指し棒とかでお願いできませんか
playwrightでドツボにはまっています
中学生には理解できました
わかりやすいです。ありがとうございます。ただし、実際にasync/await を使用するために、練習が必要です。どこで練習できますか？
非常にわかりやすかったです！ありがとうございました。
質問です。Can I useでasync/await, Promiseを調べると、IE11では対応していないようなのですが、IEでも非同期処理を実現したい場合は、コールバック地獄と向き合わざるを得ないということになるのでしょうか？
抜け道的な方法があります！
[TypeScript]IE11でも手軽に動くawait/async
qiita.com/SoraKumo/items/9ab9382419e78dea9b98
なんでコールバックだとバックグラウンドで走るのかがわかりません
0:00 導入
2:40 本編開始
動画を見てスッキリしました よく分かりました。ありがとうございます😊
前より上手く書けるかもしれない
RとPy使ってデータ収集してる小学六年生でもわかりやすいって言ってたよ先生。
さいこう〜
12:03
*【質問】*
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();
寸劇は素人には難しいので、デジタルで演出するのが良いと思います。内容は素晴らしいです。
10:57
thenメソッド内でreturnするとその値でresolve した状態の新しいPromiseオブジェクトを返すから、thenメソッド内でnew Promiseをして新しいオブジェクトを作る必要はないと思うんだけど違ったっけ？
書いても動くけどそんな面倒なことをしなくてもいいのがPromiseチェーンのいいところだった気が…
こういう人が職場にいたらなぁ
なるほど、わかりました(>_
非同期処理にasync/awaitを付けて、わざわざ普通の同期処理にしてるんですよね。
それなら最初から同期処理をデフォにして、非同期処理したいときだけasyncを付けるとか、
そんな仕様にしてほしいですわJavaScriptさん。
関数の読み方ちゃうって要あるよな
寸劇風、お気に入りですね！笑
Yoshiさん、僕なりの試行錯誤です笑。
難しい内容もできる限り分かりやすく、あとできれば面白く伝えたいと思っていて、それで寸劇風にチャレンジしては、なんか違うと思っては普通のスタイルに戻し、でもやっぱり面白くしようと寸劇風にチャレンジしてはを繰り返してます笑
A comment in english!
小学生には理解できないとおもう。小生には理解できましたけど
某偉人系の解説口調になって笑いました。( ´艸｀)
ヒヨコ＜パラダイスみてーな国が作りてえ
めちゃくちゃ分かりやすいのに文句言ってる人はろくに勉強してないんだろうな笑
ところどころ変なテンションで話さなければすごくわかりやすいです。
小学生おじさんでもわかったよ！
アシンクではなくエイシンクな気がする
jsのは知らんけども、async/awitは基本的にケツを蹴る順番を定義してるだけになるはず🤔
中指で指す人意外と多い
今の小学生は本当に賢いな～ ｵｼﾞｻﾝ(;´д｀)ﾄﾎﾎ
言い方が笑
悩んだ末よく分からなくなってああいう言い方に着地しました笑
await 演算子以下に記述されたコードの実行も待つということでいいですかね?
例えば
func = async () => {
await log(3);
console.log("done");
...
としたらconsole.logの部分もlog(3)が実行される(resolveが返る)までは実行されないと
いきなり消費者金融出てきた
Sí
声と顔がどことなく西島隆弘に似てる
「アシンク」が気になりました(小並感)
へんな芝居以外良い
わかりやすかったけど、小学生には無理だと思う