Webサイトを作っていると、必ず遭遇するのが「エラー」です。画面が真っ白になったり、ボタンを押しても反応しなくなったり。初心者の方はエラーが出るたびに焦ってしまうかもしれませんが、実はプロの開発者は「エラーが出ることを前提」にコードを書いています。今回は、ただエラーを避けるのではなく、エラーと上手につきあうための考え方を解説します。
エラーは「予想外」ではなく「予期すべきもの」
プログラムの世界では、通信の失敗やユーザーの入力ミスなど、自分ではコントロールできないことが頻繁に起こります。例えば、外部からデータを取得しようとしたとき、インターネットが切れていたらどうなるでしょうか？ エラーハンドリングとは、そうした「うまくいかない可能性」をあらかじめ想定して、失敗したときの逃げ道を用意しておくことです。
try-catchで「転ばぬ先の杖」を用意する
JavaScriptで最も基本的な手法が try-catch文 です。これは「とりあえず試してみて、ダメだったら別の処理をする」という仕組みです。
例えば、サーバーから情報を取ってくる処理をtryの中に書き、もし失敗したらcatchの中で「今は情報を表示できません」というメッセージをユーザーに伝えるようにします。こうするだけで、画面全体がフリーズする最悪の事態を防ぐことができます。
ユーザー体験（UX）を損なわないための工夫
エラーが起きたとき、技術的な専門用語（「Uncaught TypeError」など）をそのまま画面に表示するのは避けましょう。ユーザーはそれが何を意味するのか分かりません。
代わりに、「親切なエラーメッセージ」を表示するように心がけてください。例えば、「通信エラーが発生しました」という言葉に加えて、「再読み込みボタン」を近くに配置するだけで、ユーザーは「どうすればいいか」が分かり、離脱を防ぐことができます。エラーハンドリングは、単なるバグ対策ではなく、サービスを使いやすくするための「おもてなし」でもあるのです。
まずは「もしも」を一つ書き足すことから
最初から完璧なエラー対策をする必要はありません。まずは、あなたが書いているコードの中で「ここが失敗したら困るな」と思う場所を探してみてください。例えば、フォームの入力チェックや、画像を読み込む処理です。
「もし〜だったら」という条件分岐を一つ追加するだけで、あなたのコードは格段に安定します。エラーを恐れず、むしろ「エラーが起きたときの親切な対応」を考える楽しさを知れば、あなたは一歩先のフロントエンドエンジニアになれるはずです。まずは小さな「もしも」の準備から始めてみましょう。