JavaScriptのモジュールとエラー処理 | JavaScript入門

exportとimport

処理をファイルへ分割すると、役割ごとにコードを整理できます。HTMLではtype="module"を指定します。

index.htmlHTML

<script type="module" src="app.js"></script>

math.jsJAVASCRIPT

export function add(left, right) {
    return left + right;
}

app.jsJAVASCRIPT

import { add } from './math.js';
console.log(add(12, 8)); // 20

ローカルサーバーが必要type="module"のファイルは、HTMLをfile://で直接開くとCORS制限で読み込めないことがあります。VS CodeのLive Serverや、php -S localhost:8000などのローカルサーバーから開いてください。

tryとcatch

失敗する可能性がある処理はtryで実行し、エラーが発生したらcatchで利用者向けの表示や記録を行います。

エラーを捕まえるJAVASCRIPT

try {
    const value = JSON.parse('壊れたJSON');
    console.log(value);
} catch (error) {
    console.error('読み込みに失敗しました');
}

throwでエラーを伝える

関数の中で入力値を検証し、問題があればthrow new Errorで呼び出し元へ知らせます。

入力値を検証するJAVASCRIPT

function divide(left, right) {
    if (right === 0) throw new Error('0では割れません');
    return left / right;
}

try {
    console.log(divide(10, 0));
} catch (error) {
    console.log(error.message); // 0では割れません
}

finally

finallyは成功・失敗に関係なく実行される処理です。読み込み表示を終了する処理などに使えます。

後片付けを行うJAVASCRIPT

try {
    console.log('処理を開始');
} catch (error) {
    console.error(error);
} finally {
    console.log('処理を終了');
}

JavaScript入門の講座一覧

exportとimport

tryとcatch

throwでエラーを伝える

finally