JavaScriptのIF文の省略形の書き方を現役エンジニアが解説【初心者向け】

JavaScriptのIF文の省略形の書き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• IF文とは
• IF文の省略形とは
• elseを省略する
• {}を省略する
• 条件演算子で条件分岐を1行にまとめる

 

IF文とは

直訳すると「もしも～だったら文」といったところかと思います。プログラムの中では最も一般的に使われる文の一つで、重要な文の一つとなります。使いどころも様々で、入力内容が”YES”か”NO”かで処理を分けたり、何らかの関数の返り値が”True”か”False”かで処理を分けたりなど、よく見かけるかと思います。

構成的には、「if」の後に判定文を入れて結果が”True”の場合の処理を記載します。”True”出なかった場合の処理も記載したければ、「else」を入れてその後に違った時の処理を記載します。また、違う条件を使う場合は、「else if」と繋げます。

単純なif文

if (val == 0) {
 console.log("valは0です")
}

elseを追加

if (val == 0) {
console.log("valは0です")
} else {
console.log("valは0ではないです")
}

他の条件がある場合（else if は幾つでも追加はできますが、その場合はswitch文の検討をお勧めします）

if (val == 0) {
console.log("valは0です")
} else if (val == 1) {
console.log("valは1です")
} else {
console.log("valは0でも1でもないです")
}

 

[PR] フロントエンドで副業する学習方法を動画で公開中

IF文の省略形とは

if文はよく使う文だと最初に説明したかと思います。そこで、少しでもプログラムを見やすく、シンプルに書きたくなるのがプログラマーの性でして、ifの省略もよく見かけます。

ただし、状況も考えて利用しましょう。チームでプログラミングを行っているときは、コーディングルールや他の人のレベルなども鑑みて、読みやすいコーディングを心掛けるようにしましょう。

elseを省略する

まずは、elseを省略した文です。早速書き方の例を示します。

(val == 0)?console.log("valは0です"):console.log("valは0ではないです")

条件文に「?」を付けて、”True”の場合の処理を記載します。続いて「:」を付けて、”else”の場合の処理を記載します。

シンプルで、一行で書けるので簡単なif分を書く時には便利かと思います。

{}を省略する

続きまして、もう少しif分の形式を残した省略方法です。

if (val == 0) console.log("valは0です");
else if (val == 1) console.log("valは1です");
else console.log("valは0でも1でもないです");

これだと、見やすくてさらに読みやすくもあるかと思います。

ただし、{}がないので、処理内容が複雑になると、どこまでがどの条件の処理かがわかり難くなることがありますので、その辺りは注意しましょう。

条件演算子で条件分岐を1行にまとめる

最後に、複雑な条件を一つにまとめる方法です。まずは普通に書いた場合。

var val = 12;
if ( val > 10 ) {
if ( val < 20 ) {
console.log("valは10～20の間です")
} else {
console.log("valは20以上です")
}
} else {
console.log("valは10以下です")
}

このように、いくつかの条件で処理を行う場合は、条件を必つにまとめることが出来ます。

if (val > 10 && val < 20){ console.log("valは10～20の間です") } else if (val >= 20){
  console.log("valは20以上です")
} else {
    console.log("valは10以下です")
}

今回の例ではあまり強力な省略にはなっていませんが、if分の入れ子構成は回避できているかと思います。「&&（and）」以外にも「||（or）」も利用が可能です。

このほかにも、判定したい値がbloom型(true/false)の場合などはif (bloom型 == true) とか書かずに if(bloom型) とだけかけたりなどの省略方法などもあります。

いずれにせよ、読みやすさとのバランスを考えて利用しましょう。

筆者プロフィール

小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。