if のあとの波括弧は省略してもいいですか

文法としては省略できますが、慣れるまでは常に書くことをおすすめします。省略したまま処理を 1 行足すと、その行は if の外側に置かれ、条件に関係なく毎回実行されてしまいます。見た目はインデントされているのに動きが違うため、気付きにくいバグになります。

3 つ以上を >= と > のどちらで書くか迷います

「3 つ以上」なら 3 を含むので >= です。「3 つを超えたら」なら 3 を含まないので > になります。迷ったら境目の値を実際に当てはめて、期待どおりの結果になるかを手で確かめてください。境界値を 1 つ試すだけで、向きの間違いはその場で分かります。

else を書かないとどうなりますか

条件を満たさなかったときに何も実行されません。関数の中で使っている場合は return されないので、戻り値が undefined になります。どちらの道でも必ず値を返したいときは、else を書いて受け止めてください。

if 文の基本｜コードで実践

このレッスンで分かること

if (条件) { ... } else { ... } で処理を 2 つに分けられます

条件のカッコに書くのは、true か false になる式です

誰が来ても同じことしか言わない

ここまで書いてきたプログラムは、上から下へ一直線に進むだけでした。何を渡しても、返ってくる言葉はいつも同じです。ですが山田太郎さんのプロフィールサイトを考えると、作品がまだ 1 つのときと 10 個並んだときとで、出したい言葉は違うはずです。この「もし〜なら」を書くための道具が if 文です。

JavaScript

const views = 120;

if (views >= 100) {
  console.log("たくさん見られています");
} else {
  console.log("これから伸ばしましょう");
}
// => たくさん見られています

丸カッコの中の条件が true のときだけ、直後の波カッコの中が動きます。false なら else の波カッコの中が動きます。else は省略できますが、書いておけば「必ずどちらか一方は動く」ことが保証されます。

このコースの課題は関数の戻り値で採点されるので、波カッコの中で return する形をよく使います。

JavaScript

function bioComment(length) {
  if (length >= 50) {
    return "十分な長さです";
  } else {
    return "もう少し書きましょう";
  }
}

return が動いた時点で関数は終わります。ですから 2 つの return のうち、実際に値を返すのは必ず片方だけです。

「以上」と「より大きい」は別物

if でいちばん間違えるのは、ちょうど境目の値です。「100 以上」なら >=、「100 を超えたら」なら > を使います。日本語の 1 文字の違いが、そのまま記号の違いになります。

書き方	意味	`views` が 100 のとき
`views > 100`	100 より大きい。100 を含まない	`false`
`views >= 100`	100 以上。100 を含む	`true`
`views < 100`	100 未満。100 を含まない	`false`
`views <= 100`	100 以下。100 を含む	`true`

この境目の値を境界値と呼びます。バグの大半はここに潜んでいるので、書き終えたら境界値そのものと、その 1 つ手前を手で流して確かめてください。

処理が 1 文だけなら波カッコを省略して書けます。ただし、あとから 1 行足したときに、足した行が条件と関係なく毎回動く事故が起きます。慣れるまでは常に波カッコを書いてください。

よくある間違い

= を 1 つしか書かない — 比較のつもりが代入になり、条件がいつも成立してしまいます

JavaScript

// NG。views に 100 を入れてしまう
if (views = 100) { }

// OK
if (views === 100) { }

片方の道で return を書き忘れる — else の側を書かずに終えると、条件を満たさなかったときに undefined が返ります。どちらの道でも値を返しているか、書き終えたら目で追ってください

このレッスンで分かること

if (条件) { ... } else { ... } で処理を 2 つに分けられます

条件のカッコに書くのは、true か false になる式です

誰が来ても同じことしか言わない

JavaScript

const views = 120;

if (views >= 100) {
  console.log("たくさん見られています");
} else {
  console.log("これから伸ばしましょう");
}
// => たくさん見られています

このコースの課題は関数の戻り値で採点されるので、波カッコの中で return する形をよく使います。

JavaScript

function bioComment(length) {
  if (length >= 50) {
    return "十分な長さです";
  } else {
    return "もう少し書きましょう";
  }
}

return が動いた時点で関数は終わります。ですから 2 つの return のうち、実際に値を返すのは必ず片方だけです。

「以上」と「より大きい」は別物

書き方	意味	`views` が 100 のとき
`views > 100`	100 より大きい。100 を含まない	`false`
`views >= 100`	100 以上。100 を含む	`true`
`views < 100`	100 未満。100 を含まない	`false`
`views <= 100`	100 以下。100 を含む	`true`

処理が 1 文だけなら波カッコを省略して書けます。ただし、あとから 1 行足したときに、足した行が条件と関係なく毎回動く事故が起きます。慣れるまでは常に波カッコを書いてください。

よくある間違い

= を 1 つしか書かない — 比較のつもりが代入になり、条件がいつも成立してしまいます

JavaScript

// NG。views に 100 を入れてしまう
if (views = 100) { }

// OK
if (views === 100) { }

片方の道で return を書き忘れる — else の側を書かずに終えると、条件を満たさなかったときに undefined が返ります。どちらの道でも値を返しているか、書き終えたら目で追ってください

if 文の基本

誰が来ても同じことしか言わない

「以上」と「より大きい」は別物

よくある間違い

要件

入出力例

ヒント

メモ

if 文の基本

誰が来ても同じことしか言わない

「以上」と「より大きい」は別物

よくある間違い

要件

入出力例

ヒント

メモ