非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】
Вставка
- Опубліковано 10 лют 2025
- 「非同期処理」の説明できますか？正しく理解していますか？
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 #入門 #エンジニア #非同期処理
やっとこの動画で非同期処理が理解できた気がする😭
最近拝見するようになり、凄く為になります。ありがとうございます。
未経験で半年ほど学習してますがPromiseからのasyncの解説で理解できました。ありがとうございます😭
トラハックさんは本当に教える能力に長けていると思います！！日本一という単語を使うだけある講座ばかりです！！！最近は本業が忙しくて、なかなか一日３時間勉強ができないのですが、Redux入門を復習しつつ、実践編も少しずつやっています！実践編の動画の参考欄に非同期処理のリンクがあったので、非同期処理をマスターしにきました！！今日も頑張っていきたいです！
ありがとうございます！
引き続き日本一を目指していきます！！
めっちゃわかりやすいです！
非同期処理の色んな動画を見たけどトラハックさんが一番分かりやすい！！！！
入門終わった後にこの内容は助かりすぎる
ぜひ活用してください！
話し方も綺麗でわかりやすくてありがた動画です
今Web Iotのイベントに参加してるのですが非同期処理についてわかってなかったのでトラハックさんが出してて助かりました！w
本当にわかりやすい！ありがとうございます！！！
たしかにわかりやすい！ 声も良い！
あなたは天才です！ありがとうございます！
勉強になりました。
仕事で使っている技術的なものを沢山教えて下さい。
トラゼミでasync/awaitのところ聞こうと思ったりしてましたが、これみてスッキリしました。トラゼミ入って良かったです。
genki ueno ありがとうございます☺️
よかったです。雑談系のチャンネルはたくさんあるので、短くてもいいので、こういうガチな内容のほうがためになります。
かなり分かりやすいです。ありがとうございました。
説明する能力も高ってのもあるけど説明がバリ丁寧、
すごいわかりやすかったです!
非同期と同期がわかりましたー！
3回みたらわかってきました。
他の方の動画も拝見しますが、トラハックさんの発信してくださる動画は、丁寧に一つ一つ解説してくださっているので、非常に良いでござんす。
非常に嬉しいでござんす。引き続きご贔屓に〜
メットの記事とにらめっこするんじゃなくて、これ見ればよかったぁ
いっちゃん最初の同期処理、非同期処理の説明で、同期処理は書類作成→承認という具体的なプロセスで説明したのに、非同期の方は抽象的な話になったのはなんでだろ？
あと、APIのレスポンスの例をだしていたところで、「非同期処理になるので実行時間がかかる」というのも？となっちゃった。
前処理の結果が必須なら同期処理でええやん、って理解されちゃうような。
重箱
貴方は言語化能力高いよ
.thenと.catchが何なのか知りたいです！
try{
const json = await fetch(url);
console.log('成功');
}cache(e){
console.log('失敗')
}
console.log(json.login)
await使うならこれで行けんじゃないかね
わかりやすい開設ありがとうございます。
async 、awaitのところでなぜ console.log(message, json.login)を中に入れてしまったのでしょうか。 外に出しておくと問題が発生してしまうのでしょうか。
いつも楽しく学ばさせていただいております！本当にありがたいです！
1点質問なのですが、今回の動画を自分なりにトライしたところ、拡張子が .js だとうまく動かず、 .mjs だと動きました。
動画の中では、拡張子が .js で動いていたので、自分の環境構築に誤りがあるのでしょうか？
ざっくりな質問で申し訳ございませんが、ご教授いただけると幸いです
今回の例でasync awaitでエラーハンドリングするときにtry catch使わないのははぜでしょうか？
すごくわかりやすかったです!
言語化する力がすごいです！
欲を言えばもう少し抑揚付けて喋るともっと良くなると思います!
他の言語に比べて非同期処理難しすぎないか...?
はじめまして 非同期処理がなかなか理解できずにいたところ、こちらにたどり着きました。説明が分かりやすくて助かります。
質問なのですが、試しにわざとapiを間違えても.catch()側の処理が動きません。
タイプミスも疑ってgitのコードでも試してみたのですが.then()側のメッセージが出てしまいます。
エラーハンドリングをしてみたいのですが可能であれば教えていただけると幸いです。
この記事の後半「response.okをチェックする」が役にたつと思います！
blog.mudatobunka.org/entry/2016/04/26/092518
fetch APIは、ネットワークエラーじゃないとcatchで処理しないそうです。
@@1492tiger
ありがとうございますー
仕様なんですね…
なかなか難しい！
うん、、わからん
そもそもなんですけど、Promiseもasynも使わなくても良くないですか？
非同期の実行が完了したら、thenが実行される訳なんだから、結果を待たなければならないコードはthenの中に入れてしまえばいいんじゃ・・・
複数の非同期処理をthenで繋いでいくと、インデントが深くなるので可読性が著しく下がりますね！
インデントが深くならないためにasync/awaitをつかいます。
.thenがわからないです泣
async内のみ同期になるってことですか
async,awaitだけで全部できれば良いんですけどね
結局promiseも必要になる
async/awaitはpromiseをいい感じにラップしてくれてるだけですもんね〜。
スレッドや非同期処理がないと
どんな不便がありますか
通信等時間のかかる処理が発生する度に処理が止まりますね。
例えば、上司に申請を出してその承認もらう間に自分の他の仕事が出来るのに、非同期処理がないとその承認下りるまでずっと待機してるというイメージです。
コードが小さくてスマホじゃ見れない、、
2:50
ハンコ押しといてください、ではなくて書類の確認お願いしますでしょ。本当に最近の若い子って仕事も礼儀もできない。