js,jqueryのエラー(Uncaught SyntaxError: Unexpected token '<')

js、jqueryのエラーが消えずに困っています。

下記のお絵描きアプリを作っているのですが、jsの最初にjqueryでcanvasのサイズ指定をしました。
https://tsuyopon.xyz/2018/09/14/how-to-create-drawing-app-part1/

おそらくjqueryの読み込みが原因ではないかと思うのですが、
「script.js:3 Uncaught SyntaxError: Unexpected token '<' (at script.js:3:1)」というエラーが出ています。

今はscript.jsの先頭にjqueryを読み込んでいるのですが、そこに書くのをやめ、htmlにjqueryを読み込むようにすると、別のエラーが出てしまいます。
「GET http://127.0.0.1:5500/views/jquery-3.6.0.min.js net::ERR_ABORTED 404 (Not Found)
script.js:3 Uncaught SyntaxError: Unexpected token '<' (at script.js:3:1)」

詳しい方がいらっしゃいましたら、教えていただけると大変ありがたいです。

よろしくお願いいたします。

【index.html】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/style.css">

<script src="./jquery-3.6.0.min.js"></script>

<script src="../js/script.js"></script>

</head> <body> <h1>読み込みテスト</h1> <h1>お絵描きアプリ</h1> <div class="canvas_wrapper"> <canvas id="canvas draw-area"></canvas> </div> <div><button id="clear_button"></button></div> </body> </html>

【script.js】

//canvasのサイズ指定
document.ready(function(){
var w = $('.canvas_wrapper').width();
var h = $('.canvas_wrapper').height();
//対象要素.attr(属性, (変更する値))
$('#canvas').attr('width', w);//#canvasのwidthをwにする
$('#canvas').attr('height'. h);
});
//jqueryは、必ず「document.ready(function(){ ここ });」もしくは、「$(function()){ ここ };に書く
//このエラーは、コンソールタブには出ないので注意して確認する！

//①絵を描くために必要な情報の定義
//ページの読み込みが完了したら、コールバック関数が呼ばれる（コールバック関数・・・？）
window.addEventListener('load', function(){
const canvas =document.querySelector('#draw-area');

//描画機能を有効にする
const context = canvas.getContext("2d");

//直前のマウスのcanvas上のx座標とy座標を記録する
const lastPosition = { x: null, y: null };//nullは「何もない」「値が存在しない」という意味

//マウスがドラッグされているか（クリックされたままか）判断するためのフラグ
let isDrag = false;//なぜtrueではない？

//②お絵描きアプリに必要な機能（関数）の定義を行なっている
//絵を描く
function draw(x, y){
if(!isDrag){
//マウスがドラッグされていなかったら処理を中断する
return;//空のreturn文は、『undefined』を返す。関数ブロック内で処理を途中で終了したい時に使用する
}

    //線の状態を定義する
    context.lineCap = 'round';//先端の形状を、丸いラインキャップにする。初期値はbutt(ラインキャップなし)
    context.lineJoin = 'round';//線の接合箇所を丸くする。初期値はmiter（面取りしない）
    context.lineWidth = 5;//線の太さ
    context.strokeStyle = 'black';//色。色・グラデーション・パターン値のいずれかを指定(初期値は#000)

    //書き初めは、lastPosition.x, lastPosition.yの値はnullとなっているため、クリックしたところを開始点としている（←！？）
    //lastPosition.xとlastPosition.yに現在のx,yを記録することで、次にマウスを動かした時に、前回の位置から現在の位置まで線を引くようになる（！？）
    if(lastPosition.x === null || lastPosition.y === null){
        //ドラッグ開始時の線の開始位置
        context.moveTo(x,y);
    } else{
        //ドラッグ中の線の開始位置
        context.moveTo(lastPosition.x, lastPosition.y);
    }
    //context.moveToで設定した位置から、context.lineToで設定した位置までの線を引く。
    // - 開始時はmoveToとlineToの値が同じであるため、ただの点となる。
    // - ドラッグ中はlastPosition変数で前回のマウス位置を記録しているため（！？）、前回の位置から現在の位置までの線（点のつながり）となる
    context.lineTo(x,y);

    //context.moveTo,context.lineToの値を元に実際に線を引く
    context.stroke();
}

});

【style.css】
@charset "uft-8";

.canvas_wrapper{
width: 100%;/pxで指定はできない？/
height: 100%;
border: 1px solid #000;
background-color: aqua;
}

退会済みユーザー

2022/06/03 22:55

コードの表示を直してください。

y_waiwai

2022/06/03 23:06

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

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

回答1件

ベストアンサー

今はscript.jsの先頭にjqueryを読み込んでいるのですが、

*.js に <script> は置けませんが、どうやっていましたか?

htmlにjqueryを読み込むようにすると、別のエラーが出てしまいます。
「GET http://127.0.0.1:5500/views/jquery-3.6.0.min.js net::ERR_ABORTED 404 (Not Found)
script.js:3 Uncaught SyntaxError: Unexpected token '<' (at script.js:3:1)」

jquery-3.6.0.min.js をサーバに置きましたか? views/jquery-3.6.0.min.js が存在しなくて、ウェブサーバのエラーページを読もうとしているかもしれません。
http://127.0.0.1:5500/views/jquery-3.6.0.min.js にブラウザでアクセスしてみて、JavaScript コードのようなものが見えるかどうか確認しましょう。

投稿2022/06/03 22:33

編集2022/06/03 23:19

int32_t

総合スコア21929

gubi.m

2022/06/04 06:25

教えてくださり、ありがとうございます！ .jsに<script＞は置けないのですね(汗) どのファイルもサーバーには置いていません。 http://127.0.0.1:5500/views/jquery-3.6.0.min.js にブラウザでアクセスしようとすると、下記のエラーが出てしまいます。 Cannot GET /views/jquery-3.6.0.min.js 保存場所が違うとかでしょうか？よろしくお願いいたします。

int32_t

2022/06/04 07:24

gubi.m

2022/06/04 08:01

ありがとうございます！ファイルの場所が違っていましたね！今、別のエラーが出て困っています。 Uncaught TypeError: Cannot read properties of null (reading 'getContext') //canvasのサイズ指定 var w = $('.canvas_wrapper').width(); var h = $('.canvas_wrapper').height(); $('#canvas').attr('width', w); $('#canvas').attr('height', h); //①絵を描くために必要な情報の定義 //ページの読み込みが完了したら、コールバック関数が呼ばれる window.addEventListener('load', function(){ const canvas = document.getElementById('#draw_area'); //描画機能を有効にする const context = canvas.getContext('2d'); //直前のマウスのcanvas上のx座標とy座標を記録する const lastPosition = { x: null, y: null };//nullは「何もない」「値が存在しない」という意味 //マウスがドラッグされているか（クリックされたままか）判断するためのフラグ let isDrag = false;//なぜtrueではない？もしわかれば教えていただけないでしょうか。お手数をおかけしますが、よろしくお願いいたします。

int32_t

2022/06/04 08:11

> Uncaught TypeError: Cannot read properties of null (reading 'getContext') それはこの質問のエラーとはまったく別物なので、この質問は解決済みにして別の質問を立ててください。

gubi.m

2022/06/05 01:08

承知しました！教えてくださりありがとうございました！

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