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

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

КОМЕНТАРІ • 51

  • @user-tn9pb5lk3r
    @user-tn9pb5lk3r 2 роки тому +1

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

  • @tavernitysonw
    @tavernitysonw 2 роки тому

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

  • @user-jt1tm7ic8m
    @user-jt1tm7ic8m 3 роки тому +2

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

  • @user-zq1kq8no8d
    @user-zq1kq8no8d Рік тому

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

  • @2chsukatto01
    @2chsukatto01 4 роки тому +3

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

  • @zhibinwang83
    @zhibinwang83 3 роки тому +3

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

  • @kimdh377
    @kimdh377 3 роки тому +5

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

    • @1492tiger
      @1492tiger  3 роки тому +1

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

  • @min-bb6vh
    @min-bb6vh 3 роки тому +2

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

  • @ww-zo2yl
    @ww-zo2yl 3 роки тому +2

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

  • @falconno6554
    @falconno6554 Рік тому

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

  • @user-ii4lo7rk7y
    @user-ii4lo7rk7y 4 роки тому

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

    • @1492tiger
      @1492tiger  4 роки тому

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

  • @yoshisasaki2914
    @yoshisasaki2914 3 роки тому +2

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

  • @hanco6362
    @hanco6362 3 роки тому +4

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

    • @1492tiger
      @1492tiger  3 роки тому

      ぜひ活用してください!

  • @YM-bv1ll
    @YM-bv1ll 3 роки тому +2

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

  • @genkiueno1452
    @genkiueno1452 4 роки тому +2

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

    • @1492tiger
      @1492tiger  4 роки тому

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

  • @cdr8556
    @cdr8556 4 роки тому +12

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

  • @irtom6154
    @irtom6154 3 роки тому +1

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

  • @user-nh6cn9ct2y
    @user-nh6cn9ct2y 13 днів тому

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

  • @user-bf6hc8xv9l
    @user-bf6hc8xv9l 5 місяців тому

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

  • @shin-fq1di
    @shin-fq1di 3 роки тому

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

  • @user-kd4ob6hb7v
    @user-kd4ob6hb7v 3 роки тому +1

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

  • @castleglengarry1060
    @castleglengarry1060 Рік тому

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

  • @user-vz8cu2eb3c
    @user-vz8cu2eb3c 3 роки тому +4

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

  • @Thomas36388s
    @Thomas36388s 2 роки тому +1

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

  • @tamagokakegohan6225
    @tamagokakegohan6225 4 роки тому +3

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

    • @1492tiger
      @1492tiger  4 роки тому +2

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

    • @tamagokakegohan6225
      @tamagokakegohan6225 4 роки тому +1

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

  • @vclxx7867
    @vclxx7867 2 роки тому +1

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

  • @user-ck4do4cs7z
    @user-ck4do4cs7z 3 роки тому +1

    貴方は言語化能力高いよ

  • @mr.morinonaka8657
    @mr.morinonaka8657 Рік тому

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

  • @user-tm6zn2fv1w
    @user-tm6zn2fv1w 3 роки тому +3

    .thenがわからないです泣

  • @kunime-ji5066
    @kunime-ji5066 2 роки тому

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

  • @user-bp7oo5fu4v
    @user-bp7oo5fu4v 3 роки тому +2

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

    • @1492tiger
      @1492tiger  3 роки тому +1

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

  • @WinLinux1028
    @WinLinux1028 3 роки тому +2

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

  • @dev.regotube
    @dev.regotube 3 роки тому

    2:50

  • @user-jy8em1jd4s
    @user-jy8em1jd4s 3 роки тому

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

  • @gkmjwj5617
    @gkmjwj5617 2 роки тому

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

    • @user-zc3zk7nv5l
      @user-zc3zk7nv5l 2 роки тому +3

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

  • @subPlayer第二主人
    @subPlayer第二主人 3 роки тому +4

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

    • @1492tiger
      @1492tiger  3 роки тому +1

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

  • @je-nos6977
    @je-nos6977 Рік тому

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

  • @user-hn4rl9vl8m
    @user-hn4rl9vl8m Рік тому +2

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