エラーを表示させよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2名前を表示しよう

このチャプターでは、文字を描画するよ。

2. 1 写してみよう

//最初に一回だけ呼び出される初期設定
 function setup() {
 createCanvas(400, 400);
}

//繰り返し呼び出される処理
 function draw() {
  background(220);
				  
  textSize(30);
  textAlign(CENTER);
  text("KIRAMEKI TARO", 200, 150);
  text("きらめき 太郎", 200, 250);
 }

コードがかけたら実行してみよう。
12行目KIRAMEKI TAROと13行目にきらめき太郎の部分に自分の名前に置き換えてみてね。
プレビューボタンで自分の名前が表示されたらOKだよ。

---

2. 2 コードの解説(1−1)

//最初に一回だけ呼び出される初期設定
 function setup() {
  createCanvas(400, 400);
 }

createCanvasでキャンバスの大きさを幅400px/高さ400pxに設定しているよ。

createCanvas(値1, 値2)

キャンバス要素を作成し、その寸法をピクセル単位で設定します。

値1： キャンバスの幅
値2： キャンバスの高さ

---

2. 3 コードの解説(1−2)

//繰り返し呼び出される処理
 function draw() {
  background(220);
				  
  textSize(30);
  textAlign(CENTER);
  text("KIRAMEKI TARO", 200, 150);
  text("きらめき 太郎", 200, 250);
}

backgroundで背景を灰色を設定し、文字の大きさ・位置を指定しているよ

background(値1)

背景に使用する色を設定します。デフォルトの背景は透明
値1:

textAlign(値1, 値2)

値1: 水平方向の配置、LEFT、CENTER、またはRIGHT
値2: 垂直方向の配置、TOP、BOTTOM、CENTER、またはBASELINE

textSize(値)

現在のフォントサイズを設定します。このサイズは、以降のtext（）関数の呼び出しで使用されます。フォントサイズはピクセル単位で設定。

text(値1, 値2, 値3)

画面にテキストを描画します。

値1 : 表示する文字列
値2 : テキストのx座標
値3 : テキストのy座標

---

チャプター3エラーを出してみよう

このチャプターでは、間違った書き方をした場合のエラーの表示を確認するよ。

ここまでの見本9

3. 1 変更しよう

function draw() の後ろの { を消してみよう

				   }
				 
   //繰り返し呼び出される処理
-  function draw() {
    background(220);
				 
    textSize(30);

			   }
			 
   //繰り返し呼び出される処理
+  function draw() 
    background(220);
			 
    textSize(30);

コードが書けたら実行してみよう。エラーの原因でありそうな箇所が色づくはずなので確認しよう。

3. 2 エラー表示内容の説明

エラー表示には次のようなことが書かれているね。

</pre>
Uncaught SyntaxError: Unexpected identifier (sketch: line 8)
</pre>

• 表示の最後にあるline8は8行目の意味
• Unexpected identifierは「構文にまちがいがある」という意味
  • 構文とは、簡単に言うと書き方のルール

チャプター4別のエラーも出してみよう

このチャプターでは、間違った書き方をした場合のエラーの表示を確認するよ。

ここまでの見本10

4. 1 変更しよう

function draw() の後ろの { は、元に戻して、12行目の " を削除してみよう

   }
				 
   //繰り返し呼び出される処理
-  function draw() 
     background(220);
				 
     textSize(30);
     textAlign(CENTER);
-    text("KIRAMEKI TARO", 200, 150);
     text("きらめき 太郎", 200, 250);
   }

   }
				 
   //繰り返し呼び出される処理
+  function draw() {
     background(220);
				 
     textSize(30);
     textAlign(CENTER);
+    text("KIRAMEKI TARO, 200, 150);
     text("きらめき 太郎", 200, 250);
	   }

コードが書けたら実行してみよう。赤くエラーになることが確認できるとOKだよ。

4. 2 エラー表示内容の説明

エラー表示には次のようなことが書かれているね。

</pre>
Uncaught SyntaxError: Invalid or unexpected token (sketch: line 12)
</pre>

• 表示の最後にあるline12は12行目の意味
• Invalid or unexpected tokenは「書き方にまちがいがある」という意味

---

チャプター5完成

ここまでの見本11

5. 1 コーディングのコツ

プログラミングは細かいところがかけていないと、エラーや警告で表示されるんだ。
よくあるのが、{ } の数があってないことや各行末尾に ; の書き忘れが多いよ。黄色・赤色がついたら、示された前後の行もカリキュラムと見比べてチェックしてみよう。 またコーディングの途中で、ショートカットでインデントを調整したりすると、コードチェック時にみやすくなるよ。

ショートカットキー

パソコンには、キーボード操作のショートカットが用意されているんだ。操作取り消しやコメント切替のショートカットを使ってみよう

Mac	Windows	説明
Command + a	Control + a	全て選択
Command + c	Control + c	コピー
Command + x	Control + x	切り取り
Command + v	Control + v	貼り付け
Command + z	Control + z	直前の操作を取り消す
Command + /	Control + /	コメント切替
Shift + tab	Shift + tab	インデントを揃える

インデントとは

インデントとは、プログラムの構造を見やすくするために行などを、空白文字によって字下げすることだよ。

プログラムでは、行頭のスペースやタブといった空白文字を無視することになっているので、インデントをつけることができるよ。

プログラミングする時は、開始タグと終了タグの関係を把握しやすいようにインデントをつけることが一般的なんだ。

上の例のように、{ } ごとにインデントをつけることで、開始 {と 終了} が縦にそろって見やすくなるよ。

一般的には インデントは2文字か4文字が推奨されてるんだ、p5.jsでは、 Shift + tab で2文字分、字下げしてくれるよ。

5. 2 カスタムしてみよう

200, 150 や 200, 250 の数値を好きな数値に変えてみよう。 createCanvas()の数値400以内にしてね