質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

gubi.m
gubi.m

総合スコア9

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

1クリップ

401閲覧

投稿2022/06/03 18:54

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;
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

SurferOnWww

2022/06/03 22:55

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

2022/06/03 23:06

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。