javascriptの構文エラーチェックについて

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>Document</title>
8	<script type="text/javascript" src="main.js"></script>
9</head>
10<body>
11	<canvas id="canvas"></canvas>
12</body>
13</html>

javascript
1(function() {
2"use strict"; //厳密なエラーチェックをする
3
4    //画面サイズ
5    const SCREEN_W = 180;
6    const SCREEN_H = 320;
7
8    //キャンバスサイズ
9    const CANVAS_W = SCREEN_W *2;
10    const CANVAS_H = SCREEN_H *2;
11
12    //フィールドサイズ
13    const FIELD_W = SCREEN_W *2;
14    const FIELD_H = SCREEN_H *2;
15
16    const STAR_MAX = 300;
17
18    let canvas  = document.getElementById("canvas");
19    let ctx     = canvas.getContext("2d");
20
21})();

javascriptを別のファイルで書くときに以下のエラーが出ます。
![

初歩的な質問になりますが、ご教授頂けたら幸いです。

行動規範の内容に同意します

回答2件

ie10で動かしてます？
constとか使えない宣言有りますので見なおしてください。

投稿2019/10/02 06:53

編集2019/10/02 06:56

oikashinoa

総合スコア2826

oikashinoa

2019/10/02 09:57 編集

エラー行を特定する為に、即時実行関数で書かずボタンのclickイベントとかで起動するようにしてデバッガーでエラー行特定したら良いですよ。どの行でエラー出たか分かれば、バグの半分は解決します。もし即時実行関数が何かも分からずにコピペしているのであれば、別質問で聞きましょう。 https://developer.mozilla.org/ja/docs/Glossary/IIFE

ntttt

2019/10/02 14:42

javascriptの初学者であまり考えずに定型文のようにコピペしていました。デバックの方法はとても参考になりました。これから参考にさせていただきます。即時実行関数についてももう少ししかっりと調べてみます。色々とアドバイスしていただきありがとうございます。

行動規範の内容に同意します

ベストアンサー

別ファイルをDOMContentLoadedしてから動作させてください

javascript
1'use strict';
2window.addEventListener('DOMContentLoaded', ()=>{
3  (()=>{
4    //画面サイズ
5    const SCREEN_W = 180;
6    const SCREEN_H = 320;
7    
8    //キャンバスサイズ
9    const CANVAS_W = SCREEN_W *2;
10    const CANVAS_H = SCREEN_H *2;
11    
12    //フィールドサイズ
13    const FIELD_W = SCREEN_W *2;
14    const FIELD_H = SCREEN_H *2;
15    
16    const STAR_MAX = 300;
17    
18    let canvas  = document.getElementById("canvas");
19    let ctx     = canvas.getContext("2d");
20    
21  })();
22});