JavaScriptのif文の使い方を学ぼう
本記事では、JavaScriptのif文の基本的な使い方について説明します。プログラミング初心者の方でもわかりやすいように、具体例や図解を交えながら説明していきます。
if文の基本構造
if文は、特定の条件が満たされている場合にのみ実行されるコードブロックを定義するために使用します。基本構造は以下の通りです：
if (条件) {
// 条件が満たされた場合に実行されるコード
}
具体例を見てみましょう：
let num1 = 10;
let num2 = 5;
if (num1 > num2) {
console.log("num1はnum2より大きい");
}
この場合、num1はnum2より大きいので、条件が満たされ、「num1はnum2より大きい」と表示されます。
アスキーアート：
条件がTrueの場合
┌─────────────┐
│ if (条件) │
│ { 実行する }│
└─────────────┘
↓
条件がTrueの場合 実行する
else文の追加
if文だけでなく、条件が満たされない場合に実行されるelse文も追加できます。
if (条件) {
// 条件が満たされた場合に実行されるコード
} else {
// 条件が満たされない場合に実行されるコード
}
具体例：
let num1 = 10;
let num2 = 10;
if (num1 > num2) {
console.log("num1はnum2より大きい");
} else {
console.log("num1はnum2と等しいか小さい");
}
この場合、num1とnum2は等しいので、「num1はnum2と等しいか小さい」と表示されます。
アスキーアート：
条件がFalseの場合
┌───────────────┐
│ if (条件) │
│ { 実行する } │
└───────────────┘
↓
条件がTrueなら 条件がFalseなら
実行する ┌────────────┐
│ else │
│ { 実行する } │
└────────────┘
条件がFalseなら elseのコードを実行
else if文の活用
さらに、複数の条件をチェックする場合はelse if文を使用します。
if (条件1) {
// 条件1が満たされた場合に実行されるコード
} else if (条件2) {
// 条件2が満たされた場合に実行されるコード
} else {
// 条件1と条件2が満たされない場合に実行されるコード
}
具体例：
let num1 = 10;
let num2 = 10;
if (num1 > num2) {
console.log("num1はnum2より大きい");
} else if (num1 === num2) {
console.log("num1はnum2と等しい");
} else {
console.log("num1はnum2より小さい");
}
この場合、num1とnum2は等しいので、「num1はnum2と等しい」と表示されます。
アスキーアート：
複数の条件をチェック
┌───────────────┐
│ if (条件1) │
│ { 実行する } │
└───────────────┘
↓
条件1がTrue
┌───────────────┐
│ else if (条件2)│
│ { 実行する } │
└───────────────┘
↓
条件1と条件2がFalse
┌────────────┐
│ else │
│ { 実行する}│
└────────────┘
↓
最後のコードを実行
実際にコードを書いてみよう
それでは、簡単なif文のデモンストレーションを行いましょう。以下のコードを新しいHTMLファイルに書き込んで、ブラウザで実行してみてください。
<!DOCTYPE html>
<html>
<head>
<title>If文のデモ</title>
<script>
let num1 = 10;
let num2 = 5;
if (num1 > num2) {
alert("num1はnum2より大きい");
} else {
alert("num1はnum2と等しいか小さい");
}
</script>
</head>
<body>
</body>
</html>
このコードを実行すると、num1がnum2より大きい場合は「num1はnum2より大きい」というアラートが表示され、それ以外の場合は「num1はnum2と等しいか小さい」というアラートが表示されます。
以上が、JavaScriptのif文の基本的な使い方です。if文はプログラミングの基礎中の基礎なので、しっかりと理解しておきましょう。次回はさらに複雑な条件分岐について紹介しますので、お楽しみに！
タイムスタンプ
1 00:00:01,310 --> 00:00:12,200 [音楽]
2 00:00:08,830 --> 00:00:15,519 a 邸ですね
3 00:00:12,199 --> 00:00:15,519 キューブですね行きましょうか
4 00:00:15,769 --> 00:00:23,480 もし何なでだったらダメですよ
5 00:00:19,250 --> 00:00:25,870 特定の条件を満たされている時だ稽古の中身が実行される
6 00:00:23,480 --> 00:00:28,030 ってことですね
7 00:00:25,870 --> 00:00:29,859 もし何何だったら
8 00:00:28,030 --> 00:00:31,550 でこの中身何何
9 00:00:29,859 --> 00:00:34,179 をするん
10 00:00:31,550 --> 00:00:42,670 単純な感じですね
11 00:00:34,179 --> 00:00:43,980 じゃあ例えばもし何がたら何する簡単なので言うと変数があって変数を比べてその結果
12 00:00:42,670 --> 00:00:48,390 が
13 00:00:43,979 --> 00:00:56,390 正しければその結果通りであればその中身を実行する
14 00:00:48,390 --> 00:00:59,620 っていうこと条件が満たされればねっていうことで8な6時には銃が入ってて
15 00:00:56,390 --> 00:01:01,210 ナミネには子が入っていると
16 00:00:59,619 --> 00:01:04,620 もし
17 00:01:01,210 --> 00:01:07,769 num 1のほうが斜めにより勃起ければ
18 00:01:04,620 --> 00:01:10,859 この中身を実行しなさい
19 00:01:07,769 --> 00:01:14,908 もしお金がなければ実行されないねっ
20 00:01:10,858 --> 00:01:20,879 今回の場合ナム市の方が自由だからこれ中ね
21 00:01:14,909 --> 00:01:25,490 でナムにはこれは後だから正しいですよ除菌満たされてますので
22 00:01:20,879 --> 00:01:28,629 身になります true になるのでこの中が実行される
23 00:01:25,489 --> 00:01:28,629 っていうことねっ
24 00:01:29,180 --> 00:01:35,820 l ズっていうのもあります
25 00:01:31,650 --> 00:01:38,490 if 何さっきあの条件がありましたけれども
26 00:01:35,819 --> 00:01:39,879 そうじゃなければってもう一方の条件
27 00:01:38,489 --> 00:01:45,489 を
28 00:01:39,879 --> 00:01:48,819 まそうじゃなければの中身を変えてあげることができるんですね
29 00:01:45,489 --> 00:01:51,939 そうそうたとえばさっきの場合だったら
30 00:01:48,819 --> 00:01:54,879 えっとさっきと同じようなね
31 00:01:51,939 --> 00:01:58,780 前で言うとナム市には中1位テテ
32 00:01:54,879 --> 00:02:02,489 ラムにには12が入っているよと
33 00:01:58,780 --> 00:02:05,359 でナム市がこれ中ですよね
34 00:02:02,489 --> 00:02:05,359 でこれ10人
35 00:02:05,560 --> 00:02:17,469 てもしえっとナム市の方がナムによりを聞ければこれが入っ
36 00:02:13,419 --> 00:02:20,049 この中身が表示されると実行されます
37 00:02:17,469 --> 00:02:22,710 でもそうじゃなければ
38 00:02:20,050 --> 00:02:27,750 こっちが表示されると
39 00:02:22,710 --> 00:02:29,379 いうことまぁ今回は何も1の方が大きい
40 00:02:27,750 --> 00:02:32,530 くわないですね
41 00:02:29,379 --> 00:02:35,900 なのでこの l 頭の中が
42 00:02:32,530 --> 00:02:39,039 実行されるわけです
43 00:02:35,900 --> 00:02:39,039 fl つ
44 00:02:39,680 --> 00:02:51,469 l 瑞歩なんか情景をねたくさんたしていくことができるんですよね
45 00:02:45,550 --> 00:02:53,810 今回はちょっと見ていきましょうかナム一度ナムにがこれは中
46 00:02:51,469 --> 00:02:57,500 同じ数ですねー
47 00:02:53,810 --> 00:03:02,640 同じ数なのでもし
48 00:02:57,500 --> 00:03:07,259 num 1がナムにより大きければこの中
49 00:03:02,639 --> 00:03:11,669 で l ずちょっとこれ開きすぎてますけどこれ半角スペースですね
50 00:03:07,259 --> 00:03:14,649 半角スペースでエレ瑞歩 num ==
51 00:03:11,669 --> 00:03:17,329 これね同じって意味ね
52 00:03:14,650 --> 00:03:21,210 南部一度な無人か
53 00:03:17,330 --> 00:03:25,750 同じであればこの中身を実行する
54 00:03:21,210 --> 00:03:30,159 で l ずどれにも当てはまらない場合はこれを実行する
55 00:03:25,750 --> 00:03:33,460 今回の場合はこれ l 水二重閉じ
56 00:03:30,159 --> 00:03:36,818 もしこれと何メちなみにガーター
57 00:03:33,460 --> 00:03:42,689 同じであればこの条件を満たしてるじゃないですか
58 00:03:36,818 --> 00:03:42,688 なのでこの中身が実行されるというわけです
59 00:03:42,699 --> 00:03:52,750 このまああの
60 00:03:45,430 --> 00:03:54,879 条件の比較演算子とかもロンリーん雑誌と呼ばれるものが色々ありますのでこちらです
61 00:03:52,750 --> 00:03:57,870 ねいろいろ google で検索して
62 00:03:54,878 --> 00:04:02,669 javascript 比較演算子
63 00:03:57,870 --> 00:04:07,860 java 助けると論理演算してやるとわかりやすい解説がいろいろあると思いますの
64 00:04:02,669 --> 00:04:09,879 でちょっと見てみてくださいあのカップの中にカッコの中であの if の次に続け
65 00:04:07,860 --> 00:04:12,270 られるような
66 00:04:09,879 --> 00:04:12,269 んですね
67 00:04:13,650 --> 00:04:17,790 はいそれではですねえと if
68 00:04:16,949 --> 00:04:22,139 の
69 00:04:17,790 --> 00:04:26,250 デモンストレーションいきましょうか new ファイルを作ってください
70 00:04:22,139 --> 00:04:29,680 これは if . html でいいですかね
71 00:04:26,250 --> 00:04:34,649 二. html で作りましょう
72 00:04:29,680 --> 00:04:37,749 まずは今回簡単にねあのアラートでやっちゃいますけれども
73 00:04:34,649 --> 00:04:38,899 script タグを書きます
74 00:04:37,749 --> 00:04:44,420 で
75 00:04:38,899 --> 00:04:46,649 変数を設定しますね num 1はこれは中にしておきます
76 00:04:44,420 --> 00:04:50,009 レバーのなるには
77 00:04:46,649 --> 00:04:53,549 裏五にしておきます
78 00:04:50,009 --> 00:04:57,610 皮膚が書くときは if カッコ
79 00:04:53,550 --> 00:04:59,889 過去の中根書きますな部がな道が
80 00:04:57,610 --> 00:05:02,110 もし大きければ
81 00:04:59,889 --> 00:05:08,710 8南部により
82 00:05:02,110 --> 00:05:11,350 true の場合ねそれのその条件が満たされている場合はこの格好の中この中括弧の
83 00:05:08,709 --> 00:05:15,159 中が実行されます
84 00:05:11,350 --> 00:05:16,550 でアラートでん例えばここで
85 00:05:15,160 --> 00:05:20,439 es
86 00:05:16,550 --> 00:05:25,689 もしこれが大きければいいですが出る
87 00:05:20,439 --> 00:05:28,389 たんですねじゃあこのファイルを見てみましょうか
88 00:05:25,689 --> 00:05:30,820 fa html を追う yes
89 00:05:28,389 --> 00:05:33,099 できますね
90 00:05:30,819 --> 00:05:36,168 ですこれ大きいですよね
91 00:05:33,100 --> 00:05:39,490 じゃあこれ逆にしてますねー
92 00:05:36,168 --> 00:05:40,879 もしにの方がを聞ければいいです
93 00:05:39,490 --> 00:05:42,370 出ませんね
94 00:05:40,879 --> 00:05:47,589 これが
95 00:05:42,370 --> 00:05:57,360 この条件が満たされてないのでこのイエスは表示されません
96 00:05:47,589 --> 00:05:57,359 そうこの中の条件が満たされている場合のみこの中括弧の中を実行する理由
97 00:05:58,439 --> 00:06:03,160 ok
98 00:05:59,430 --> 00:06:05,728 って次にですねこの l ず
99 00:06:03,160 --> 00:06:07,230 満たされていない場合は
100 00:06:05,728 --> 00:06:10,889 こっちになると
101 00:06:07,230 --> 00:06:14,879 初音 l つっていうのは
102 00:06:10,889 --> 00:06:16,710 こうかけるわけねそうじゃない場合じゃんなをしておきましょうか
103 00:06:14,879 --> 00:06:18,240 の
104 00:06:16,709 --> 00:06:21,269 この場合は
105 00:06:18,240 --> 00:06:26,710 えっまあイエスが出ますよね
106 00:06:21,269 --> 00:06:30,060 って今度これを逆にしてこの条件が満たされてないんで
107 00:06:26,709 --> 00:06:34,779 場合はこれは no
108 00:06:30,060 --> 00:06:37,319 さっきは何も表示されなかったですけれどもエルズを変えたことによって脳がいい
109 00:06:34,779 --> 00:06:41,459 表示されました
110 00:06:37,319 --> 00:06:44,370 これでえっと fl ずまあまあよく使いますよね
111 00:06:41,459 --> 00:06:47,680 が出来ました
112 00:06:44,370 --> 00:06:53,040 ですねえっと
113 00:06:47,680 --> 00:06:56,850 l 0エルズ if みたいな使えるんですよねうん
114 00:06:53,040 --> 00:06:58,370 あのエルズじゃなくて l 瑞歩これ
115 00:06:56,850 --> 00:07:00,000 if
116 00:06:58,370 --> 00:07:00,920 num 1
117 00:07:00,000 --> 00:07:03,040 が
118 00:07:00,920 --> 00:07:06,230 まこであって
119 00:07:03,040 --> 00:07:09,379 そうじゃなくても思考ならば l 瑞歩
120 00:07:06,230 --> 00:07:13,670 っていうのがありますちょっと書いてるんでしょじゃあ
121 00:07:09,379 --> 00:07:19,399 8ナム市とナムには中と自由にしますね
122 00:07:13,670 --> 00:07:22,270 今これはえーっと今の段階でやるとどうなるんだろう
123 00:07:19,399 --> 00:07:28,679 脳になりますね
124 00:07:22,269 --> 00:07:29,699 で8まあここが満たされてないのでこれが出て当然じゃないですか
125 00:07:28,680 --> 00:07:32,910 じゃあ
126 00:07:29,699 --> 00:07:34,568 この中間にですね l 水標
127 00:07:32,910 --> 00:07:37,880 入れてみましょう
128 00:07:34,569 --> 00:07:40,740 中間に l ず if を入れるのは
129 00:07:37,879 --> 00:07:43,920 どうしましょうこっこ家が
130 00:07:40,740 --> 00:07:46,720 ここルーズ
131 00:07:43,920 --> 00:07:48,100 スペース付
132 00:07:46,720 --> 00:07:52,440 ですね
133 00:07:48,100 --> 00:07:56,319 で中括弧入れてこうなると
134 00:07:52,439 --> 00:08:01,879 こんな感じで書くというかな
135 00:07:56,319 --> 00:08:03,210 これが見やすいでしょまあ今スペースとかね海峡とか見やすくしようとしているんです
136 00:08:01,879 --> 00:08:06,408 けれども
137 00:08:03,209 --> 00:08:08,349 でえっとこの中にですね
138 00:08:06,408 --> 00:08:13,629 書きます
139 00:08:08,350 --> 00:08:17,550 l 水二の家カッコこれ見たされなる
140 00:08:13,629 --> 00:08:17,550 1とナムにが
141 00:08:17,839 --> 00:08:27,008 同じならば等しければ==で等しければ全く同じであればアラートの
142 00:08:25,610 --> 00:08:29,120 じゃあセーブ
143 00:08:27,009 --> 00:08:31,740 同じだよ
144 00:08:29,120 --> 00:08:34,960 っていうのが出るしてみましょう
145 00:08:31,740 --> 00:08:41,200 えっおうせいでましたねー
146 00:08:34,960 --> 00:08:43,900 ここで比べて言ってナム市が大きければ yes でもとこれは大きくないで次に入っ
147 00:08:41,200 --> 00:08:50,830 てね流れとしてはこうですよ
148 00:08:43,899 --> 00:08:52,029 まずここが正しいかなーって見て正しくないなじゃあ次に入って l 水付でここを
149 00:08:50,830 --> 00:08:54,980 正しいかな
150 00:08:52,029 --> 00:08:57,289 猫がほどこの条件を満たされているかな
151 00:08:54,980 --> 00:09:00,310 を満たされてるねー
152 00:08:57,289 --> 00:09:04,599 アラートせが出たわけですね
153 00:09:00,309 --> 00:09:08,939 さっきこれがなかったからこの下に入ってあなたの脳だったんだけれども
154 00:09:04,600 --> 00:09:12,399 今回は中韓にこれが入ったことで個々の条件が満たされて
155 00:09:08,940 --> 00:09:14,200 あらと線いいになった理由
156 00:09:12,399 --> 00:09:18,850 はい
157 00:09:14,200 --> 00:09:23,939 いかがだったでしょうかこれがね if 文ですい二部はもちろんそのプログラミング
158 00:09:18,850 --> 00:09:26,899 の表中の基本なのでよく覚えておいてください
159 00:09:23,938 --> 00:09:26,899 では以上になります