非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】

「非同期処理」の説明できますか？正しく理解していますか？
JavaScriptでプログラムを書くために必ず1度は頭を抱える非同期処理を「制御」する方法を解説します。
★コードサンプル（GitHub）
github.com/dea...
→asynchronousディレクトリ内
★学習コミュニティ
Webエンジニアになりたい方向けのコミュニティです。
詳細動画　 • 【募集中】学習コミュニティ「とらゼミ」の募集...
お申し込みはこちら　torahack.web.a...
★日本一わかりやすいReact入門【基礎編】
• Playlist
★日本一わかりやすいReact入門【実践編】
• 日本一わかりやすいReact入門【実践編】
★日本一わかりやすいReact-Redux入門
• 日本一わかりやすいReact-Redux入門
★チャンネル概要
スタートアップ企業の現役フロントエンドエンジニアです。
以下について発信しています。
・長く生き残るための「エンジニアのキャリア論」
・理想の働き方を目指す「エンジニアの転職戦略」
・「早く&正しく」プログラミング言語と技術を習得する「勉強方法」
★Twitterアカウント
/ torahack_
★Qiita
qiita.com/tora...
★GitHub
github.com/dea...
#とらゼミ #JavaScript #入門 #エンジニア #非同期処理

[@ヤソハラともゆき]

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

[@user-jt1tm7ic8m]

話し方も綺麗でわかりやすくてありがた動画です

[@tavernitysonw]

非同期処理の色んな動画を見たけどトラハックさんが一番分かりやすい！！！！

[@2chsukatto01]

あなたは天才です！ありがとうございます！

[@zhibinwang83]

本当にわかりやすい！ありがとうございます！！！

[@cdr8556]

よかったです。雑談系のチャンネルはたくさんあるので、短くてもいいので、こういうガチな内容のほうがためになります。

[@YumaAndo-h2s]

他の方の動画も拝見しますが、トラハックさんの発信してくださる動画は、丁寧に一つ一つ解説してくださっているので、非常に良いでござんす。

[@1492tiger]

非常に嬉しいでござんす。引き続きご贔屓に〜

[@je-nos6977]

いっちゃん最初の同期処理、非同期処理の説明で、同期処理は書類作成→承認という具体的なプロセスで説明したのに、非同期の方は抽象的な話になったのはなんでだろ？ あと、APIのレスポンスの例をだしていたところで、「非同期処理になるので実行時間がかかる」というのも？となっちゃった。 前処理の結果が必須なら同期処理でええやん、って理解されちゃうような。

[@ano5041]

重箱

[@りょたろ-i2x]

.thenと.catchが何なのか知りたいです！

[@ラブスヌーピー-s9c]

勉強になりました。 仕事で使っている技術的なものを沢山教えて下さい。

[@山田大地-o8z]

うん、、わからん そもそもなんですけど、Promiseもasynも使わなくても良くないですか？ 非同期の実行が完了したら、thenが実行される訳なんだから、結果を待たなければならないコードはthenの中に入れてしまえばいいんじゃ・・・

[@1492tiger]

複数の非同期処理をthenで繋いでいくと、インデントが深くなるので可読性が著しく下がりますね！ インデントが深くならないためにasync/awaitをつかいます。

[@diamond-iamthemaincharacter]

今回の例でasync awaitでエラーハンドリングするときにtry catch使わないのははぜでしょうか？

[@kimdh377]

トラハックさんは本当に教える能力に長けていると思います！！日本一という単語を使うだけある講座ばかりです！！！最近は本業が忙しくて、なかなか一日３時間勉強ができないのですが、Redux入門を復習しつつ、実践編も少しずつやっています！実践編の動画の参考欄に非同期処理のリンクがあったので、非同期処理をマスターしにきました！！今日も頑張っていきたいです！

[@1492tiger]

ありがとうございます！ 引き続き日本一を目指していきます！！

[@tamagokakegohan6225]

はじめまして 非同期処理がなかなか理解できずにいたところ、こちらにたどり着きました。説明が分かりやすくて助かります。 質問なのですが、試しにわざとapiを間違えても.catch()側の処理が動きません。 タイプミスも疑ってgitのコードでも試してみたのですが.then()側のメッセージが出てしまいます。 エラーハンドリングをしてみたいのですが可能であれば教えていただけると幸いです。

[@1492tiger]

この記事の後半「response.okをチェックする」が役にたつと思います！ blog.mudatobunka.org/entry/2016/04/26/092518 fetch APIは、ネットワークエラーじゃないとcatchで処理しないそうです。

[@tamagokakegohan6225]

​@@1492tiger ありがとうございますー 仕様なんですね… なかなか難しい！

[@vclxx7867]

try{ const json = await fetch(url); console.log('成功'); }cache(e){ console.log('失敗') } console.log(json.login) await使うならこれで行けんじゃないかね

[@WinLinux1028]

他の言語に比べて非同期処理難しすぎないか...?

[@mr.morinonaka8657]

メットの記事とにらめっこするんじゃなくて、これ見ればよかったぁ

[@min-bb6vh]

今Web Iotのイベントに参加してるのですが非同期処理についてわかってなかったのでトラハックさんが出してて助かりました！w

[@SuzukiShota-b2t]

.thenがわからないです泣

[@kunime-ji5066]

async内のみ同期になるってことですか

[@セネカ大先生]

未経験で半年ほど学習してますがPromiseからのasyncの解説で理解できました。ありがとうございます😭

[@RohannKawazoe]

最近拝見するようになり、凄く為になります。ありがとうございます。

[@genkiueno1452]

トラゼミでasync/awaitのところ聞こうと思ったりしてましたが、これみてスッキリしました。トラゼミ入って良かったです。

[@1492tiger]

genki ueno ありがとうございます☺️

[@hanco6362]

入門終わった後にこの内容は助かりすぎる

[@1492tiger]

ぜひ活用してください！

[@ミルク-e3x]

非同期と同期がわかりましたー！

[@castleglengarry1060]

わかりやすい開設ありがとうございます。 async 、awaitのところでなぜ console.log(message, json.login)を中に入れてしまったのでしょうか。　外に出しておくと問題が発生してしまうのでしょうか。

[@irtom6154]

3回みたらわかってきました。

[@gkmjwj5617]

スレッドや非同期処理がないと どんな不便がありますか

[@けーと-b8t]

通信等時間のかかる処理が発生する度に処理が止まりますね。 例えば、上司に申請を出してその承認もらう間に自分の他の仕事が出来るのに、非同期処理がないとその承認下りるまでずっと待機してるというイメージです。

[@わらび餅-u5z]

貴方は言語化能力高いよ

[@YM-bv1ll]

説明する能力も高ってのもあるけど説明がバリ丁寧、

[@yoshisasaki2914]

たしかにわかりやすい！　声も良い！

[@変態先生改め変わった態度]

すごくわかりやすかったです! 言語化する力がすごいです！ 欲を言えばもう少し抑揚付けて喋るともっと良くなると思います!

[@ww-zo2yl]

かなり分かりやすいです。ありがとうございました。

[@shin-fq1di]

いつも楽しく学ばさせていただいております！本当にありがたいです！ 1点質問なのですが、今回の動画を自分なりにトライしたところ、拡張子が　.js　だとうまく動かず、 .mjs　だと動きました。 動画の中では、拡張子が　.js　で動いていたので、自分の環境構築に誤りがあるのでしょうか？ ざっくりな質問で申し訳ございませんが、ご教授いただけると幸いです

[@subPlayer第二主人]

async,awaitだけで全部できれば良いんですけどね 結局promiseも必要になる

[@1492tiger]

async/awaitはpromiseをいい感じにラップしてくれてるだけですもんね〜。

[@近藤K-y9w]

コードが小さくてスマホじゃ見れない、、

[@falconno6554]

すごいわかりやすかったです!

[@dev.regotube]

2:50

[@百さん-x6v]

ハンコ押しといてください、ではなくて書類の確認お願いしますでしょ。本当に最近の若い子って仕事も礼儀もできない。