00-01 インデントって？

インデントはコードの構造をわかりやすくし、読みやすさや修正のしやすさを向上させます。一連の構造は字下げを行うことで、ブロックとして認識しやすくなり、特にネストが深い場合に処理の流れを視覚的に明確にする役割を果たします。

インデントが適切に設定されていなくても、JavaScriptの場合は動作しますが、可読性向上のために、必ずインデントを入れましょう。

インデントには半角スペースを使用します。JavaScriptでは、1インデントとして半角スペース2個を使用することがデファクトスタンダード（事実上の標準仕様）となっています。

⚠️ PythonやC#などの言語では半角スペース4個が推奨されている。

function setup() {
createCanvas(400, 400);
background(220);
}

// 半角スペース2個（デファクトスタンダード）
function setup() {
  createCanvas(400, 400);
  background(220);
}

// 半角スペース4個（勉強のために、見やすいこちらもアリ）
function setup() {
    createCanvas(400, 400);
    background(220);
}

例題 0-1-1

次のコードがどのようなプログラムなのか一読しなさい。インデントが無いため、解読が難しいですが、ざっと目を通しましょう。

きちんと理解をするために、まずはインデントを入れたプログラムに修正しましょう。

修正が終わったら、コードを読み、どのようなプログラムなのか、想像してみてください。

わからないようであれば、実際に実行して、動作からプログラムを理解してみましょう。

コード

function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
if (mouseIsPressed) {
let x = mouseX;
let y = mouseY;
let r = random(255);
let g = random(255);
let b = random(255);
fill(r, g, b);
noStroke();
ellipse(x, y, random(10, 50));
}
}