async/await を使った非同期処理の基本

非同期処理とは

非同期処理とは、ある処理が完了するのを待たずに次の処理を実行する仕組みのことです。例えば、サーバーからデータを取得する際、完了するまで待っていると他の処理が止まってしまいます。非同期処理を使えば、データ取得中でも別の処理を進めることができます。

async/await を使うと、非同期処理をより簡潔に書くことができます。

どんなときに使うのか

• API からデータを取得するとき
  • 例: Web サイトで記事一覧を表示するとき
• データベースにデータを保存するとき
  • 例: ユーザーがフォームを送信したとき
• 外部サービスと通信するとき
  • 例: 認証（ログイン・ログアウト）
• 一定時間待つ処理をするとき
  • 例: 画面の読み込み時にローディングを表示

async/await の使い方

async function getData() {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error('エラー:', error);
  }
}

• async を関数につけると、その中で await が使えます。
• await は処理が終わるまで待ちます。
• try/catch を使うとエラーが起きても処理を止めません。

React での非同期データ取得

React では useEffect を使って、コンポーネントが表示されたときにデータを取得できます。

useEffect の基本

useEffect は、コンポーネントのライフサイクルに合わせて特定の処理を実行する React のフック

useEffect(() => {
  console.log("コンポーネントが表示されました");
}, []);

• 第1引数の関数が実行される。
• 第2引数の []（依存配列）が空の場合、最初の1回だけ実行される。

async/await を使ったデータ取得

以下の例では、Supabase からデータを取得する非同期処理を useEffect で実行しています。

useEffect(() => {
  const fetchData = async () => {
    try {
      const { data, error } = await supabase.from("study-record").select("*");
      if (error) throw error;
      setRecords(data);
    } catch (error) {
      console.error("エラー:", error);
    }
  };
  fetchData();
}, []);

まとめ

• async/await は非同期処理をシンプルに書くための構文
• try/catch を使うことで、エラー発生時の対応がしやすくなる
• React の useEffect を活用すると、コンポーネントが表示されたときに非同期データ取得ができる
• useEffect([]) を使うと、初回のみデータを取得できる

async/await と useEffect を組み合わせることで、非同期処理を直感的に管理できます。