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

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

ユーザ用ツール

サイト用ツール


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


差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
最新のリビジョン 両方とも次のリビジョン
00.javascript:01.同期処理と非同期処理 [2020/11/24]
adash333 [onload]
00.javascript:01.同期処理と非同期処理 [2020/12/01]
adash333 [async/await]
行 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つずつ順番に処理、、、でもない?
  
 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 ====
行 631: 行 672:
 Promise, async, await がやっていること (Promise と async は書き換え可能?) Promise, async, await がやっていること (Promise と async は書き換え可能?)
  
 +https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
 +async function - JavaScript - MDN - Mozilla
  
 +https://tech-blog.s-yoshiki.com/entry/140
 +async awaitで画像を読み込み canvasに描画 JavaScript
 +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 について
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +===== onload =====
 +
 +https://github.com/tensorflow/tfjs/blob/master/tfjs-converter/demo/mobilenet/index.js
 +<code>
 +const cat = document.getElementById('cat');
 +cat.onload = async () => {
 +  const resultElement = document.getElementById('result');
 +
 +......
 +</code>
 +
 +
 +===== 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
  
  
  
  
-https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function 
-async function - JavaScript - MDN - Mozilla 
  
  
  
 +===== TensorFlow.js =====
  
  
 +https://codelabs.developers.google.com/codelabs/tensorflowjs-object-detection#7
  
  


00.javascript/01.同期処理と非同期処理.txt · 最終更新: 2021/10/07 by adash333