JavaScript ・ タイマー・非同期
async / await
時間のかかる処理を順番に書く
通信など時間のかかる処理（非同期処理）を、上から順に実行するように書ける仕組みです。async を付けた関数の中で、await で結果を待ちます。
01
サンプルコード
HTML
1<button type="button" id="load">データを読み込む</button>
2<p id="status"></p>
CSS
1button {
2 padding: 6px 16px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
JS
1const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
2
3async function loadData() {
4 const status = document.querySelector('#status');
5 status.textContent = '読み込み中…';
6 console.log('読み込み開始');
7 await wait(1500);
8 status.textContent = '読み込みが完了しました';
9 console.log('読み込み完了');
10}
11
12document.querySelector('#load').addEventListener('click', loadData);
02
実行結果
ブラウザでの表示ボタンを押すと、1.5秒後に表示が変わります
コンソール
- console.log() の出力がここに表示されます
03
解説
JavaScriptでは、通信やタイマーなど時間のかかる処理は、終わるのを待たずに次へ進みます（非同期処理）。こうした処理の多くは、結果を後で受け取るための Promise を返します。
関数の前に async を付けると、その中で await が使えるようになります。await は Promise の結果が出るまで待ち、結果を値として受け取ります。
上の例では、1.5秒待つ処理を await で待ってから、表示を「完了」に変えています。実際のサイトでは fetch() でサーバーからデータを取得するときによく使います。
04
応用例・注意点
関連する書き方
| 書き方 | 説明 |
|---|---|
async function 名前() {} | 非同期関数を定義する |
await Promise | 結果が出るまで待つ |
try { } catch (e) { } | エラーを受け取る |
Promise.all([...]) | 複数の処理をまとめて待つ |
fetch(url) | サーバーからデータを取得する（Promise を返す） |
fetch でデータを取得する
サーバーから JSON を取得する定番の書き方です。失敗に備えて try...catch で囲みます。
JS
1async function getMenu() {
2 try {
3 const res = await fetch('/api/menu.json');
4 if (!res.ok) throw new Error('取得に失敗しました');
5 const menu = await res.json();
6 console.log(menu);
7 } catch (error) {
8 console.error(error);
9 }
10}
注意点
- 01await は async を付けた関数の中（またはモジュールの最上位）でしか使えません。
- 02await を付け忘れると、結果の値ではなく Promise そのものを受け取ってしまいます。