JavaScriptの分岐処理（if文）を完全ガイド！初心者でもわかる基本
新人
「JavaScriptで、ある条件に応じて処理を分ける方法ってどうやるんですか？」
先輩
「それはif文を使います。if文を使うと、条件に応じて異なる処理を実行できます。」
新人
「具体的にはどのように使うんですか？」
先輩
「では、if文を使った基本的な例を見ていきましょう！」
1. if文とは？
JavaScriptのif文は、条件式に基づいて異なる処理を実行するための構文です。if文は「もし条件が真なら、この処理を実行」といった流れで動きます。
基本的な構文は以下の通りです：
<script>
if (条件) {
// 条件が真のときに実行する処理
}
</script>
次に、具体的な例を見てみましょう。
2. if文の基本的な使い方
以下の例では、数値が10より大きいかどうかを確認し、その結果に応じてメッセージを表示しています。
<script>
let number = 15;
if (number > 10) {
document.write("numberは10より大きいです。"); // 条件が真のとき実行される
}
</script>
このコードでは、変数numberが10より大きい場合に「numberは10より大きいです。」というメッセージを表示します。
3. if文にelseを使う
if文は、条件が偽の場合に実行する処理を指定するために、elseを使うことができます。elseを使うと、条件が偽のときに実行される別の処理を指定できます。
次のコードでは、numberが10より大きい場合と小さい場合で異なるメッセージを表示しています。
<script>
let number = 5;
if (number > 10) {
document.write("numberは10より大きいです。");
} else {
document.write("numberは10以下です。"); // 条件が偽の場合に実行される
}
</script>
このコードでは、変数numberが10より小さいため、「numberは10以下です。」と表示されます。
4. if文にelse ifを使う
else ifを使うと、複数の条件を順番にチェックすることができます。これにより、異なる複数の条件に対して異なる処理を行うことができます。
次のコードでは、numberの値に応じて異なるメッセージを表示します。
<script>
let number = 15;
if (number > 20) {
document.write("numberは20より大きいです。");
} else if (number > 10) {
document.write("numberは10より大きく20以下です。");
} else {
document.write("numberは10以下です。");
}
</script>
このコードでは、numberが15なので、「numberは10より大きく20以下です。」が表示されます。
5. 条件式の書き方
JavaScriptでは、さまざまな条件式を使ってif文を作成できます。例えば、数値の比較や論理演算子を使って複雑な条件を指定することができます。
次のコードでは、論理演算子&&を使って、2つの条件を両方とも満たす場合に処理を実行する例を示します。
<script>
let number = 15;
if (number > 10 && number < 20) {
document.write("numberは10より大きく、20より小さいです。");
}
</script>
このコードでは、numberが15なので、条件が満たされ、「numberは10より大きく、20より小さいです。」が表示されます。
6. 比較演算子を使った条件分岐
if文では、比較演算子を使って条件を判定することができます。例えば「等しいか」「大きいか」「小さいか」といった条件を指定できます。
主に使われる比較演算子には、==、===、>、<などがあります。
<script>
let score = 80;
if (score >= 80) {
document.write("合格です");
}
</script>
このように、条件に応じて処理を分けることで、より実用的なプログラムを作ることができます。
7. 真偽値を使ったif文の書き方
JavaScriptでは、trueやfalseといった真偽値を使って条件分岐を行うこともできます。これはログイン状態やチェックの有無などを判断する際に便利です。
条件式がtrueの場合のみ処理が実行されるため、シンプルで読みやすいコードになります。
<script>
let isLogin = true;
if (isLogin) {
document.write("ログイン中です");
}
</script>
このように、真偽値を使うことで直感的に条件分岐を書くことができます。
8. 入力値によって処理を変える実践例
if文は、ユーザーの入力に応じて処理を変えるときによく使われます。フォーム入力やボタン操作と組み合わせることで、実用的な機能を実装できます。
例えば、入力された年齢によってメッセージを変更することができます。
<script>
let age = 18;
if (age >= 20) {
document.write("成人です");
} else {
document.write("未成年です");
}
</script>
このように、条件に応じて表示内容を変えることで、ユーザーにわかりやすい動的なページを作ることができます。
