JavaScriptでエルビス演算子を使う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでエルビス演算子を使う方法について解説しています。最初にエルビス演算子の役割について説明します。次にJavaScriptで論理演算子を使って同様の処理を行う方法について学習しましょう。

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

JavaScriptでエルビス演算子を使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

エルビス演算子を使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

エルビス演算子とは

エルビス演算子(Elvis operator,?:)は2つの値を指定し、

左の値がtrueと評価されるものであれば左の値を、falseと評価されるものであれば右の値を返すものです。

三項演算子の2項目が省略されたようなもので、比較対象の値がfalse相当の場合のデフォルト値を設定するような用途に使えます。

(例)

val = a ?: b;

 

JavaScriptでエルビス演算子を使う方法

javascriptにおいて、エルビス演算子は使用できません。

ですが、エルビス演算子’風’に書く方法として”論理演算子”を使用した記述をすることができます。

 

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

論理演算子とは

javascriptでの論理演算子は「&&」「||」「!」の3種類ありif~false文とともに用いられることが多いものです。

基本的な挙動を説明すると、

論理演算子の左辺と右辺を評価しtrue/falseの真偽値を判定するものになります。

 

論理演算子の使い方

上記3種類の演算子の使い方は、以下のようになります。

 

[演算子] [使用例] [意味]
&& :  a && b  : a と b が共にtrueの時にtrue
||    :  a || b    : a か b の少なくとも1つがtrueの場合にtrue
!   :  !a    : a がtrueの場合にfalse、a がfalseの場合にtrue

 

実際に書いてみよう

論理演算子でエルビス演算子風の表記を行う場合は、論理演算子の「||」を使用します。

 

var test_a = true;

var test_b = false;

var result = test_a || test_b; // true

var result2 = test_b || test_a; // true

 

「&&」演算子でも似たようなことが可能です。

ただし、&&の場合は左辺右辺ともにtrueの場合は、右辺の値が返却されます。

var test_c = "";

var test_d = true;

var result = test_c || test_d; // true

var test_c = "test1";

var test_d = "test2";

var result = test_c || test_d; // test2

 

まとめ

論理演算子だけで変数の判定を行うのはif~elseを併用するよりも簡潔に書けますが、

可読性は下がってしまいますので、個人開発などではフル活用できますが、複数人での開発の場合は、ルール等を確認して使用するようにしましょう。

 

監修してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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