Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@r0r0

async/awaitの詳しい使い方 - 中学生でもわかる解説

Posted at

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();

実行すると：

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

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つ

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

書き方のテンプレート

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

まとめ

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

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

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

使い方は簡単：

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

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

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

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?