JavaScriptのif文で初心者が覚えておくべき6つのコツ
abyblog
「JavaScriptを勉強したけど、もう一度復習しておきたい。」
「初めてif文をやるので、実際に使って定着させたい」
JavaScriptを勉強している人にとって、最初の難関は演算子「for , if . while」などです。
これを実際に使えるようになることが、身につけられたということになります。
この記事では、よく検索されている＝みんなが必要としているif文のコツを紹介いたします。
また、if文をやるところで、覚えておいた方がいいところ、確実に間違えやすくなってしまうところも併せて解説しますね。
これから、JavaScriptを自在に操っていくために、一緒に頑張っていきましょう！
目次（クリックで読みたい部分にジャンプできます）
複数条件はif elseで記述する
複数の条件を記載したい時には、if elseを使って記載します。
簡単にイメージしてみると、
（変数）＝ バナナ
合っていたら、、、、「動きA」
間違っていたら、、、「動きB」
→なので、（変数）がバナナだったら、「動きA」。（変数）がリンゴだったら、「動きB」が行われることになります。
イメージついたでしょうか？
これを、if else に当てはめると、次のようになります。
if(条件式){
合っていた時の動き
}
else{
間違っていた時の動き
}
プログラミングでは、合っている＝true
間違っている=false
のように表されます。これは絶対覚えておきましょう。
では、先ほどのイメージを思い出してください。
「変数」をfruitsとしてif else 文を書いていきます。
const fruits ="りんご"
if(fruits === "ばなな"{
#変数fruitsが「ばなな」だったらここが実行
console.log("ばななが見つかりました");
} else {
#変数fruitsが「ばなな」以外だったらここが実行
console.log("ばなな以外が見つかりました")
}console.log()
これは、ページの開発者ツールの中にある、コンソールから出力されるものです。
①ページの好きなところで、右クリック
②開発者ツール （検証などブラウザによって異なる）を選択。
③コンソールを選ぶ。
以上で表示させることができます！
エラーなどもここで見れるので、何か動かないな？と思ったらここをみるようにしましょう。
上のコードの意味は理解できたでしょうか？
ん？ イコールが２種類あるね。何か違うのかな。
素晴らしい。このような、小さな違いに気づけるあなたはとても成長します。
JavaScriptでは、変数の代入をするときは、=
if文を使うときは、===を使うようになっています。
また、イコールが二つ(==) の場合もあるのですが、これは、最後の章で紹介することにしましょう。
if else は複数組み合わせることもできる
if elseは、複数の条件を適用することもできます。
〇〇だったら、□□だったら、△△だったら、、、
のような感じです。
以下のようにコードを書くことができます。
const fruits = "みかん"
if ( fruits === "ばなな") {
console.log("ばななが見つかりました"
}else if(fruits === "りんご"){
console.log("りんごが見つかりました”）
}else if(fruits === "なし"){
console.log("なしが見つかりました")
}else{
console.log("見つかりませんでした。")
}見ているだけでは、身につかないので、自分のパソコンで実際に書いてみましょう！
if文でorを表すには | | を使う
or とは、「〇〇または、□□」このような言い方を指しています。
JavaScript では、 || を使って表現することができます。
書くときは、次のように書きます。
if ( 条件式A || 条件式B || ...){
#1つ以上の条件を満たすとここが実行
}条件式A、条件式Bのどれか一つでも当てはまれば、{ }内の式が実行されるという仕組みです。
const fruits = "みかん"
if( fruits === "みかん" || fruits === "りんご" ){
console.log("みかん、またはりんごです。)
} else {
console.log("それ以外です。")
}
#↓コンソールに出力される内容
>みかんまたはりんごです。「または」を覚えたら、「かつ」も似ているので一緒に覚えておきましょう。
if文でandを使うには、&&を使う
and は「かつ」を表します。
「〇〇かつ□□」という感じですね。
JavaScriptでは、&&を使って表すことができます。
まずは、文法の方ですね。
if ( 条件式A && 条件式B && ...){
#条件式を全て満たした時にここを実行
}今度は、さっき紹介したorとは違って、全ての条件式を満たした時に、実行されます。
では実際に書いてみましょう。
const num =5;
if ( num >= 0 && num < 10) {
console.log ( "0以上10未満です。);
}else{
console.log ( "それ以外です");
} また、新しい記号が出てきましたね。
>= これは以上を表します。
< こっちが未満ですね。
＝がついているかどうかで、数字を含むかどうか判断できる
if文は三項演算子で一行で書ける
※ここの部分は、実務では使わなくても大丈夫なので、初心者は飛ばしても大丈夫です。
if 文を書くと、行数が増えてしまうものですが、３項演算子を使うと１行でかくことができます。
例えば以下のようなif文があるとしましょう。
let score = 90;
let gokaku;
if(score > 60 ){
gokaku = "合格";
}else{
gokaku = "不合格";
}
console.log(gokaku);
> 合格これを３項演算子によって書くと、以下のようになります。
let score = 90;
let gokaku = score > 60 ? "合格" : "不合格";
console.log(gokaku);
>合格このように３項演算子を使えば、if文を簡単に１行で書くことができるようにmなります。
もし複数条件を入れたい場合は、以下のように書きます。
let score = 90;
let gokaku = score > 60 ? "合格"
:score > 50 ? "追試";
:score > 40 ? "追試＋課題"
:"落第"
console.log(gokaku);
>合格if文でnotは !== で表す
さて、今までは、＝を使ったif文を書いていました。
「〇〇ではない」場合の処理を書きたい場合も合わせて知っておくと便利です。
JavaScriptでは、!==を使って表します。
const fruits ="りんご"
if(fruits !== "ばなな"{
console.log("ばななではありませんでした");
} else {
console.log("ばななが見つかりました")
}こんな感じで書くことができます。
先ほどのif文と書き方はそこまで違いません。
まずは、最初のif文を身につけて、実際に書いてみることをやってみてください。
===と==で違うのは厳密さ
ここまで、if文の使い方をいくつか紹介してきました。
そこで、=== という書き方があったと思います。
=== このイコールの書き方は、他の言語ではあまりみられない、JavaScript特有のものです。
この他にも、実は、==というものもあります。
結論、==は使わないようにしましょう。
その理由、==は===に比べて、厳密さに欠けているからです。
===は厳密な等価性
===は厳密に（全く一緒）左右の値と型を比較します。
1 === 1 //①結果はtrue
1 === "1" //②結果はfalse
1 === true //③結果はfalse①の時は、値と型が同じなので、同じものと判断されます。
②は一見同じようにも見えるのですが、"1"は文字の型として扱われます。なので、数字と文字列で同じものとはなりません。
③の場合も同じように、数値の１と真偽値のtrueが比べられており、違うものとして判断されます。
==は抽象的な等価性
==は、左右の型が異なる場合、型の変換を行い、左右の型を合わせた上で、値の比較を行います。
1 == 1 //①結果はtrue
1 == "1" //②結果はtrue
1 == true //③結果はtrue①の場合は、値とデータの型が同じなので、同じものと判断されますね。
しかし、②以降となるとどうでしょう。
②は、左右のデータの型が異なるため、データ型の変換が行われます。
文字列は暗黙的に 数字に変換されます。なので、これも同じものと扱われてしまいます。
③も型変換が必要です。trueは型変換すると必ず同じものとなってしまいます。なので、結果も同じものとして扱われます。
このルールは複雑で仕様を理解するには、とても大変だと言えます。
だから、if文を使う時は、必ず===を使うようにしましょう。
まとめ
今回は、if文で初心者が覚えておいた方がいい６つのことを紹介しました。
初心者が触れるものとして、配列ものその一つだと思います。
以下の記事で、配列についても解説しています。
合わせて読んでみてください。
