年末まで毎日webサイトを作り続ける大学生 〜13日目 try...catch...finallyに触れる〜

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強していたんですが、中級編をやる前に見落としていたページがありました。
try...catch...finallyです。エラーを拾ってくれるのはわかったんですが、使い分けがいまいち分かっていません。果たしてtry文は乱用していいものなのか・・・？
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は13日目。(2019/10/31)
よろしくお願いします。

サイトURL

• https://sin2cos21.github.io/day13.html

やったこと

冒頭にある通りtry...catch...finallyを触ってみました。
エラーを出すためにわざと宣言していない変数「random2」をthrowに投げています↓

<input type="text" id="checkData2" placeholder="半角数字のみ入力可">
    <input type="button" id="checkButton2" value="送信"><br>
    <p id="output"></p>

document.getElementById('checkButton2').addEventListener('click', function () {
            try {
                alert('tryです');
                let checkNumber2 = document.getElementById('checkData2');
                let random = Math.floor(checkNumber2) * 100;
                throw random2;
            } catch (e) {
                document.getElementById('output').textContent = ('例外: ' + e);
            } finally {
                document.getElementById('output').innerHTML += '<br>finallyです。使ってくれてありがとう！';
            }
        });

finallyはエラーがあろうとなかろうと表示されます。便利ですなぁ〜

おまけ

入力した文字がちょうど3文字じゃないといけない入力欄も作りました。
ここ最近似たようなメソッドを多用していますが、そろそろオブジェクトをマスターしてもうちょっとアプリっぽくしたいな。

 <input type="text" id="checkData" placeholder="3文字のみ入力可">
    <input type="button" id="checkButton" value="送信"><br>

そうです。lengthが活躍してくれました。そして関数は一つにまとめず機能は分離することを心がけました(clearnDataのこと)↓

document.getElementById('checkButton').addEventListener('click', checkData);

        function checkData() {
            let checkNumber = document.getElementById('checkData');
            if (checkNumber.value.length !== 3) {
                alert('入力は3文字まで!');
                clearnData(checkNumber);
                checkNumber.focus();
            } else {
                alert(checkData.value + 'は3文字だね。いい感じ！');
                clearnData(checkNumber);
            }
        }

        function clearnData(checkNumber) {
            checkNumber.value = '';
        }

try...とおまけのgifです ↓

感想

今日はオブジェクトもちらっと勉強したんですが強敵ですね・・・。ただ、関数あるのになんでオブジェクト使うの？という疑問は解消されました。
- オブジェクト → 値を収める名前付きコンテナ
- 関数 → アプリケーションを実行可能にする手続き
我らがMDNのおかげでやっと関数が理解できた気がします。MDNありがとう・・・！

最後まで読んでいただきありがとうございます。
明日も投稿しますのでよろしくお願いします！

参考

1. 制御フローとエラー処理 - JavaScript | MDN (https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)

とても勉強になります。MDNさんありがとうございます！