path: root/files/ja/learn/javascript/asynchronous/concepts/index.html

---
title: 非同期プログラミングの一般的概念
slug: Learn/JavaScript/Asynchronous/Concepts
tags:
  - JavaScript
  - Learn
  - Promises
  - Threads
  - asynchronous
  - blocking
translation_of: Learn/JavaScript/Asynchronous/Concepts
---
<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>

<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td>
  </tr>
 </tbody>
</table>

<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2>

<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p>

<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p>

<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>

<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p>

<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2>

<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p>

<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p>

<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p>

<pre class="brush: js notranslate">const btn = document.querySelector('button');
btn.addEventListener('click', () =&gt; {
  let myDate;
  for(let i = 0; i &lt; 10000000; i++) {
    let date = new Date();
    myDate = date
  }

  console.log(myDate);

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});</pre>

<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！　しかしながら、基本的な考え方の理解には役立ちます。</p>
</div>

<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p>

<ul>
 <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li>
 <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li>
</ul>

<pre class="brush: js notranslate">function expensiveOperation() {
  for(let i = 0; i &lt; 1000000; i++) {
    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
    ctx.beginPath();
    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
    ctx.fill()
  }
}

fillBtn.addEventListener('click', expensiveOperation);

alertBtn.addEventListener('click', () =&gt;
  alert('You clicked me!')
);</pre>

<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p>
</div>

<p>何故こうなるのでしょうか？　その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p>

<h2 id="Threads" name="Threads">スレッド</h2>

<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p>

<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>

<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p>

<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p>

<pre class="notranslate">Thread 1: Task A --&gt; Task B
Thread 2: Task C --&gt; Task D</pre>

<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3>

<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p>

<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>

<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p>

<pre class="notranslate">  Main thread: Task A --&gt; Task C
Worker thread: Expensive task B</pre>

<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p>

<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2>

<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p>

<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p>

<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>

<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p>

<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
Worker thread: Task C -----------&gt; |      |</pre>

<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p>

<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p>

<pre class="notranslate">Main thread: Task A                   Task B
    Promise:      |__async operation__|</pre>

<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p>

<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？　読み進めましょう！</p>

<h2 id="Conclusion" name="Conclusion">結論</h2>

<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>

<ul>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
</ul>