サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.javascript:01.同期処理と非同期処理


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.javascript:01.同期処理と非同期処理 [2020/11/26]
adash333 [同期処理と非同期処理って何?]
00.javascript:01.同期処理と非同期処理 [2021/10/07] (現在)
adash333 [参考サイト]
行 1: 行 1:
 ====== 01.JavaScriptの同期処理と非同期処理 ====== ====== 01.JavaScriptの同期処理と非同期処理 ======
- ---//2019/09/16 更新//+[[00.javascript:index.html|JavaScriptの個人的に気になるところ]]
  
 個人的に、setInterval, Promise, async, awaitという文字列が出てきた瞬間にお手上げです!コールバックとか非同期処理という言葉も見たくありません! 個人的に、setInterval, Promise, async, awaitという文字列が出てきた瞬間にお手上げです!コールバックとか非同期処理という言葉も見たくありません!
行 6: 行 6:
 しかし、避けて通れなさそうなので、可能な範囲でまとめてみたいと思います。 しかし、避けて通れなさそうなので、可能な範囲でまとめてみたいと思います。
  
-===== 同期処理はマルチタスク、非同期処理は1つずつ順番に処理 =====+===== 同期処理と非同期処理とは? ===== 
 + 
 +同期処理はマルチタスク、非同期処理は1つずつ順番に処理、、、でもない?
  
 2つ以上の処理を実行するとき、同期処理と非同期処理の2つの方式があります。 2つ以上の処理を実行するとき、同期処理と非同期処理の2つの方式があります。
行 382: 行 384:
 JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる
 →特に<wrap hi>最初の方の、JavaScriptにおける同期処理、非同期処理の説明は必見です。</wrap>また、後半で具体的なコードの記載と分かりやすい解説があり、繰り返し読むことにより、なんとなくPromiseを理解できそうな気になれます。 →特に<wrap hi>最初の方の、JavaScriptにおける同期処理、非同期処理の説明は必見です。</wrap>また、後半で具体的なコードの記載と分かりやすい解説があり、繰り返し読むことにより、なんとなくPromiseを理解できそうな気になれます。
 +
 +https://azu.github.io/promises-book/#chapter1-what-is-promise
 +JavaScript Promiseの本
 +azu
 +→わかりやすいです。<wrap hi>必見です。</wrap>繰り返し読んで写経すると非同期処理が怖くなくなりそうです。
  
 https://rightcode.co.jp/blog/information-technology/javascript-promise https://rightcode.co.jp/blog/information-technology/javascript-promise
行 449: 行 456:
 JavaScript Promiseの本 JavaScript Promiseの本
 azu azu
 +
 +https://qiita.com/saka212/items/9b6cfe06b464580c2ee6
 +@saka212
 +2020年05月05日に更新
 +Promiseとthenのメソッドチェーン(直列・並列・値の受け取り・引数)
 +
 +
 +https://sbfl.net/blog/2019/02/08/javascript-callback-func/
 +JavaScriptの「コールバック関数」とは一体なんなのか
 +2019/02/08
 +
 +
 +
  
  
行 491: 行 511:
 [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await|await - MDN - Mozilla]] [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await|await - MDN - Mozilla]]
  
 +==== もう一度asyncの定義 ====
 +async とは非同期関数を定義する関数定義。
 +Async Function は非同期処理を扱う(promise を利用する)関数を定義する構文。
 +Async Function は通常の関数とは異なり、async を関数の前に付けることで、その関数は Promise オブジェクト(Promiseインスタンス)を返すようになる。
 +<code>
 +async function asyncFunc(/*引数*/) {
 +  // 処理
 +  return value;
 +}
 +</code>
 +上記で定義されたasyncFuncは、以下で定義されたasyncFuncと全く同じ関数。
 +<code>
 +function asyncFunc(/*引数*/) {
 +  return new Promise((resolve, reject) => {
 +    // 処理
 +    resolve(value);
 +  });
 +}
 +</code>
  
  
 +引用元:https://rightcode.co.jp/blog/information-technology/javascript-async-await
 +https://www.webdesignleaves.com/pr/jquery/javaascript_03.html
  
 ==== async/awaitの使用例1 ==== ==== async/awaitの使用例1 ====
行 637: 行 678:
 async awaitで画像を読み込み canvasに描画 JavaScript async awaitで画像を読み込み canvasに描画 JavaScript
 2019-06-23 2019-06-23
 +
 +https://dev.classmethod.jp/articles/explain-promise-and-async-await-for-primary-javascript/
 +Sの初心者にPromiseとasync/awaitの使い方を雑に説明してみる
 +夏目祐樹
 +2020.09.09
 +
 +https://qiita.com/uhyo/items/0e2e9eaa30ec2ff05260
 +@uhyo
 +2020年07月30日に更新
 +top-level awaitがどのようにES Modulesに影響するのか完全に理解する
 +
 +===== fetch =====
 +
 +https://kde.hateblo.jp/entry/2018/10/22/010811
 +【JavaScript基礎】Fetch APIの基礎
 +20181022
 +
 +
 +fetch(...) の結果は、 Promiseオブジェクトして返ってくる
 +
 +
 +https://qiita.com/sotasato/items/31be24d6776f3232c0c0
 +@sotasato
 +2020年11月04日に更新
 +JavaScriptのFetch API について
 +
 +
 +
  
  
行 657: 行 726:
  
  
 +===== async/await =====
 +
 +https://i-doctor.sakura.ne.jp/web/doku.php?id=00.javascript:01.%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%A8%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86
 +非同期処理
 +
 +https://azu.github.io/promises-book/
 +JavaScript Promiseの本
 +azu
 +
 +
 +
 +
 +
 +
 +
 +===== TensorFlow.js =====
 +
 +
 +https://codelabs.developers.google.com/codelabs/tensorflowjs-object-detection#7
  
  
行 681: 行 769:
 ライトコードメディア編集部 ライトコードメディア編集部 ライトコードメディア編集部 ライトコードメディア編集部
 2019.05.31 2019.05.31
 +
 +https://zenn.dev/qnighy/articles/345aa9cae02d9d
 +JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
 +2021.09.25に公開
  
  


00.javascript/01.同期処理と非同期処理.1606419623.txt.gz · 最終更新: 2020/11/26 by adash333