字幕表 動画を再生する 英語字幕をプリント [BELL RINGS] Hi. So I have so far made three videos in this series about learning to code from the very beginning with p5 and the p5 web editor. And I kind of have been avoiding showing you what happens when you make a mistake, which I really should not have done. That's the thing I really should be showing you right from the beginning, but I didn't. And I also haven't mentioned to use something called code comments. And both of these things are fundamental to how you might create a p5 sketch, one that you might work on over a period time and return to later. So let's first look at the console and errors. So there's this whole extra section down here that I've ignored. I've been talking about this is where you write your code, the Play button executes the code, and this is where you see the result of your code. Well what do you see down here? What you see down here is messages that are things that are related to what's happening in your code that might be a mistake or something that you add that you want to specifically put a message there. So I'm going to show you. There's a function called Print. I'm going to say Print, and I'm going to say Hello. And I'm putting this in Setup because I want this just to happen at the beginning. And this again, I will come back to later. So this being in the code, suddenly in the console, we have this down here. The idea of the console is not something. So if you're making a project that you imagine users using, like a game, you wouldn't put the score of the game here. You would want to draw the score somewhere on the canvas, or there's actually a way you could put the score below the canvas, something for the user to ultimately see. But if you just want to be able to see what the score of the game is and kind of like for yourself while you're developing, the console is for you, the person who's writing the code, or your friend who you're sharing the code with, or your teacher, or whoever. I mean, it's something that anybody using the p5 web editor can see. But when you've finished it and you put it on your own website, which is maybe something I'll show you how to do, that console wouldn't necessarily appear. So in addition to be on to put your own messages, anything that you do wrong is going to be down there. Now, one thing that's really important, notice how noStroke has a capital S? noStroke also doesn't even have any arguments in here, like, it's just open and close parentheses, because there's no way to modify it. That's something I didn't mention. Notice how there's comments here? If I get anything wrong, like if I delete this comma, look at this. Now I'm also getting error messages in here. Now this is-- maybe not. [BUZZ] Oh, buzz, look. Error message. So here's the thing. Whenever you see the red error message. First of all, just take a deep breath. Sometimes that error message is lovely, if it tells you exactly what's wrong and you can-- and it tells you how to fix it. And this might be a case. Uncaught SyntaxError missing parentheses after your argument list, sketch line 11. Oh look, line 11 missing parentheses. Sorry. You know what it really should say? Missing comma. So this is the thing. The thing that's generating the error, the web editor, the JavaScript language, the browser, all of these pieces are figuring out what to put down there. It doesn't always guess correctly. So the nice thing is they can see like, oh, I expected a parentheses. We can kind of like see it there, but we're going to have to guess. What's wrong? It's actually a comma. Sometimes we'll get an error message that totally makes sense. I'm going to change this from strokeWeight with a capital W to strokeweight with a lower case W. And this, I'm not getting such a great error message, but this is a really important one. Uncaught ReferenceError. strokeweight is not defined. Well, but why is it not defined? I watched a video from Daniel Schiffman, and he said that strokeweight is a function from the p5.js library. It's not part of the JavaScript language, but it's a function of the p5.js library, and I can call it in my code if I'm using the p5 web editor, which is true. But because programming is in JavaScript is case sensitive, it doesn't know what it is without the capital W. And notice how the editor is syntax highlighting it for you. So strokeWeight, suddenly it turns blue. This is, by the way, no different than me saying, like, oh, I want to write a function called unicornmagic. Uncaught ReferenceError unicornmagic is not defined. Because it's not a function. It's not part of the p5.js library or any other library that I might be choosing to use as part of my project. There are other functions that you can call up by the way, that are just part of JavaScript inherently, that you get when you use JavaScript. And p5 adds functions to that. So that's an error you're going to see a lot. It's because you misspelled it. Maybe you got a capital wrong, or it's just something you thought was in p5 or some other library you're using, but it's not there at all. So here's an interesting thing. I'm just going to take out all the semicolons, or like some of them. No error message. I'm having like heart palpitations right now, because the semicolons give me comfort. But the truth of the matter is, the semicolons are somewhat optional in JavaScript. They indicate where the end of the line is. The end of a line of code background 100 is-- where is it? Where is it? It's there. But JavaScript can usually figure out where the end the line of code is even if you don't include this, the semicolon. The weird thing is, I'm going to show you something kind of interesting. If I were to put, let's say, rectMode up here on the same line, the code runs just fine the same way. JavaScript actually thinks of that as two lines of code because semicolon means the end of a line, then the next line. But if I delete the semicolon now, all is lost. It can't figure it out. So this is why it's generally good practice to use the semicolons. It's like a safety net. Like, I'm really explicitly saying where the end of the line of code is. But you might really just-- you should have fun and just like not use the semicolons, but I can't help it. And also, I have to do the tidy code thing now. There. OK. [BELL RINGS] All right, I know I said at the beginning of this video that I was going to talk about the code comments, but I'm not going to. That's going to be in the next video. I'm going to do that separately so you can look at them individually, and this video's title should probably just say, like, Console and Error Messages, so you won't turn up in your search. All right, so if you want, the next thing that I think is useful to you in like working on your assignment, your project, for this first set of videos is understanding what code comments are and how to use them. I'll do that in the next video.
A2 初級 1.5: エラーとコンソール - p5.jsチュートリアル (1.5: Errors & Console - p5.js Tutorial) 1 0 林宜悉 に公開 2021 年 01 月 14 日 シェア シェア 保存 報告 動画の中の単語