JavaScriptで真偽値と三項演算子を使う方法【初心者向け】
JavaScriptで【真偽値】と【三項演算子】を使う方法をプログラミング初心者向けに解説した記事です。三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。if文の簡単な書き換えとして使うことができます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
井上 祐介
JavaScriptの使い方を初心者向けに紹介した記事です。
今回は、JavaScriptで真偽値と三項演算子を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
また、入門向けのJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
真偽値とは
真偽値とは、その命題が真か偽かを示す2つの値で、それぞれtrue、falseと書きます。
主に条件分岐で使われます。
trueやfalseって何でしょうか？
値なんだよね。極端に書くとif(true)で、if文のブロックが実行されるんだ。
文字列のようにも見えますよね？
そうそう。文字列だとシングルクォーテーションなどで囲わないとだめだけど、trueやfalseは値なので、数値のようにそのまま書けるんだよね。
三項演算子とは
三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。
その性質から、if文の簡単な書き換えといえるでしょう。
if文・三項演算子それぞれの構文
if文の構文
if文による条件分岐では、基本的に3行以上の長い式を書かなければなりませんよね。
条件式が真(true)のときは式1を、偽(false)のときは式2が実行されます。
if (条件式) {
// 式1
} else {
// 式2
}
しかし、三項演算子を使うと、次のように同じ内容を1行で簡潔に記述することができるのです。
三項演算子の構文
条件式 ? 式1 : 式2 ;
三項演算子で値を返す
三項演算子を使うと、条件によって値を返すだけの簡単な式を作成できます。
サンプルコード
変数scoreの値が70以上なら「合格」、70未満なら「不合格」と出力するプログラムです。
var score = 75;
var kekka = score >= 70 ? "合格" : "不合格";
document.write(kekka);実行結果
まず、条件式「score >= 70」で条件判定します。
そしてsocoreが70以上なら?の次にある値「合格」の文字列が返されます。
条件に当てはまらなければ:以降の「不合格」の文字列が返されます。
三項演算子から返された「合格」あるいは「不合格」の文字が変数kekkaに代入されます。
演算子がいっぱいあるので複雑に見えますが、三項演算子をひとつの塊としてみるとわかりやすいでしょう。
var kekka = (score >= 70 ? "合格" : "不合格");本来、三項演算子全体を括弧でくくる必要はありませんが、以下のコードのように頭の中のイメージで三項演算子をひとつのまとまりとして判別できるようにしましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際にプログラムを書いてみよう
それでは、実際にプログラミングを書きながら実行してみましょう。
if文で書く
まずはif文からです。
サンプルコード
変数moneyに代入される値が5000以上なら「お金持ち」、5000以下なら「貧乏」とブラウザに出力されるようなプログラムを書きます。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var money = 10000;
if (money > 5000) {
document.write ("お金持ち");
} else {
document.write ("貧乏");
}
</script>
</body>
</html>変数moneyに代入された値が10000で5000以上なので、「お金持ち」と表示されました。
次に、変数moneyの値を3000に書き換えてみます。
サンプルコード
<script>
var money = 3000;
if (money > 5000) {
document.write ("お金持ち");
} else {
document.write ("貧乏");
}
</script>
変数moneyに代入された値が3000で5000以下なので、「貧乏」と表示されました。
三項演算子を使って書く
三項演算子を使って書いてみましょう。
サンプルコード
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var money = 10000;
money > 5000 ? document.write("お金持ち") : document.write("貧乏") ;
</script>
</body>
</html>
変数moneyに代入された値が10000で5000以上なので、「お金持ち」と表示されました。
サンプルコード
次に、変数moneyの値を3000に書き換えてみます。
<script>
var money = 3000;
money > 5000 ? document.write("お金持ち") : document.write("貧乏") ;
</script>
変数moneyに代入された値が3000で5000以下なので、「貧乏」と表示されました。
nullやundefinedの判定方法
JavaScriptのif文などで判定する変数にnullが入っていたり、変数に値を入れられたことがなかったり変数が定義されていない（undefined）ときのためにエラー処理をif文で書くのは冗長なコードになりがちです。
そこで三項演算子を使うことによってシンプルなコードにできます。
nullやundefinedをまとめて判定する
有効な値ではない場合の判定をする場合は、以下のシンプルな条件を使います。
変数 ? 変数 : falseの場合;
関係演算子を使わずに、変数単体で指定すれば無効な値かどうかを判定できます。
※無効な値とはfalse、null、 NaN、 0 (ゼロ)、 空文字列 (“”)、 undefinedです。
※ゼロを有効にしたいなど、無効な値ではなく数値型かどうかを判定する場合はNumber.isNaNメソッドを使う必要があります。
サンプルコード
//null
var score = null;
var kekka = score ? score : "無効な値です。";
document.write("nullは" + kekka + "<br>");
//NaN
var score = NaN;
var kekka = score ? score : "無効な値です。";
document.write("NaNは" + kekka + "<br>");
//0
var score = 0;
var kekka = score ? score : "無効な値です。";
document.write("0は" + kekka + "<br>");
//空文字列 ("")
var score = "";
var kekka = score ? score : "無効な値です。";
document.write('空文字列 ("")は' + kekka + "<br>");
//undefined
var score = undefined; //もしくは値が未定義の場合 var score;
var kekka = score ? score : "無効な値です。";
document.write("undefinedは" + kekka + "<br>");
結果
nullだけを判定する
変数scoreがnullのときに「点数がnullです」と出力するプログラムです。
変数scoreがnullでなければ変数scoreの値を、nullなら「点数がnullです」の文字列を返します。
サンプルコード
var score = null;
var kekka = score !== null ? score : "点数がnullです";
document.write(kekka);
結果
値の未定義（undefined）だけを判定する
変数scoreに値が定義されていない状態(undefined)のときに「点数がありません」と出力するプログラムです。
変数scoreがundefinedでなければ変数scoreの値を、undefinedなら「点数がありません」の文字列を返します。
サンプルコード
var score;
var kekka = typeof score !== 'undefined' ? score : "点数がありません";
document.write(kekka);
結果
【参考】無効な値をシンプルに判定する
値が有効な場合は変数の値をそのまま使用し、無効な場合は別の値を選択するようにする三項演算子よりシンプルな方法があります。
結果を代入したい変数 = 変数1 || 変数2
※上と下の式は変数1が有効な場合は変数1、無効な場合は変数2を返す同じ処理です。
結果を代入したい変数 = 変数1 ? 変数1 : 変数2
サンプルコード
var score;
var kekka = score || "無効な値です。";
document.write("scoreは" + kekka);結果
※上記の式(||)による代入は、一般的なプログラミング言語と処理が異なりますので注意してください。
三項演算子の応用例
本記事では、一般的に利用される三項演算子の応用例を２つ解説します。
1. 三項演算子による入れ子構造の処理
2. 三項演算子による複数条件の処理
これら2つの役割と応用例を記載します。
2-1. 三項演算子による入れ子構造の処理
三項演算子は入れ子（ネスト）にして使うことができます。
複数の条件によって返す値を変えたいときに便利です。
サンプルコード
点数が70以上なら「合格」、30未満なら「赤点」、それ以外なら点数を表示するプログラムです。
var score = 25;
var kekka = score >= 70 ? "合格" : score < 30 ? "赤点" : score;
document.write(kekka);
結果
三項演算子で判定される条件の順番は以下の通りです。
まず、scoreが70以上かが判定され、条件式がtrueなら「合格」を返します。
次にそれ以外の場合に、scoreが30未満か調べ条件にあてはまっているなら「赤点」、赤点以外はscoreの値を返します。
本来は不要ですが、三項演算子を括弧でくくると入れ子がわかりやすくなります。
var kekka = (score >= 70 ? "合格" : (score < 30 ? "赤点" : score));もちろんfalseの場合だけでなくtrueを入れ子にしたり、両方をネストして複雑な条件の三項演算子を作成できます。
ただ、三項演算子の入れ子を多用するとコードが複雑になり理解が困難になりますので、if文に置き換えたり()で囲ってわかりやすくする工夫が必用です。
2-2. 三項演算子による複数条件の処理
三項演算子には複数の条件を指定できます。
if文と同じように||や&&の関係演算子を使います。
サンプルコード
数値が0から100なら「正常」、範囲外なら「異常」と判定します。
var n = 50;
var kekka = 100 >= n && n >= 0 ? "正常" : "異常";
document.write(kekka);結果
複数の条件式の場合は括弧でくくると理解しやすくなります。
var kekka = (100 >= n && n >= 0) ? "正常" : "異常";
まとめ
今回の記事は、JavaScriptで真偽値と三項演算子を使う方法を解説しました。
- 真偽値とは条件が成立した「真」(true)と条件が成立していない「偽」(false)を示す値です。
- 三項演算子とは3つの項目を使って条件によって処理を変える演算子です。
- 三項演算子の構文は「条件式 ? 式1 : 式2 ;」と書きます。
- 無効な値（nullやundefined）を判定するには「変数 ? 変数 : falseの場合;」と書きます。
- 三項演算子を応用して入れ子（ネスト）にしたり、複数の条件を指定したりできます。
三項演算子を理解することで、条件式をシンプルに1文で書けます。
無駄に長くなる無効な値の判定も簡潔に書けますので活用してみてください。
if文の他に、三項演算子という書き方もあるんですねー。
そうそう。とりあえずは短いものは三項演算子って覚えてもいいかな。
if文と三項演算子の違いっていうのは、あったりするんですか？
「 文 」と「 演算子 」なので、微妙だけど違うんだよね。ans = (条件) ? [項目1] : [項目2]というような感じで、値を返却させることも出来るんだ。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
