【JavaScript初心者】if文とは?条件分岐をやさしく解説!サンプルコード付き

学習記録

はじめに

JavaScriptを勉強し始めると、最初に出てくるのがif文です。

私も最初は、

「なんだか難しそう…(;^ω^)」

と思っていました

ですが、実際に勉強してみると、

「条件によって処理を変える」

という考え方が分かれば、意外と理解しやすい内容でした。

この記事では、JavaScript初心者向けにif文の基本を分かりやすく紹介します。

if文とは?

if文とは、

条件によって実行する処理を変える仕組み

です。

例えば、

  • 18歳以上なら表示する
  • ログインしていたら画面を表示する
  • 点数が80点以上なら合格と表示する

このように、

「〇〇だったら実行する」

という処理を書くときに使います。

基本の書き方

まずは基本形です。

const age = 20;

if (age >= 18) {
console.log(“成人です”);
}

このコードでは、

年齢が18歳以上なら「成人です」と表示されます。

elseとは?

条件に当てはまらなかった場合の処理を書くのが

else

です。

const age = 15;

if (age >= 18) {
console.log(“成人です”);
} else {
console.log(“未成年です”);
}

このように書くことで、どちらか一方が必ず実行されます。

else ifとは?

条件をさらに追加したいときは

else if

を使います。

const score = 75;

if (score >= 90) {
console.log(“A”);
} else if (score >= 80) {
console.log(“B”);
} else if (score >= 60) {
console.log(“C”);
} else {
console.log(“D”);
}

複数の条件を書きたいときによく使われます。

if文を使う場面

if文を使う場面がたくさんあります。

例えば、

  • ログイン判定
  • ボタンを押した時の処理
  • フォーム入力チェック
  • 商品が在庫切れかどうか
  • 年齢確認

Webサイトやアプリでは欠かせない機能です。

私が意外と理解しやすかった理由

私は勉強する前、

「条件分岐って難しそう(;´・ω・)」

と思っていました。

ですが、

実際にコードを書きながら学習すると、

普段の生活でも似たようなことを考えていると気付きました。

例えば、

if「雨なら傘を持つ」 else「晴れなら持たない」

これも条件によって行動を変えています。

その考え方をコードで書いているだけだと分かってから、理解しやすくなりました。

初心者が気を付けたいポイント

私が勉強していて感じたのは、

動画を見るだけでは覚えられない

ということです。

実際にコードを書いて、

自分で動かしてみることで理解が深まりました。

また、

問題を解きながら進める教材だったので、

「理解したつもり」

で終わらずに学習できたのも良かった点です。

まとめ

if文は、

JavaScriptを勉強するうえで必ず覚えたい基本文法です。

最初は難しそうに感じますが、

「〇〇だったら実行する」

という考え方を理解すると、一気に分かりやすくなります。

私自身も最初は不安でしたが、

実際にコードを書きながら勉強することで理解できました。

焦らず、一つずつ学んでいけば大丈夫です。

よくある質問

Q. if文とelseの違いは?

ifは条件が合った時、elseは条件に合わなかった時に実行されます。

Q. elseは必ず必要ですか?

必須ではありません。条件に合った時だけ処理したい場合はifだけでも書けます。

Q. JavaScript初心者はif文の次に何を勉強すればいいですか?

DOM操作や関数に進むと、Webページを実際に動かせるようになります。

関連記事