JavaScriptで真偽値と三項演算子を使う方法【初心者向け】

JavaScriptで【真偽値】と【三項演算子】を使う方法をプログラミング初心者向けに解説した記事です。三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。if文の簡単な書き換えとして使うことができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptで真偽値と三項演算子を使う方法について解説します。

また、入門向けのJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

真偽値とは

真偽値とは、その命題が真か偽かを示す2つの値で、それぞれtruefalseと書きます。

主に条件分岐で使われます。

 

大石ゆかり

trueやfalseって何でしょうか?

田島悠介

値なんだよね。極端に書くとif(true)で、if文のブロックが実行されるんだ。

大石ゆかり

文字列のようにも見えますよね?

田島悠介

そうそう。文字列だとシングルクォーテーションなどで囲わないとだめだけど、trueやfalseは値なので、数値のようにそのまま書けるんだよね。

 

三項演算子とは

三項演算子とは演算子のひとつで、その名の通り3つの項目を使う唯一の演算子です。

その性質から、if文の簡単な書き換えといえるでしょう。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

if文・三項演算子それぞれの構文

<if文の構文>

if文による条件分岐では、基本的に3行以上の長い式を書かなければなりませんよね。

条件式が真(true)のときは式1を、偽(false)のときは式2が実行されます。

if (条件式) {
  // 式1
} else {
  // 式2
}

 

でも、三項演算子を使うと、次のように同じ内容を1行で簡潔に記述することができるのです。

 

<三項演算子の構文>

条件式 ? 式1 : 式2 ;

 

 

 

実際にプログラムを書いてみよう

それでは、実際にプログラミングを書きながら実行してみましょう。

変数moneyに代入される値が5000以上なら「お金持ち」、5000以下なら「貧乏」とブラウザに出力されるようなプログラムを書きます。

 

<if文で書く>

まずはif文からです。

<!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以上なので、「お金持ち」と表示されました。

rich

 

 

次に、変数moneyの値を3000に書き換えてみます。

<script>
var money = 3000;
if (money > 5000) {
document.write (“お金持ち”);
} else {
document.write (“貧乏”);
}
</script>

 

変数moneyに代入された値が3000で5000以下なので、「貧乏」と表示されました。

poor

 

 

<三項演算子を使って書く>

三項演算子を使って書いてみましょう。

<!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以上なので、「お金持ち」と表示されました。

rich

次に、変数moneyの値を3000に書き換えてみます。

<script>
var money = 3000;
money > 5000 ? document.write(“お金持ち”) : document.write(“貧乏”) ;
</script>

変数moneyに代入された値が3000で5000以下なので、「貧乏」と表示されました。

poor

 

 

以上です。

プログラムを書く時はできるだけシンプルに記述していったほうが、のちのち見返すことを考えてもいいとされています。ですから、条件分岐をしたい時は、if文よりも、ぜひ三項演算子を使ってみてくださいね。

 

大石ゆかり

if文の他に、三項演算子という書き方もあるんですねー。

田島悠介

そうそう。とりあえずは短いものは三項演算子って覚えてもいいかな。

大石ゆかり

if文と三項演算子の違いっていうのは、あったりするんですか?

田島悠介

「 文 」と「 演算子 」なので、微妙だけど違うんだよね。ans = (条件) ? [項目1] : [項目2]というような感じで、値を返却させることも出来るんだ。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。