0Pricing
TypeScript Academy · レッスン

SuspenseとError Boundaryの型

lazyコンポーネントでReact.Suspenseを使い、堅牢なError Boundary（クラスベース）に型を付けます。unknownのエラーを安全に処理し、リセットパターンを提供します

「SuspenseとError Boundaryの型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全2レッスンが含まれています。

導入

目標: React.lazy と Suspense を使ってコンポーネントを遅延読み込みし、親切なフォールバックを表示して詳細をログに記録する、型付きの Error Boundary を追加します。

  • Suspense = 読み込み中の UI
  • Error Boundary = 実行時エラーの UI
  • unknown 型のエラーを安全に扱う

Lazy と Suspense

React.lazy はコンポーネント型を返します。これを Suspense でラップすると、モジュールの読み込み中にフォールバックをレンダリングできます。

import React, { Suspense } from "react"

const LazyWidget = React.lazy(async () => import("./Widget"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Suspense fallback={<span>Loading…</span>}>
        <LazyWidget />
      </Suspense>
    </div>
  )
}

Lazy props の型付け

props は、インポートしたモジュールの default export から推論されます。呼び出し側も完全に型付けされたままになります。

import React, { Suspense } from "react"

// Ensure props are preserved through lazy
interface ChartProps { title: string; values: number[] }
const Chart = React.lazy(async () => import("./Chart"))

export default function App() {
  return (
    <Suspense fallback={<span>Loading chart…</span>}>
      <Chart title="Sales" values={[10, 20, 15]} />
    </Suspense>
  )
}

ErrorBoundary の型付け

エラーハンドラーを unknown で型付けし、必要に応じて Error に絞り込んでください。React.ErrorInfo を使うとコンポーネントスタックにアクセスできます。

import React from "react"

interface Props { fallback: React.ReactNode }
interface State { hasError: boolean; message?: string }

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false }

  static getDerivedStateFromError(err: unknown): State {
    const msg = err instanceof Error ? err.message : String(err)
    return { hasError: true, message: msg }
  }

  componentDidCatch(error: unknown, info: React.ErrorInfo) {
    // log error & component stack safely
    console.error("ErrorBoundary", error, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <span>Something went wrong</span>
    }
    return this.props.children
  }
}

Boundary の組み合わせ

Suspense（読み込み）と Error Boundary（エラー）を組み合わせます。これらは異なる関心事を扱うため、セクションごとに入れ子にできます。

import React, { Suspense } from "react"
import { ErrorBoundary } from "./ErrorBoundary"

const Page = React.lazy(async () => import("./Page"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <ErrorBoundary fallback={<span>Failed to load page</span>}>
        <Suspense fallback={<span>Loading page…</span>}>
          <Page />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

リセットのパターン

リセットのヒント:

  • key を変更して ErrorBoundary をリセットします。
  • 再取得または再マウントを行う「もう一度試す」ボタンを用意します。
  • フォールバックは小さく、アクセシブルに保ってください。

Boundary の型付けの確認

クイックチェック: 型付きのフォールバックを使って、レンダリング時のエラーをどのように捕捉しますか。

まとめ

まとめ: Suspense は読み込みを処理し、Error Boundary はエラーを処理します。unknown 型のエラーを慎重に型付けし、リセット戦略を用意してください。

よくある質問

「SuspenseとError Boundaryの型」レッスンは無料ですか？

はい。「SuspenseとError Boundaryの型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全2レッスンが含まれています。

「SuspenseとError Boundaryの型」で何を学びますか？

lazyコンポーネントでReact.Suspenseを使い、堅牢なError Boundary（クラスベース）に型を付けます。unknownのエラーを安全に処理し、リセットパターンを提供します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/2です。

「SuspenseとError Boundaryの型」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ジェネリクスと推論を使ったカスタムフック
  2. SuspenseとError Boundaryの型
← TypeScript Academyに戻る