2.2.2 try-catch-blocks

Summary

この動画スクリプトでは、JavaScriptでのエラー処理について学ぶことができます。エラーが発生してもプログラムの実行を停止させないために、try-catch文とthrowキーワードをどのように使用するかを説明しています。エラーを捉えるメカニズムを紹介し、エラーメッセージをコンソールに出力するデモンストレーションを行い、プログラムの継続的な実行を保証する方法を示しています。

Takeaways

• 🤹‍♂️ JavaScriptのエラーハンドリングは、コードがエラーに遭遇したときにプログラムの実行を停止しないようにすることができます。
• 🔀 try-catch文を使用することで、エラーが発生したコードをtryブロックに記述し、catchブロックでエラーをキャッチして処理することができます。
• ⚙️ tryブロックは、エラーが発生する可能性のあるコードをカッコ内に記述します。
• 🛑 catchブロックは、エラーをキャッチして処理するためのコードをカッコ内に記述します。
• 📌 catchブロックは、エラーオブジェクトを受け取り、その名前は自由につけることができますが、一般的には意味を持ちやすい短い名前が良いです。
• 💡 throwキーワードを使用して、tryブロックからエラーを意図的に投げることができます。
• 🔍 変数宣言がないために発生したエラーを例に取ることで、エラーハンドリングの重要性を説明しています。
• 📃 プログラムがエラーにより停止しないようにするためには、try-catch構文が有効です。
• 🔎 JavaScriptはエラーを投げることを許可し、プログラムの実行を意図的に停止させることができます。
• 🔄 プログラムの実行がエラーにより停止しないようにするためには、エラーをログに出力し、プログラムを継続させることが重要です。

Q & A

JavaScriptでのエラーハンドリングはどのように機能するのですか？

JavaScriptのエラーハンドリングは、try-catch文を使って行われます。tryブロックにエラーが発生したコードを入れて、catchブロックでそのエラーをキャッチします。

throwキーワードは何をするために使われますか？

throwキーワードは、エラーを明示的に投げるために使われます。これにより、tryブロック内でエラーを発生させ、catchブロックに投げることができます。

エラーをキャッチするために使われるcatchブロックの構造はどのようになっていますか？

catchブロックはcatchキーワードから始まり、それに続けてエラーオブジェクトをキャッチするためのパラメーターを括弧で囲みます。その後、エラーを処理するためのコードを記述します。

エラーオブジェクトの名前はどのように選ぶべきですか？

エラーオブジェクトの名前は、短く意味のあるものにすることが推奨されています。一般的には'err'や'error'といった名前が使われます。

エラーが発生した場合に、プログラムの実行が停止してしまうのを防ぐ方法は何ですか？

エラーが発生したときにプログラムの実行を停止しないようにするためには、try-catch構文を使用します。これにより、エラーが発生してもプログラムは継続して実行されます。

JavaScriptでエラーを有意図的に投げるにはどうすればいいですか？

JavaScriptでエラーを意図的に投げるには、throwキーワードを使用し、それに続けてエラーを構築するためのエラーコンストラクターを使います。

tryブロック内で発生したエラーをcatchブロックでどのように処理するのですか？

catchブロックでは、キャッチされたエラーオブジェクトを使って、エラーメッセージを出力したり、何らかの対応をすることができます。

エラーハンドリングの利点は何ですか？

エラーハンドリングの主な利点は、プログラムの実行がエラーによって中断されることを防ぐことです。これにより、プログラムの安定性と信頼性が向上し、エラーが発生したとしても必要な操作を継続できます。

エラーハンドリングの仕組みを理解するために、どのようなコード例が紹介されましたか？

エラーハンドリングの仕組みを説明するために、スクリプトでは未宣言の変数を使用してエラーを引き起こすコード例と、意図的にthrow文を使ってエラーを投げるコード例が紹介されました。

エラーメッセージを出力する際、どうやってエラーをキャッチするのですか？

エラーメッセージを出力するためには、catchブロック内でキャッチされたエラーオブジェクトを使用します。エラーオブジェクトには、発生したエラーの詳細が含まれているため、それを使用してエラーメッセージをコンソールに表示することができます。

プログラムの実行が継続するかどうかを確認するために、どうすればいいですか？

プログラムの実行が継続するかどうかを確認するためには、catchブロックの最後に、プログラムの実行を継続するというメッセージを出力します。エラーが発生しても、このメッセージが表示されることがプログラムの実行を継続していることを確認する手がかりとなります。

Outlines

00:00

🚀 JavaScriptエラーハンドリングの基礎

この段落では、JavaScriptにおけるエラーハンドリングの基本的な概念について学ぶことができます。エラーが発生した際にプログラムの実行を継続できるよう、JavaScriptはthrowとcatchというキーワードを提供しています。 試すコードブロックを「try」ブロックにラップし、発生したエラーを「catch」ブロックで捕捉する方法が説明されています。また、throwキーワードを使用してプログラムからエラーを明示的に投げ出すこともできます。 エラーが発生し、コンソールにエラーメッセージが表示された後、プログラムは引き続き実行され、他の重要なタスクを実行することができます。 このセクションを通じて、JavaScriptのエラーハンドリングの仕組みと、その利点を理解することができます。

05:01

📝 エラーオブジェクトの扱いとプログラムの継続

この段落では、catchブロックで捕捉されたエラーオブジェクトの扱い方法と、プログラムの継続について学ぶことができます。catchブロックでは、エラーオブジェクトを受け取り、その情報を使用して、エラーメッセージを出力するなどの処理を実行できます。 また、エラーを投げるtryブロック外で発生したエラーはcatchブロックでは捕捉できませんが、エラーオブジェクトを適切に使用することで、プログラムの実行を継続させることができます。 このセクションでは、エラーをプログラムの中断にせず、柔軟に処理する方法を学ぶことができます。

Keywords

💡catch

「catch」は、JavaScriptにおけるエラーハンドリングにおいて使用されるキーワードで、エラーが発生した際に特定のコードブロック（catchブロック）を実行することができます。このキーワードは、エラーを「キャッチ」（捉える）という行為を意味し、エラーが発生した時点でプログラムの実行を停止せず、代わりにエラーを処理する手続きを続けることができます。 例えば、スクリプトの例では、「catch」ブロックを使って、未宣言の変数を使用しようとする際に発生するエラーをキャッチし、エラーメッセージをコンソールに表示する処理を行っています。

💡error handling

「エラーハンドリング」とは、プログラムの実行中にエラーが発生した際に、プログラムの中断を避け、正常な実行を継続するプロセスのことを指します。このビデオでは、JavaScriptの「try」「catch」文や「throw」キーワードを使用してエラーをハンドルする方法について学ぶことができます。 エラーハンドリングは、プログラムの安定性和信頼性を確保するために重要な役割を果たし、エラーが発生してもユーザーに不利益を与えることなく、プログラムの実行を継続できるようにします。

💡JavaScript

「JavaScript」は、ウェブ開発において広く使用されるスクリプト言語であり、動的なウェブページを作成するために使用されます。このビデオでは、JavaScriptのエラーハンドリングに関する概念について説明しており、特に「try」「catch」文や「throw」キーワードを使用してエラーを処理する方法について学ぶことができます。 JavaScriptは、多くのウェブアプリケーションにおいて必須の要素であり、エラーハンドリングの仕組みを理解することで、より高品質なコードを書くことができます。

💡throw

「throw」は、JavaScriptにおいてエラーを明示的に投げるために使用されるキーワードです。エラーが発生したと判断された時点で、プログラムの実行を中断して、エラーを「投げる」（throw）ことができます。このキーワードを使用することで、エラーを生成し、それをキャッチして処理するエラーハンドリングパターンを構築することができます。 例えば、スクリプトの例では、「throw」キーワードを使用して、未宣言の変数を使用しようとする際に「ReferenceError」を投げ、そのエラーを「catch」ブロックでキャッチして処理する様子が示されています。

💡try block

「tryブロック」は、JavaScriptにおけるエラーハンドリングにおいて使用されるコードブロックで、エラーが発生する可能性のあるコードを包裹します。このブロックの中でエラーが発生した場合、それに対応する「catch」ブロックが実行され、エラーを処理することができます。 このビデオの例では、「tryブロック」内で未宣言の変数を使用するコードが含まれており、その結果として「ReferenceError」が発生します。このエラーは「catchブロック」でキャッチされ、エラーメッセージをコンソールに表示する処理が行われます。

💡error object

「エラーオブジェクト」は、JavaScriptにおいてエラーが発生した際に生成されるオブジェクトであり、エラーに関する情報を提供します。このオブジェクトは、エラーの種類、エラーが発生した場所、エラーメッセージなどの情報を含んでおり、「catch」ブロック内で参照して使用することができます。 ビデオの例では、「catchブロック」がエラーオブジェクトを受け取り（例えば、変数名`err`として）、エラーメッセージをコンソールに表示する処理を行う様子が示されています。

💡console log

「console.log」は、JavaScriptにおいて使用されるメソッドで、指定されたメッセージやオブジェクトをブラウザのコンソールに表示することができます。このメソッドは、デバッグやログの出力に便利であり、エラーメッセージやプログラムの実行状況を確認する際によく使用されます。 ビデオの例では、「console.log」を使用して、エラーメッセージやプログラムの実行状況（例えば、「There was an error」や「My program does not stop」といったメッセージ）をコンソールに表示する処理が行われています。

💡variables

「変数（variables）」は、JavaScriptにおいて使用されるメモリ内のストレージ単位で、データの値を保持することができます。変数は、プログラムの実行中に何度でも再代入することができ、動的な値の変更やデータの操作に活用されます。 ビデオの例では、未宣言の変数`a`と`b`を使用しようとするコードが示されており、そのために「ReferenceError」が発生する様子が説明されています。

💡ReferenceError

「ReferenceError」は、JavaScriptにおいて発生するエラーのタイプの1つで、存在しない変数や関数を参照しようとした際に発生します。このエラーは、プログラムの実行中に変数の存在を確認することが重要であることを示しており、変数を正しく宣言・初期化しておくことが重要です。 ビデオの例では、「ReferenceError」が発生したことを示すエラーメッセージがコンソールに表示され、エラーハンドリングによってプログラムの実行が継続される様子が説明されています。

💡code execution

「コード実行（code execution）」は、プログラムのコードが実行されるプロセスを指します。JavaScriptにおいては、コードが順番に実行され、期待される結果が得られることが求められます。しかし、エラーが発生するとプログラムの実行が中断されることがあります。 このビデオでは、「try」「catch」文を使用することで、エラーが発生した場合でもプログラムの実行を継続することができるエラーハンドリングの方法が説明されています。

💡error message

「エラーメッセージ（error message）」は、エラーが発生した際に表示されるメッセージであり、エラーの原因や問題点をユーザーに伝えるために使用されます。エラーメッセージは、プログラムの改善や問題の解決に役立てる情報を提供することが重要です。 ビデオの例では、エラーメッセージをコンソールに表示することで、エラーが発生したことを確認し、エラーハンドリングによってプログラムの実行を継続する処理が行われています。

💡program continuation

「プログラム継続（program continuation）」は、プログラムの実行がエラーや問題に直面した場合にも、中断されずに継続されることを指します。プログラムの安定性和信頼性を高めるためには、エラーが発生した際に適切に処理し、プログラムの実行を継続することが重要です。 このビデオでは、「try」「catch」文を使用することで、エラーが発生してもプログラムの実行が継続される方法が説明されています。これにより、ユーザーに対してスムーズな体験を提供し、プログラムの安定性を確保することができます。

Highlights

The concept of error handling in JavaScript is introduced, which is crucial for maintaining program execution despite errors.

The video explains the use of built-in statements like 'throw' and 'catch' in JavaScript for error handling.

A comparison is made between catching a ball in a game and catching errors in code, simplifying the concept for better understanding.

The 'try' block is described as a wrapper for code that might throw an error.

The 'catch' block is explained as a mechanism to capture and handle errors thrown by the 'try' block.

The 'throw' keyword is introduced as a way to intentionally generate an error that can be caught by a 'catch' block.

An example is given where undeclared variables cause a reference error, highlighting a common programming issue.

The video demonstrates how to convert an error-stopping script into one that continues execution using 'try' and 'catch'.

A detailed explanation of how the 'catch' block accepts an 'Error' object, named 'Err' in the example, is provided.

Code examples are used to illustrate the process of testing for errors with 'try' and 'catch' statements.

The structure of 'try' and 'catch' syntax is broken down, explaining the placement and purpose of code within these blocks.

The benefits of using 'try' and 'catch' are highlighted, emphasizing the prevention of program halting due to errors.

A demonstration shows how errors can be logged to the console within the 'catch' block, allowing the program to continue running.

The video shows how manually thrown errors with the 'throw' statement are handled similarly to naturally occurring errors.

The final console log message confirms the program's continued execution even after an error has been caught and handled.

The video concludes by reinforcing the importance of understanding error handling in JavaScript for effective program management.

Transcripts

Have you ever watched two people playing a game of catch?

It's a pretty simple game.

One player throws a ball and the other tries to catch it.

You may recall that when your code contains an error, it stops running.

Well, in JavaScript, there are some built in statements to help your

code continue to run even if an error occurs.

They also use keywords like throw and catch.

However they tried to catch the error instead of the ball.

In this video, you will learn about the statements throw, try and

catch and how they can be used to work with errors in JavaScript and

prevent your code from stopping.

This process is more commonly known as error handling.

First, let's explore the try,

catch statement that uses the key words, try and catch.

If a piece of code throws an error, it can get wrapped inside a try block.

Then you can catch the error with the catch block, and use it to do something.

For example, output the error message to the console.

Another key word that you need to be aware of is that throw keyword.

Using the throw keyword,

you can force an error to be thrown from the try block to the catch block.

It's important to remember that you can use the throw

keyword outside the try block, but it will not be possible to catch it.

The catch block accepts something called an error which is an object.

This is the actual error that is thrown from the try block.

While you can name it anything you like, it's best to keep it short and meaningful.

in this case I named it Err.

Let me demonstrate how this works further with some code examples.

Let's define a block of code to be tested for errors using the try catch statement.

Okay, so I have visual studio code open and

a JavaScript file with some sample code.

If I was to run this code now it would return an error and stop working.

This is because the first line uses a console log to output a+b.

But these variables are not declared anywhere.

The second line has a console log to output the string.

This line is never reached and this statement looks to be or free.

When I click the run button, a reference error is output,

telling me that a is not defined.

The JavaScript engine then stops immediately and

does not process the 2nd line.

It's not only JavaScript that throws errors in our programs,

you can actually throw them on purpose.

This is done by typing the keyword throw followed by the keyword new and

then a specific errors constructor.

In this case I use the reference error constructor with a pair of parenthesis at

the end.

When I run the code this time I get a reference error output again.

So how can we prevent errors from stopping our programs?

This is where the try catch syntax makes itself useful.

Let's go to a separate file with code that shows how that works.

But first let's break down the structure of the code.

The try block starts with the try keyword.

And inside of curly braces, you place the code that you think will throw an error.

Next is the catch block which catches the error that the try block produces.

It begins with the catch keyword and in parenthesis you have a built in or

object that you can name whatever you like.

But here I've used err.

Inside the curly braces, you place the code you would like to execute.

In this example,

the try block contains the same console log statement as before to output a+b.

The catch block contains console logs to output two strings.

There was an error and the error was saved in the error log.

Finally, after the catch block, another console log outputs the string,

my program does not stop.

The benefit of using try catch is that even if JavaScript throws an error while

going through our code, it will not stop program execution.

To demonstrate that let's run our code example.

Notice again a reference error is output stating that a is not defined, and

then the two strings from our catch block.

It's important to understand here that the error is output because I logged it to

the console.

The strings output after the error message proving our program continued running.

Finally let me switch tabs to another file, and

demonstrate how JavaScript responds when I manually throw an error.

In this example,

the try block contains the throw statement to throw a new reference error.

In the catch block there are two console logs.

The first one outputs the error object and

the second outputs the string, there was a reference error.

Outside the try catch blocks, the program ends with a console logs to

output the string, My program does not stop.

When I run this code, notice that the reference error is output.

This is the error that was thrown in the try block and

then output using the error object in the catch block.

Once again, this is just the error being output.

The code has not stopped running.

And I can confirm this as the final console log message is output to

the console.

In this video, you've learned how to work with errors in JavaScript.

You learned how you can use try and catch blocks and

the throw keyword to deal with them.

The next time you see a game of catch, think about how you can use a similar

mechanism to help catch errors in your code.