JavaScriptでif文をネストして書く方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでif文をネストして書く方法について現役エンジニアが解説しています。if文とは条件によって処理を分岐させたい場合に使う構文です。真偽値(trueやfalse)を判定します。いれごのようにネストして書くこともできます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでif文をネストして書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでif文をネストして書く方法について詳しく説明していくね！
お願いします！
目次
if文の書き方
if文は、以下のような構文で記述します。
if( 条件式 ){ // 実際の処理を記述 }
上記の「条件式」の部分は、括弧内の式をtrueまたはfalseで評価する特殊な領域となり、この評価結果がtrueの場合のみ、処理が実行されます。
そのため、if文は以下のような目的でよく使われます。
- 条件分岐
- 入力値チェック
1.条件分岐にif文を使う場合
変数の値によって、何通りかの処理を実行したい場合にif文を使います。
分岐する対象となる処理が多い場合、if文の構造が複雑になり、ネスト構造となることも多いです。
2.入力値チェックにif文を使う場合
処理部分に使う変数がnullの場合がある時に、値が存在して正常動作できる場合にのみ処理を実行するためにif文を使います。
通常、条件分岐は発生せず、ひとまとまりの処理を実行する or しないの2通りとなります。
if文をネストして書く方法
プログラムによっては、3つ以上の条件判定が必要な複雑なif文の条件式が必要な場合があります。
例えば、以下のような場合です。
条件A：健康 条件B：20歳以上 条件C：JavaScriptが得意 条件D：CSSが得意
このような場合、if文を以下のように2重に入れ子にして（ネストして）記述することが可能です。
if文をネストさせて記述する例
if( 条件A && 条件B ){
// 条件A と 条件Bを両方満たしている
if( 条件C ){
// さらに条件Cも満たしている
console.log("アプリ開発をお願いします");
} else if( 条件D ){
// 条件Cは満たさないが、条件Dは満たしている。前提として、条件A,Bも満たしている
console.log("WEBデザインをお願いします");
}
}
ネストしたif文は、わかりやすくするためにインデントを1段階追加付与しておきましょう。上記の例では、ネストしたif文の処理ブロックは半角スペース2つ分のインデントを追加付与しています。
また、以下のようにネストさせずにif文を記述することも可能です。
if文をネストさせずに記述する例
if( 条件A && 条件B && 条件C ){ // 処理 }
else if( 条件A && 条件B && 条件D ){ // 処理 }
しかし、条件式が重複しますし、ネストしたほうが処理の目的がわかりやすいので、適宜ネストしてif文を記述しましょう。
実際に書いてみよう
それでは、実際に動作可能な形式で、if文をネストさせたプログラムを書いてみましょう。
もしif文の条件式で使われている論理演算子（ && や || ）がわからない場合、こちらに動画つきのわかりやすい記事がありますので、ご参照ください。
JavaScript
let isHealth = true;
let age = 25;
let gootAt = "JavaScript";
// let gootAt = "CSS";
if( isHealth && ( age >= 20 ) ){
if( gootAt == "JavaScript" ){
console.log("アプリ開発をお願いします！");
} else if( gootAt == "CSS"){
console.log("WEBデザインをお願いします！");
} // ネストした ifとelse if ブロックの閉じ括弧
} // 最初のifブロックの閉じ括弧
実行結果
アプリ開発をお願いします！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回は、if文を入れ子にして条件分岐させる（if文をネストさせる）方法をご紹介しました。
アプリケーションを作る時には、ユーザーの操作や情報に応じて何通りもの条件分岐をさせることもよくあります。if文を使いこなして、複雑な業務ロジックでも実装成功できるようになりましょう。
筆者プロフィール
| 寺谷文宏（てらたにふみひろ）
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
