三項演算子と if 文はどちらを使うべきですか？

値をひとつ選ぶだけなら三項演算子、処理そのものを分けるなら if 文です。const に入れる値を条件で決めたいときは三項演算子でしか書けないので、そこが分かりやすい判断基準になります。分岐の中で複数行の処理をするなら if 文にしてください。

三項演算子を複数行に分けて書いてもよいですか？

問題ありません。むしろ入れ子にするときは、条件ごとに改行してそろえたほうが読みやすくなります。Prettier などのフォーマッタも、長い三項演算子は自動で改行します。1 行に無理やり詰め込むより、素直に折り返してください。

条件に文字列や数値を直接書いてもよいですか？

動きますが避けてください。条件に値を直接書くと truthy か falsy かの判定になるため、name が空文字や 0 のときも偽として扱われます。意図が伝わるように name !== "" のような明示的な比較を書くか、falsy 判定でよいことをコメントで補ってください。

三項演算子で簡潔に｜コードで実践

JavaScript入門：コードを動かす

HTML に JavaScript を読み込むところから始め、コンソール、文字列と数値、let と const、データ型、型変換、比較・論理・三項・null 合体演算子を学ぶ全 23 レッスン（335 分）の入門コースです。最後は、変数と式を使ってプロフィールの見出し用の値を組み立てます。if 文、配列とループ、DOM 操作は後続コースで扱います。

このレッスンで分かること

条件 ? 真のときの値 : 偽のときの値 で、条件によって値を切り替えられます

三項演算子は式なので、そのまま return や変数の初期値に置けます

誰の画面にも同じ文言しか出せない

プロフィールサイトの見出しに「人気作品」と決め打ちで書くと、まだ誰にも見られていない作品にも同じ文字が出ます。状況に合わせて言葉を変えたい。つまり、条件によって表示する値そのものを選びたいわけです。

この「値を選ぶ」場面で使うのが三項演算子です。書き方は次の形です。

JavaScript

条件 ? 条件が真のときの値 : 条件が偽のときの値

? の前が条件、? と : の間が真のときの値、: の後ろが偽のときの値です。オペランドを 3 つ取るので三項演算子と呼ばれます。JavaScript でオペランドを 3 つ取る演算子はこれだけなので、「三項演算子」と言えばこの形を指します。

JavaScript

const views = 120;
const badge = views >= 100 ? "人気作品" : "通常";
console.log(badge); // 人気作品

? を「だったら」、: を「そうでなければ」と読むと、そのまま日本語の文になります。「閲覧数が 100 以上だったら人気作品、そうでなければ通常」です。

式だから、そのまま代入できて return できる

三項演算子は値を持つ式です。値を持つということは、値を書ける場所ならどこにでも置けるということです。

JavaScript

// const の初期値にできる
const status = views >= 100 ? "公開中" : "準備中";

// テンプレートリテラルの中に埋め込める
console.log(`この作品は ${views >= 100 ? "人気" : "通常"}です`);

// 画面に付けるクラス名を条件で決めるのにもよく使う
const className = views >= 100 ? "card card-hot" : "card";

// 行が長くなったら ? と : の前で改行する
const message =
  views >= 100
    ? "たくさんの人に見られています"
    : "これから伸びていきます";

const は宣言と同時に値を入れる必要があります。「変数の初期値を条件で決めたい」場面が、三項演算子のいちばんおいしい使いどころです。関数の return に直接書けるのも同じ理由で、選んだ値がそのまま戻り値になります。選ぶ値は文字列でなくても構いません。数値でも真偽値でも、値であればそのまま置けます。

条件のところには、比較演算子や論理演算子の結果をそのまま置けます。views >= 100 のような比較でも、hasPhoto && views >= 100 のような組み合わせでも構いません。真偽が決まる式であれば何でも条件になります。

よくある間違い

? true : false と書いてしまう — views >= 100 の時点で、答えはすでに true か false です。そこから改めて true と false を選び直す必要はありません。同じ理屈で c ? false : true は !c と書けます

JavaScript

const isPopular = views >= 100 ? true : false; // 冗長
const isPopular2 = views >= 100;               // これで同じ意味

偽のときの値を省く — ? と : はセットです。片方だけでは構文エラーになり、そもそも動きません

JavaScript

// const label = views >= 100 ? "人気"; // SyntaxError
const label = views >= 100 ? "人気" : "通常"; // 両方書く

このレッスンで分かること

条件 ? 真のときの値 : 偽のときの値 で、条件によって値を切り替えられます

三項演算子は式なので、そのまま return や変数の初期値に置けます

誰の画面にも同じ文言しか出せない

この「値を選ぶ」場面で使うのが三項演算子です。書き方は次の形です。

JavaScript

条件 ? 条件が真のときの値 : 条件が偽のときの値

JavaScript

const views = 120;
const badge = views >= 100 ? "人気作品" : "通常";
console.log(badge); // 人気作品

? を「だったら」、: を「そうでなければ」と読むと、そのまま日本語の文になります。「閲覧数が 100 以上だったら人気作品、そうでなければ通常」です。

式だから、そのまま代入できて return できる

三項演算子は値を持つ式です。値を持つということは、値を書ける場所ならどこにでも置けるということです。

JavaScript

// const の初期値にできる
const status = views >= 100 ? "公開中" : "準備中";

// テンプレートリテラルの中に埋め込める
console.log(`この作品は ${views >= 100 ? "人気" : "通常"}です`);

// 画面に付けるクラス名を条件で決めるのにもよく使う
const className = views >= 100 ? "card card-hot" : "card";

// 行が長くなったら ? と : の前で改行する
const message =
  views >= 100
    ? "たくさんの人に見られています"
    : "これから伸びていきます";

よくある間違い

? true : false と書いてしまう — views >= 100 の時点で、答えはすでに true か false です。そこから改めて true と false を選び直す必要はありません。同じ理屈で c ? false : true は !c と書けます

JavaScript

const isPopular = views >= 100 ? true : false; // 冗長
const isPopular2 = views >= 100;               // これで同じ意味

偽のときの値を省く — ? と : はセットです。片方だけでは構文エラーになり、そもそも動きません

JavaScript

// const label = views >= 100 ? "人気"; // SyntaxError
const label = views >= 100 ? "人気" : "通常"; // 両方書く

三項演算子で簡潔に

誰の画面にも同じ文言しか出せない

式だから、そのまま代入できて return できる

よくある間違い

要件

入出力例

ヒント

メモ

三項演算子で簡潔に

誰の画面にも同じ文言しか出せない

式だから、そのまま代入できて return できる

よくある間違い

要件

入出力例

ヒント

メモ