【6日でできるJavaScript入門】jsファイルの分離とエラー対策
現代のWeb開発では、HTMLとJavaScriptを別々のファイルに分けて管理することが一般的です。これにより、プログラムの再利用性が高まり、保守や拡張も容易になります。ただし、JavaScriptファイルを分離して使う場合には、読み込みタイミングや変数のスコープ、さらにエラー発生時のデバッグ方法など、実装上の注意点も増えます。
ここでは、jsファイル分離の基本から、エラー対策・デバッグの実践までを具体例とともに詳しく解説します。
1. JavaScriptファイルの分離
1.1. JavaScriptファイルの作成と管理
| 項目 | 内容 |
|---|---|
| ファイル拡張子 | .js |
| 文字コード | UTF-8（HTMLと統一するのが基本） |
| 内容 | <script>〜</script>内のJavaScriptをそのまま記述 |
| 例 | main.js（ファイル名は任意） |
JavaScriptファイル例（main.js）
ファイル名： main.js
// メッセージを繰り返し表示する例
let counter = 0;
let timerId = setInterval(function() {
console.log('こんにちは！カウンター: ' + counter);
counter++;
if (counter > 5) clearInterval(timerId);
}, 1000);1.2. HTMLへの読み込み方法と注意点
| 記述場所 | 書式例 | 特徴・注意点 |
|---|---|---|
| 直前 | <script src="main.js"></script> | HTML要素が先に読み込まれるので安全 |
| 内 | <script src="main.js"></script> | 要素取得などでエラーになりやすい。高度な用途向け |
HTML例
ファイル名： lesson30-1.html
<script src="main.js"></script>は、必ずbody閉じタグ直前に記述するのが基本です。これにより、HTML側の要素取得でエラーが発生しません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📝 JSファイル分離サンプル</title>
</head>
<body>
<h2>JSファイルからの出力</h2>
<div id="output">メッセージを表示します</div>
<script src="main.js"></script>
</body>
</html>ブラウザの出力例
デバックコンソールの出力
こんにちは！カウンター: 0
こんにちは！カウンター: 1
こんにちは！カウンター: 2
こんにちは！カウンター: 3
こんにちは！カウンター: 4
こんにちは！カウンター: 5
・
・２．エラー対策の基本
2.1. スコープと変数宣言の注意点
| 宣言方法 | スコープの範囲 | 特徴 |
|---|---|---|
| let | 宣言したブロック（{…}）内のみ | 安全な変数宣言。再宣言や再代入に注意 |
| var | 関数単位（またはグローバル） | ブロックスコープでなく、予期せぬバグの原因になりやすい。 |
| const | 宣言したブロック（{…}）内のみ | 一度代入したら値の変更不可。定数として使う。 |
例：スコープの違いによるエラー
if(true){
let a = 10;
var b = 20;
}
console.log(a); // エラー: aはスコープ外
console.log(b); // OK: bはグローバル2.2. スペルミスや要素取得エラーの防止
- スペルミス防止にはエディタの補完機能を活用しましょう。
- 要素取得（
document.getElementById('id名')など）は、HTML側とID名の不一致に注意。
エラー例：ID名の間違い
// HTML: <div id="output"></div>
let elem = document.getElementById('outputt'); // スペルミスでnullを返す
elem.textContent = "こんにちは"; // エラーになる３．デバッグとエラー調査
3.1. コンソールの活用とconsole.log
- エラー発生時はブラウザのコンソール（開発者ツール）を活用しましょう。
- 変数の中身や処理の流れを追いたい場合は
console.log(変数)を適宜挿入。
| デバッグ方法 | 書式例 | 説明 |
|---|---|---|
| 変数の内容表示 | console.log(変数); | 変数の値を出力する。 |
| エラー行の特定 | コンソールに表示される行番号・内容を確認 | ソースと突き合わせて調査する。 |
| 途中経過の確認 | console.log("ここまで動作") | 処理がどこまで動いたか追跡できる。 |
3.2. 代表的なjsエラー例と対策
| エラー内容 | 主な原因と対策 |
|---|---|
| Uncaught ReferenceError | 変数・関数の宣言ミス、スコープ外の参照 |
| Uncaught TypeError | nullや未定義値に対してプロパティ・メソッド呼び出し。 |
| Unexpected token | 記述ミス（カンマ・セミコロン忘れ、構文エラー） |
サンプル: try-catchでのエラー補足
try {
// エラーが起こりそうな処理
someFunction();
} catch (e) {
console.log("エラーが発生しました: " + e.message);
}まとめ
- JavaScriptファイルの分離は保守性・再利用性を高める必須テクニック。
- HTMLとJavaScriptを正しく連携させるには読み込み位置とID名に注意。
- スコープ、変数宣言、スペルミスがjsエラーの三大要因。const/let/varの違いも理解しておく。
- デバッグにはconsole.logとブラウザの開発者ツールを最大限活用。
- 予期せぬエラーが発生した場合は、エラー内容・行番号・変数の中身を丁寧に調べよう。
こうした基本を押さえれば、jsの分離やエラー対策も安心です。実践的なサンプルでしっかり身につけましょう。