【JavaScript】if文の基本から応用までを網羅。スキルアップ【JavaScript】if文の基本から応用までを網羅。初心者・ド忘れした方にオススメ2022年9月15日こんにちは。様々な条件で処理を変えたり、コンテンツの表示を変えたりと何かとよく使うif文。この記事を見てくださっている方は、JSを勉強し始めた方、if文をど忘れした!って方に書いていきます。if文を深く理解し、皆さんの制作に役立てて下さい。If文とは?プログラミングの世界ではif文はいろんな言語で使われています。どの言語でも「条件分岐」という項目で紹介されています。与えられた条件に応じて処理を変えていくというものです。「もしも〇〇の場合、△△をする」。上の文では「〇〇の場合」が条件、「△△をする」が処理ですね。if文の使い方では、基本的なif文の構文を見ていきましょう。if(条件){//条件を満たしている場合(true)の処理}実例は下記となります。10){console.log('私は10歳以上です。→→「私は10歳以上です。」}変数ageで定義した「20」という数値は、ifの条件の「10歳以上」を満たしているので、trueの処理「私は10歳以上です。定義した値が条件を満たしていない時の処理も書いていきましょう。条件を満たしていない時の構文は下記の通りです。if(条件){条件を満たしている場合(true)の処理}else{条件を満たしていない場合(false)の処理}実例は下記となります。30){console.log('私は30歳以上です。console.log('私は30歳未満です。→→「私は30歳未満です。」}上記の場合は、ageは定義した「20」より条件の「30以上」を満たしていないのでelse以下のfalse処理が行われます。30){console.log('私は30歳以上です。console.log('私は20歳です。→→「私は20歳です。console.log('私は30歳未満です。20歳でもありません。');}上記の例は定義した「20」は1つ目の条件「30以上」を満たしていないが、2つ目の条件の「20」を満たしています。したがって処理結果は「私は20歳です。定義する数値を「25」にすると、処理結果は「私は30歳未満です。20歳でもありません。ifの書き方の順番に注意if文の条件は記載順序に気を付けないと、思いがけない処理が行われないことがおきます。10){console.log('私は10歳以上です。console.log('私は20歳以上です。→→「私は20歳以上です。console.log('私は10歳未満です。');}この場合、結果は「私は20歳以上です。20){console.log('私は20歳以下です。→→「私は20歳以下です。console.log('私は10歳以下です。console.log('私は10歳未満です。');}処理結果は「私は20歳以下です。ホントは「私は10歳以下です。」にしたいのですが、この順序だと想定どおりの処理はされません。「&&」、「||」、「!」の3つです。「&&」を使った分岐まずは「&&」です。記載すれば、AかつB。AとB両方でtrueが成り立つ条件となります。どちらかがfalseであれば最終結果はfalseとなります。20){console.log('私は未成年です。→→「私は未成年です。console.log('私は成人です。');}この例では変数ageの15は「0以上」であり「20未満」なので両方を満たし最終結果はtrueとなり処理結果は「私は未成年です。20){console.log('私は未成年です。console.log('私は成人です。」}変数ageの25は「0以上」であるが「20未満」ではないので、一つの条件を満たしていません。最終結果はfalseとなり処理結果は「私は成人です。B)と記述し、AまたはB。AとBのどちらかが条件を満たしていればtrueとなります。20){console.log('私は0歳か20歳です。→→「私は0歳か20歳です。console.log('私は20歳ではないです。');}この例では、変数ageの20は「0歳ではないが20歳」なのでtrueとなります。したがって処理結果は「私は0歳か20歳です。「!」はtrueとfalseが逆になります。!true)と記載すれば、if(false)と同意になります。→→「判定は間違いです」}「==」と「===」の違いこの2つは時々、紛らわしくなります。「===」は厳密等価演算子と呼ばれています。これは実例を見た方が理解できます。→→「異なる値です」}結果はtrueとなり、「同じ値です」が返ってきます。一行目に注目して下さい。数値は「20」ですが「'20'」と「20」と記述されています。「==」はString(文字)とNumber(数値)の様にデータタイプが異なっていても数値として「20」が等しければtrueとなります。→→「異なる値です」}しかし上記の場合はfalseとなり、「異なる値です」と処理されます。「===」はデータタイプも値も同じで無いとtrueにはなりません。比較演算子を使うとtrueやfalseを意図的に条件で分けることが可能なのですが、必ずfalseになる条件があります。それは下記の5つの条件です。console.log('falseです');}処理結果はfalseとなります。他の4つでも同じ結果になります。//falseの処理}一文に省略して記述することができます。これも実際にみた方が理解しやすいと思います。20){console.log('年齢は20以上です。console.log('年齢は20未満です。');}これを下記の様に記述することができます。console.log('年齢は20以上です。console.log('年齢は20未満です。「?」と「:」を使うことでif文を一行にまとめることができます。いかがでしたでしょうか?If文の基本から紛らわしいポイント、演算子、省略形まで必要な項目をまとめてみました。このページの内容が頭に入っていればif文のところで困ることは無いと思います。全て覚える必要はありません。振り返る時や、ど忘れした時に戻ってきて見直してくれれば幸いです。スキルアップ【2023ベストセラー】UdemyおすすめJavaScript講座を徹底解説UdemyのJavaScript学習におすすめのコースを紹介します。子孫セレクタ、子セレクタ、隣接、複数など忘れがちなセレクタをまとめました<前編>「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。けフロントエンドを本気で目指したい、スキルアップをしたい方々におすすめ講座をお教えします。4/4】ScrollTriggerでスクロールと連動したアニメーションの実装GSAPのScrollTriggerのプラグインを使ってスクロールに連動したアニメーションを実装します。子孫セレクタ、子セレクタ、隣接、複数など忘れがちなセレクタをまとめました<前編>フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。