try-catch-finally制御文の概要
プログラムを書いていると予期せぬエラーが発生するのは普通にあることです。エラー発生時にプログラムの処理順や流れを制御して
別の処理を実行するなどの対応策が必要になります。その制御をしてくれるのがトライ キャッチ ファイナリー ステートメントとなります。
予期出来る範囲ならif ステートメントで処理できますが、予測出来ないエラーと共に開発自体に役に立つこともあり、非常に使用頻度が高いので覚えておいて損はありません。
実機サンプル
各ボタンで結果を表示します
正常なコード部分 [document]
誤りのコード部分 [Document]
(ここに答えを表示)
(ここに答えを表示)
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "utf-8">
<title>YWORK : JavaScript : try-catch-finally</title>
</head>
<body>
<p>各ボタンで結果を表示します</p>
<input type="button" value="ボタン1(正常コード)" onclick="onClick1()"><br><!-- #1 -->
<input type="button" value="ボタン2(誤りコード)" onclick="onClick2()"><br><!-- #2 -->
<p id="idAnswer">(ここに答えを表示)</p><!-- #Answer -->
<p id="idAnswer_F">(ここに答えを表示)</p><!-- #Answer_F -->
<script>
document.open();
//********************************************************************************************************
function onClick1(){ //<!-- #1 -->
try{
document.getElementById("idAnswer").innerHTML = '正常コードがクリックされました'; //<!-- #Answer -->
}
catch(myErr){ //try{処理}実行中にエラーが発生したら直ちにcatch{処理}に切り替わる
document.getElementById("idAnswer").innerHTML = myErr; //<!-- #Answer -->
}
finally{ //try{処理}又はcatch{処理}完了後、必ず実行される
document.getElementById("idAnswer_F").innerHTML = 'ボタン1 処理完了しました'; //<!-- #Answer_F -->
}
}
//********************************************************************************************************
function onClick2(){ //<!-- #2 -->
try{
Document.getElementById("idAnswer").innerHTML = '誤りコードクリックされました'; //<!-- #Answer -->
}
catch(myErr){ //try{処理}実行中にエラーが発生したら直ちにcatch{処理}に切り替わる
document.getElementById("idAnswer").innerHTML = 'エラー:' + myErr; //<!-- #Answer -->
}
finally{ //try{処理}又はcatch{処理}完了後、必ず実行される
document.getElementById("idAnswer_F").innerHTML = 'ボタン2 処理完了しました'; //<!-- #Answer_F -->
}
}
//********************************************************************************************************
document.close();
</script>
</body>
</html>
サンプルコードの要点
- try{処理}で基本処理コードを書く
- catch{処理}でエラーが発生した場合の処理を書く
- finally{処理}で処理成功の有無に関わらない最終処理を書く
- catch(引数){処理}の引数でエラー内容を確認できる