Javascriptには大量の省略型が実装されていて、前回は「配列・オブジェクト・関数」について軽く触れました。
今回はif文を中心に、ちょっとした処理なら省略して書いた方がソースがスッキリする書き方を紹介します。
なお、本稿では前回の内容で紹介した省略表記を使用していますので、未読の方は先にコチラをお読みください。

ネストするまでもないif-elseを省略
言語の種類に関わらず「if」は最も使用頻度の高い命令文と言えます。
const hoge = (str) => { if(str.length > 0) { return str; } else { return false; } }; window.console.log(hoge("yes")); // yes
文字入力チェックを雑に実装したサンプルコードを使って、色々略してみましょう。
三項演算子を使う
if-elseの省略表記で、最も柔軟な書き方が出来るのが三項演算子となります。
早速これを使ってサンプルコードを略してみましょう。
const hoge = (str) => { return (str.length > 0) ? str : false; }; window.console.log(hoge("yes")); // yes

凄くスッキリしたね!
前提条件として「if-elseそれぞれのネスト内に式が1つしか無い時」にしか使えません、if-elseの結果をコロンで区切るので、式を二つ書く事が出来ないのは直感的に理解出来ます。
例によって丸括弧は省略出来ますので、一応覚えておきましょう。
const str = "yes"; let hoge; // condition(=条件式)の丸括弧は省略出来る hoge = str.length > 0 ? str : false; window.console.log(hoge); // yes // conditionが2つ以上でも省略出来る hoge = str.length > 0 && str === "yes" ? str : false; window.console.log(hoge); // yes
個人的には丸括弧を付けた方が読みやすいと思うけどね、特に2つ以上の条件式を書くとごちゃごちゃするので。
短絡演算子を使う
十分短く書けていますが、この処理内容の場合は更に短い書き方が可能です。
const hoge = (str) => { return str || false; }; window.console.log(hoge("yes")); // yes

更にスッキリしたね!
短絡演算子の||(=OR)を使う事と、以下のコードと等価になります。
if(str) { return str; } else { return false; }
元の条件式だと、引数が渡されなかった時などに「lengthプロパティが無いよ!」ってエラーが出てしまいますが、この書き方なら寛容に処理されます。
ただ、この書き方には1つだけ仕様上の注意があります。
const hoge = (str) => { return str || false; }; // 数値型の0を渡すと「偽」と判定される window.console.log(hoge(0)); // false // 文字列型の0を渡すと「真」と判定される window.console.log(hoge("0")); // 0
プログラミングの世界では「0=false」で「1=true」が絶対正義なのです。
おまけ(全力で略する)
前回の記事で「returnは明示的にしよう」と書きましたが、第三者が初見でも分かるような単純処理、かつコメントを書いておくならセーフと言う考え方も当然アリです。
せっかくなので、このコードを限界まで小さくしてみよう。
// 渡された値をチェックして結果を返す const hoge = (str) => str || false; window.console.log(hoge("yes")); // yes

ここまで短くなるなら、そのうち何も書かなくて良くなりそうだね!
AI技術の進歩で「何も書かなくても良い訳ないだろ!」と言い切れないのが怖い所です。
if文のcondition(=条件式)を省略する
if文を理解する簡単な方法は、falseになる5つのパターン(※多分)だけを覚える事です。
白か黒しか無い世界だからね、単純に「黒じゃないのは全部白です」って言い換える事が出来ますよと。
falseになるパターン
false | boolern(=真偽値) |
---|---|
undefined | 定義されていない変数 |
null | 中身が空の変数 |
0 | 数値型の0 |
“” | 空の文字列 |
こんだけ、後は全部trueです。

簡単だね!
そのまま使う
取りあえず渡された値がfalseじゃない時に何かしたいって言う単純な処理の場合は、そのまま渡された値だけをconditionに書けばOKです。
let hoge = "aaa"; if(hoge) { hoge = "bbb"; } window.console.log(hoge); // bbb
まぁ普通ですね。
論理否定で使う
今度は逆に渡された値がfalseなら何かしたいって言う単純な処理の場合、頭に!を一つ書いてあげます。
let hoge; if(!hoge) { hoge = "bbb"; } window.console.log(hoge); // bbb
この場合hogeはundefined(=何も定義されていない)だからbbbが代入されていますね。
何らかの関数を実行した返り値がfalseの時に処理する、とかで使う事が比較的多い気がします。
おまけ(二重否定で使う)
Dreamweaverとかを使っていると、conditionでは「===」や「!==」を使って厳密に比較しなさい!と怒られる事があります。
その場合、コードによっては先ほど覚えた「5つのパターンはfalse」ってのが破綻してしまいます。
let hoge; if(hoge === false) { hoge = "bbb"; } window.console.log(hoge); // undefined
先ほどと同じくhogeはundefined(=何も定義されていない)だから、falseとは違うと判定されてbbbが代入されずに終わってしまう。
そう言う時は!!(=二重否定)を使うと望む結果になります。
let hoge; if(!!hoge === false) { hoge = "bbb"; } window.console.log(hoge); // bbb
論理否定は例の「5つのパターンはfalse」を用いて、くっつけた値の真偽値をひっくり返す命令で、常にtrueかfalseしか返しません。
- undefinedはfalseと判定される。
- falseを論理否定するとtrueになる。
- trueを更に論理否定するとfalseになる。
反対の反対は表、結果は真偽値のみ。
つまりundefinedがBoolean型のfalseに変換されたって事になります。

よく分かりません!
二重否定すると常にtrueかfalseの2通りしか返って来ないって覚えておきましょう。
その他
複数の言語を扱うエンジニアは、ちょくちょく「ど忘れ」と言う謎の現象に出くわす事がある。
今回はJavascriptのif文絡みの投稿なので、私がちょくちょく出くわす謎の現象の忘備録を残しておきます。
typeofが返してくるのは文字列
これね、たまに忘れてtypeof hoge !== undefinedとか書いちゃって「んん?」ってなったりする。
この手の間違いは、気付かずに放置すると大変危険です。
true | “boolean” |
---|---|
false | “boolean” |
null | “object” |
undefined | “undefined” |
NaN | “number” |
数値 | “number” |
文字列 | “string” |
配列 | “object” |
オブジェクト | “object” |
関数 | “function” |
数年前の案件でNaNの型判定を思い込みで間違っており、盛大にハマった事があるので皆さんは注意しましょう。
indexOfをスタイリッシュに書く
去年ぐらいに知って、今では超使ってるチルダ演算子。
これを用いて正数をビット反転させると「符号を反転&正数を-1する」と言う演算が行われるようです。
例えば~3なら3*-1-1=-4、~-4なら-4*-1-1=3と言った具合。
この演算の「答えが0になるのは~-1の時だけ」と言う特徴が、indexofの「見つからなかったら-1が返って来る」と噛み合った結果こう言う記述が可能に。
let hoge = "abc"; const str = !~hoge.indexOf("d") ? "nai" : "aru"; window.console.log(str);
hoge(=”abc”)に”d”は含まれていないから-1が返って来てチルダ演算子で0になる、そして0はfalseだから論理否定するとtrueになるので、三項演算子の真が実行された。
ちなみに正式名称(?)はビット反転演算子だそうです、ガンダムチックなネーミングでカッコイイね。
以上、Javascriptの省略型の書き方2(if文・演算子・その他)でした。
コメント