---
title: 非同期 JavaScript
slug: Learn/JavaScript/Asynchronous
tags:
  - JavaScript
  - Promises
  - async
  - asynchronous
  - await
  - setInterval
  - setTimeout
translation_of: Learn/JavaScript/Asynchronous
---
<div>{{LearnSidebar}}</div>

<p class="summary"><span class="seoSummary">このモジュールでは、{{Glossary("asynchronous")}} {{Glossary("JavaScript")}} に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理（例えばサーバからリソースを取得する）に効果的に対処するためにどうやって使うのかを見ていきます。</span></p>

<h2 id="前提条件">前提条件</h2>

<p>非同期 JavaScript はとても高度なトピックなので、事前に <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>のモジュールに取り組んでおくことをおすすめします。</p>

<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> まで飛ばしていただいてもかまいません。</p>

<div class="note">
<p><strong>注記</strong>： ファイルを作成する手段のないコンピュータ・タブレット・その他のデバイスをお使いの場合、（ほとんどの）コード例は<a href="http://jsbin.com/"> JSBin</a> や<a href="https://thimble.mozilla.org/">Thimble</a> などのオンラインエディタでも試すことができます。</p>
</div>

<h2 id="ガイド">ガイド</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt>
 <dd>
 <p>この記事では、非同期プログラミングに関するいくつかの重要な概念を一通り確認し、それらがウェブブラウザや JavaScript でどう見えるかを確認します。このモジュールの他の記事に進む前に、それらの概念を理解しておいてください。</p>
 </dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt>
 <dd>この記事では、同期 JavaScript にまつわる問題をざっと振り返り、これから遭遇するであろう、今までとは異なる非同期 JavaScript のテクニックをいくつか見てみます。そして、それらのテクニックがいかにして同期 JavaScript の問題を解決するかを確認します。</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt>
 <dd>ここでは、JavaScriptでコードを非同期〔一定時間が経過した時、もしくは、一定間隔（例えば1秒あたり何回）〕に実行する時に使う伝統的な手法を見てみます。そして、どんな場合に便利なのかを説明し、内在する問題を考察します。</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt>
 <dd>Promise は JavaScript の比較的新しい機能で、前の処理が完了するまでそれ以上の処理を先延ばしにしたり、その失敗に対処したりすることを可能にするものです。これは、一連の作業を正しく動作させるのに非常に便利です。この記事では、promise がどのように動作するか、WebAPIのどこで使われているか、そして、どうやって使うかを解説します。</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt>
 <dd>Promise は構成したり理解したりするのにやや複雑であるため、モダンブラウザは <code>async</code> 関数と <code>await</code> 演算子を実装しています。前者は通常の関数が promise によって暗黙に非同期的に振る舞うことを可能にし、後者は <code>async</code> 関数内で処理が進む前に promise を待つことで、promise の連鎖を簡単にします。この記事では <code>async</code>/<code>await</code> を解説します。</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt>
 <dd>このモジュールの最後に、別のコーディングテクニックとこれまで議論してきた機能を考察します。そして、推奨事項とよくある落とし穴への注意とともに、どれを・いつ・どこで使うのが適切なのかを検討します。</dd>
</dl>

<h2 id="関連情報">関連情報</h2>

<ul>
 <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a>（Marjin Haverbeke 氏の非常に優れたオンライン書籍 <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> より）</li>
</ul>