error handling

エラーハンドリング

エラーハンドリングとは、プログラムにおいてエラーが発生した際に、適切な処理を行うことを指します。例えば、サーバーエラーが発生した場合には、ユーザーにエラーメッセージを表示して、再度試行するように促すなどの処理が必要です。エラーハンドリングを適切に行うことで、プログラムの信頼性やセキュリティを高めることができます。

例外処理

プログラムの実行中に予期しないエラーが発生した場合、例外が投げられます。例外は、プログラムが中断されることなく、適切な処理が行われるようにするために利用されます。例外をキャッチすることで、エラー処理を行うことができます。

try {
  // 例外が発生する可能性のある処理
} catch (error) {
  // 例外が発生した場合に実行される処理
}

上記の例では、tryブロックで例外が発生する可能性のある処理を実行し、例外が発生した場合にはcatchブロックでエラー処理を行います。catchブロックには、tryブロックで発生した例外オブジェクトが渡されます。例外オブジェクトには、エラーの詳細情報が含まれます。

エラーハンドリングの実装

次に、Next.js と TypeScript を使って、サーバーエラーが発生した際にエラーメッセージを表示するエラーハンドリングの実装方法を説明します。

function App() {
  const [data, setData] = useState<{ name: string } | null>(null)
  const [error, setError] = useState<Error | null>(null)

  const handleClick = async () => {
    try {
      const response = await axios.get<{ name: string }>('https://api.example.com/user')
      setData(response.data)
    } catch (e: any) {
      setError(e)
    }
  }

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {error && <div>{error.message}</div>}
      {data && <div>{data.name}</div>}
    </div>
  )
}

この例では、axiosを使用して API からデータを取得しています。handleClick関数内で、try-catch構文を使用してエラーをキャッチし、setError関数を呼び出してエラーオブジェクトをセットしています。また、取得したデータをsetData関数を使ってセットし、取得したデータを表示するようにしています。

エラーハンドリングにおいて重要なのは、どのようなエラーが発生したかをユーザーに明確に伝えることです。この例では、エラーオブジェクトのmessageプロパティを表示することで、エラーの原因をユーザーに伝えています。

エラーの種類に応じた処理

API にリクエストを送信した際に、エラーが発生する場合があります。例えば、サーバーがダウンしていたり、リクエストに誤りがあったりする場合です。このような場合、エラーオブジェクトには異なるプロパティが含まれることがあります。

以下の例では、API から返ってくるエラーレスポンスの例を示します。

{
  "error": {
    "message": "Invalid API key",
    "code": 100
  }
}

このような場合、axiosはエラーオブジェクトのresponseプロパティにレスポンスオブジェクトを含めます。エラーハンドリングの際には、このresponseオブジェクトを使ってエラーの種類に応じた処理を行うことができます。

例えば、上記のエラーレスポンスでは、エラーコードが100であることを示しています。この場合、エラーメッセージを表示するだけでなく、ユーザーが API キーを入力していることを確認するための処理が必要になります。

次に、try-catchブロック内でfetchメソッドを呼び出すコードを示します。このコードは、fetchメソッドがエラーをスローした場合に備えて、エラーハンドリングを行います。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error(`Error fetching data: ${error}`)
  }
}

この例では、fetchメソッドでリクエストを送信し、レスポンスが成功（response.okがtrue）の場合に JSON データを取得します。それ以外の場合は、HTTP error! status:というエラーメッセージを表示します。

fetchメソッドがエラーをスローする可能性があるため、try-catchブロックを使用してエラーハンドリングを行います。エラーが発生した場合、catchブロックが実行され、エラーがerrorパラメーターに渡されます。この例では、エラーをコンソールに出力していますが、実際のアプリケーションでは、エラーを適切に処理する必要があります。

以上が、JavaScript でのエラーハンドリングとfetchメソッドの例です。Next.js と TypeScript を使用して、このコードをさらに安全かつ型安全なものにすることができます。