async/awaitって何？

async/await（アシンク・アウェイト）は、「待つ」処理を簡単に書ける魔法の言葉です。

普通のプログラムは上から順番に実行されます：

console.log("1番目");
console.log("2番目");
console.log("3番目");
// 表示: 1番目 → 2番目 → 3番目

でも、インターネットからデータを取ってくる時は時間がかかります。その「待ち時間」をうまく扱うのがasync/awaitです。

まずは「待つ」を体験しよう

例：お店で注文する

async function orderFood() {
  console.log("1. お店に入る");
  console.log("2. 注文する");
  
  // 料理ができるまで待つ（3秒）
  await new Promise(resolve => setTimeout(resolve, 3000));
  
  console.log("3. 料理が届いた！");
  console.log("4. 食べる");
}

orderFood();

実行すると：

"お店に入る" が表示
"注文する" が表示
3秒待つ
"料理が届いた！" が表示
"食べる" が表示

awaitがあるので、ちゃんと待ってから次に進みます。

asyncとawaitの基本ルール

ルール1：「待つ」には2つの言葉が必要

async function example() {
  await doSomething();
}

async：この関数の中で「待つ」ことができるよ、という印
await：ここで待つよ、という印

セットで使います！

ルール2：asyncがないとawaitは使えない

// ❌ これはエラー
function wrong() {
  await doSomething(); // エラー！asyncがない
}

// ✅ これが正しい
async function correct() {
  await doSomething(); // OK！
}

身近な例で理解しよう

例1：友達にメッセージを送る

async function sendMessageToFriend() {
  console.log("メッセージを書く");
  console.log("送信ボタンを押す");
  
  // 送信完了まで待つ（1秒）
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  console.log("送信完了！");
  console.log("既読がついた！");
}

sendMessageToFriend();

流れ：
メッセージを書く → 送信 → 待つ → 完了！

例2：ゲームのダウンロード

async function downloadGame() {
  console.log("ダウンロード開始");
  
  // ダウンロード完了まで待つ（5秒）
  await new Promise(resolve => setTimeout(resolve, 5000));
  
  console.log("ダウンロード完了！");
  console.log("インストール開始");
  
  // インストール完了まで待つ（3秒）
  await new Promise(resolve => setTimeout(resolve, 3000));
  
  console.log("インストール完了！");
  console.log("ゲームを起動できます");
}

downloadGame();

流れ：
ダウンロード → 5秒待つ → インストール → 3秒待つ → 完了！

インターネットからデータを取ってくる

天気を調べる例

async function getWeather() {
  console.log("天気を調べています...");
  
  // インターネットから天気データを取得（待つ）
  const response = await fetch("https://api.weather.com/tokyo");
  
  console.log("データが届きました！");
  
  // データを読める形にする（これも待つ）
  const data = await response.json();
  
  console.log("今日の天気:", data.weather);
}

getWeather();

ポイント：

fetchでデータを取りに行く（時間がかかる）
awaitで完了まで待つ
データが届いてから次の処理をする

ユーザー情報を取得する例

async function showUserName() {
  console.log("ユーザー情報を取得中...");
  
  // サーバーからユーザー情報を取得
  const response = await fetch("https://api.example.com/user/123");
  const user = await response.json();
  
  console.log("ユーザー名:", user.name);
  console.log("年齢:", user.age);
}

showUserName();

失敗した時の対処 - try/catch

インターネットの通信は失敗することがあります。その時の対処法です。

基本の書き方

async function getWeatherSafe() {
  try {
    // うまくいくかもしれないコード
    console.log("天気を取得中...");
    const response = await fetch("https://api.weather.com/tokyo");
    const data = await response.json();
    console.log("天気:", data.weather);
    
  } catch (error) {
    // 失敗した時の処理
    console.log("天気が取得できませんでした");
    console.log("インターネット接続を確認してください");
  }
}

getWeatherSafe();

説明：

try：まず試してみる
catch：失敗したらここが実行される

例：ファイルを読み込む

async function readFile() {
  try {
    console.log("ファイルを読み込み中...");
    const content = await fetch("data.txt");
    const text = await content.text();
    console.log("ファイルの内容:", text);
    
  } catch (error) {
    console.log("ファイルが見つかりません");
  }
}

readFile();

複数のことを同時にやる

例：3つのデータを同時に取得

遅い方法（1つずつ）：

async function getSlow() {
  console.log("データ取得開始");
  
  const data1 = await fetch("/api/data1"); // 1秒待つ
  const data2 = await fetch("/api/data2"); // 1秒待つ
  const data3 = await fetch("/api/data3"); // 1秒待つ
  
  console.log("完了！合計3秒かかった");
}

速い方法（同時に）：

async function getFast() {
  console.log("データ取得開始");
  
  // 3つ同時に開始！
  const results = await Promise.all([
    fetch("/api/data1"),
    fetch("/api/data2"),
    fetch("/api/data3")
  ]);
  
  console.log("完了！合計1秒で終わった！");
}

イメージ：

遅い方法：1人で3つの仕事を順番にやる
速い方法：3人で同時にやる

例：複数の画像を読み込む

async function loadAllImages() {
  console.log("画像を読み込み中...");
  
  const images = await Promise.all([
    loadImage("photo1.jpg"),
    loadImage("photo2.jpg"),
    loadImage("photo3.jpg")
  ]);
  
  console.log("全ての画像の読み込み完了！");
}

実際の使い方の例

例1：ログイン機能

async function login(username, password) {
  try {
    console.log("ログイン中...");
    
    // サーバーにユーザー名とパスワードを送る
    const response = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify({ username, password })
    });
    
    const result = await response.json();
    
    if (result.success) {
      console.log("ログイン成功！");
      console.log("ようこそ、" + result.userName + "さん");
    } else {
      console.log("ログイン失敗");
      console.log("ユーザー名かパスワードが違います");
    }
    
  } catch (error) {
    console.log("通信エラーが発生しました");
  }
}

// 使う
login("taro", "password123");

例2：検索機能

async function searchProducts(keyword) {
  try {
    console.log(keyword + "を検索中...");
    
    // 検索APIを呼び出す
    const response = await fetch(`/api/search?q=${keyword}`);
    const results = await response.json();
    
    if (results.length === 0) {
      console.log("見つかりませんでした");
    } else {
      console.log(results.length + "件見つかりました");
      results.forEach(product => {
        console.log("- " + product.name);
      });
    }
    
  } catch (error) {
    console.log("検索に失敗しました");
  }
}

// 使う
searchProducts("ゲーム");

例3：データを保存する

async function saveUserProfile(name, age) {
  try {
    console.log("保存中...");
    
    const response = await fetch("/api/profile", {
      method: "POST",
      body: JSON.stringify({ name, age })
    });
    
    if (response.ok) {
      console.log("保存しました！");
    } else {
      console.log("保存に失敗しました");
    }
    
  } catch (error) {
    console.log("エラーが発生しました");
  } finally {
    // 成功しても失敗しても実行される
    console.log("処理完了");
  }
}

// 使う
saveUserProfile("太郎", 15);

繰り返し処理での使い方

複数のユーザーを1人ずつ処理

async function processUsers() {
  const userIds = [1, 2, 3, 4, 5];
  
  for (const id of userIds) {
    console.log(`ユーザー${id}を処理中...`);
    
    // 1人ずつ順番に処理
    const user = await fetch(`/api/users/${id}`);
    const data = await user.json();
    
    console.log(`${data.name}さんの処理完了`);
  }
  
  console.log("全員の処理が終わりました");
}

複数のファイルを順番に読み込む

async function readAllFiles() {
  const files = ["file1.txt", "file2.txt", "file3.txt"];
  
  for (const filename of files) {
    console.log(filename + "を読み込み中...");
    
    const response = await fetch(filename);
    const content = await response.text();
    
    console.log("内容:", content);
  }
  
  console.log("全てのファイル読み込み完了");
}

よくある間違い

間違い1：awaitを書き忘れる

// ❌ これは間違い
async function wrong() {
  const data = fetch("/api/data"); // awaitがない！
  console.log(data); // 変な値が表示される
}

// ✅ これが正しい
async function correct() {
  const data = await fetch("/api/data"); // awaitをつける
  console.log(data); // ちゃんとデータが表示される
}

間違い2：asyncを書き忘れる

// ❌ これはエラー
function wrong() {
  await fetch("/api/data"); // エラー！asyncがない
}

// ✅ これが正しい
async function correct() {
  await fetch("/api/data"); // OK！
}

間違い3：エラー処理を忘れる

// ❌ 危険（エラーが起きたら止まる）
async function dangerous() {
  const data = await fetch("/api/data");
  console.log(data);
}

// ✅ 安全（エラーが起きても大丈夫）
async function safe() {
  try {
    const data = await fetch("/api/data");
    console.log(data);
  } catch (error) {
    console.log("エラーが起きました");
  }
}

覚えておくこと

基本の3つ

asyncをつける = 「この関数は待つことがあるよ」
awaitをつける = 「ここで待つよ」
try/catchをつける = 「失敗した時の対策」

書き方のテンプレート

async function 関数名() {
  try {
    // やりたいこと
    const 結果 = await 時間がかかる処理();
    console.log(結果);
    
  } catch (error) {
    // 失敗した時
    console.log("エラーが起きました");
  }
}

まとめ

async/awaitは「待つ」処理を簡単に書ける便利な道具

インターネット通信
ファイルの読み書き
時間がかかる処理

こういう「待つ必要がある」処理で使います。

使い方は簡単：

関数にasyncをつける
待ちたいところにawaitをつける
try/catchでエラー対策

これだけ覚えれば大丈夫！

最初は難しく感じるかもしれませんが、何度も書いていれば自然と使えるようになります。

一番大事なこと：
「await = 待つ」と覚えておけばOK！

もっと詳しく知りたい人へ

Promiseって何？
並行処理の詳しい使い方
エラーハンドリングのコツ

これらを学ぶと、さらに理解が深まります！