async / awaitを使った非同期処理やエラーハンドリングについて

はじめに

avaScriptで非同期処理を書くとき、これまで .then() や .catch() を使ったPromiseチェーンに苦戦した方も多いのではないでしょうか。
処理がネストして読みにくくなったり、エラー処理が複雑になったりして、「もっと簡単に書けたらいいのに…」と思ったことがあるかもしれません。

そんな悩みを解決してくれるのが async / await です。
これは、Promiseをベースにしつつ、非同期処理をまるで同期処理のように書ける構文です。

この記事では、async / await の基本的な使い方から、よくあるエラー処理の書き方、そして try / catch を使った実践的なパターンまで、初学者の方でも理解できるよう丁寧に解説します。

そもそも「非同期処理」って？

JavaScriptは、基本的に上から順番に処理していきます。

でも、時間がかかる処理 (たとえば、サーバーからデータを取ってくる処理やファイル処理など) は、すぐに終わらないことがありますよね。

こういう「すぐに終わらない処理」のことを非同期処理といいます。

実際のコードで比較してみよう。

同期処理の例（順番通りに実行される）

console.log('1: データを取得します');
console.log('2: データ取得完了');
console.log('3: 次の処理');

// 実行結果
1: データを取得します
2: データ取得完了
3: 次の処理

ここでは setTimeout を使って、2秒後に「2: データ取得完了」が出るようにしています。

このように、すぐに終わらない処理は、あとで実行される

→ これが「非同期処理」です。

asyncとawaitって何？

asyncとは、関数の前につけるキーワードで、「この関数の中では非同期処理が使えますよ！」とJavaScriptに教えるものです。

async function fetchData() {
  // 非同期処理が使える！
}

await とは、async 関数の中で使うキーワードで、「この処理が終わるのを待ってから次に進んでね」と指示します。

const data = await fetch("https://example.com/data.json");

async functionの戻り値はPromiseになる

async を関数の前につけると、その関数は必ず Promise を返す関数になります。

JavaScript が自動的に、関数の戻り値を Promise に変換してくれる仕組みです。

この仕組みのおかげで、非同期処理をより簡単で見やすく書けるようになります。

Promise は「非同期処理の結果を表すオブジェクト」で、次の 3つの状態 を持っています。

async function sayHello() {
  return "こんにちは！";
}

const result = sayHello();
console.log(result);

この関数を実行すると、下記のような出力結果が出ます。

Promise { <fulfilled>: "こんにちは！" }

つまり、async functionの戻り値は、必ずPromiseになります。

上記のreturn "こんにちは！"は、Promise.resolve("こんにちは！") と同じ意味になります。

逆に、async functionが値をthrow した場合、その値をrejectします。

具体的な例

asyncとawaitがないとこのような記述になります。この記述では、ネストが多くて、わかりにくいです。

fetch("<https://example.com/data.json>")
  .then(response => response.json())
  .then(data => {
    console.log("データ取得:", data);
  });

asyncとawaitを記述するとスッキリ書くことができます。他にも、コードが読みやすいというメリットもあります。

非同期処理なのに、同期処理 (普通の順番)みたいに読めるので、バグが起きにくいです。

async function getData() {
  const response = await fetch("<https://example.com/data.json>");
  const data = await response.json();
  console.log("データ取得:", data);
}

getData();

まとめ

もし、「非同期処理でどこに使えばいいか分からない」ってなったら、まずはAPIからデータを取るときに使うのが王道です！

try・catch・throwを使ったエラーハンドリングの基本

プログラムを書いていると、予期しないエラーが発生することがあります。たとえば、ユーザーの入力が不正だったり、サーバーとの通信が失敗したりなどがあります。こうしたエラーを放っておくと、アプリが止まったり、正しく動作しなくなったりしてしまいます。

そんなときに使うのが、**エラーハンドリング (＝エラー処理)**です。

JavaScriptでは主に try / catch / throw を使って、エラーに対処します。

try / catchの基本構文

try {
  // エラーが起こるかもしれない処理
} catch (error) {
  // エラーが起きたときの処理
}

1. try ブロックの中のコードを実行
2. エラーが起きなければ、catchはスキップされる
3. エラーが起きたら、すぐに catchブロックに移動して、エラーに対処する

例

try {
  const user = undefined;
  console.log(user.name); // ❌ エラー：undefinedにはnameがない
} catch (error) {
  console.log("エラーが発生しました:", error.message);
}

このコードの出力は、

エラーが発生しました: Cannot read properties of undefined (reading 'name')

エラーが出ても、アプリは止まらずに安全に続けられるのがポイントです。

throwで自分でエラーを作る

JavaScriptでは、開発者が「これはおかしい！」と判断したタイミングで、エラーを自分で投げる(throw) こともできます。

function checkAge(age) {
  if (age < 18) {
    throw new Error("18歳未満は利用できません！");
  }
  return "利用できます！";
}

この関数を使うときは、try / catchを組み合わせてエラーに備えます。

try {
  const message = checkAge(15);
  console.log(message);
} catch (err) {
  console.log("エラー:", err.message); // 👉 エラー: 18歳未満は利用できません！
}

エラーオブジェクトの中身は？

catch(error) の error は、エラー情報を持ったオブジェクトです。

使えるプロパティ：

finally で最後に必ず実行したい処理を記述する

try / catch のあとに finally をつけることで、エラーの有無に関係なく必ず実行される処理を書くことができます。

try {
  console.log("データ取得中...");
  // ここでエラーが起きるかも
} catch (e) {
  console.log("エラー発生！");
} finally {
  console.log("終了処理を実行します");
}

注意点とコツ

• throwで投げるエラーはnew Error("メッセージ")のように書くと扱いやすい
• 本当に必要な部分だけをtryに包む (広すぎるとバグが見つけにくくなる)
• エラー内容はログに出す・ユーザーにはやさしいメッセージを表示するなど、用途に応じて使い分ける

まとめ