つくる 表示名を決める

解説

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

• || で空欄を埋め、?? で未設定を埋め、三項演算子で文言を切り替えます
• 値の形を先にそろえておくと、あとの判定がシンプルになります

そろっていないデータで見出しが崩れる

実際のサービスでは、データが完璧にそろっていることのほうが珍しいです。ニックネームを登録していない人、肩書きを空欄のまま保存した人、作品がまだ 1 件もない人。この「そろっていない状態」で画面に何を出すかを決めるのが、フロントエンドの仕事の半分と言っても言い過ぎではありません。

第3章で手に入れた || ?? ? : と丸括弧だけで、入力がそろっていなくても壊れない表示用の値が作れます。今回はプロフィールの見出しに使う値を、ニックネーム、本名、肩書き、作品件数の 4 つから組み立てます。決まりは次のとおりです。

• 表示名は、ニックネームがあればそれ、空欄なら本名、どちらも無ければ既定の名前
• 肩書きは、空欄や未設定なら既定の文言に倒す
• 件数は、null や undefined なら数値の 0 に倒す
• 件数が 1 以上のときと 0 のときで、表示する文を変える

どの演算子を当てるか

決まりをひとつずつ演算子に翻訳します。判断の軸は「その値にとって、空文字と 0 は未設定と同じ意味か」です。

別の題材で 1 行ずつ確かめます。作品カードの表示を決める例です。

const card = { title: "", caption: null, likes: 0 };

console.log(card.title || "無題");       // 無題    空文字も倒したいので ||
console.log(card.caption ?? "説明なし"); // 説明なし null なので既定値に倒れる
console.log(card.likes ?? 0);            // 0       0 は本物の値なので残る

card.title は空文字なので || が右へ倒します。card.likes は 0 ですが、?? は null と undefined にしか反応しないのでそのまま残ります。同じ「既定値を入れる」でも、値の意味によって演算子を変える。ここが第3章のいちばんの学びどころです。

形をそろえてから比べる

文言の切り替えは、件数が数値に決まったあとに行います。先に ?? で数値へ倒しておけば、null や undefined が紛れ込む心配をせずに比較できます。

const raw = null;       // 件数が届いていない
const likes = raw ?? 0; // 数値にそろえる
console.log(likes >= 10 ? "話題の作品" : "これから伸びる作品");

前の処理で値の形をそろえておくと、後の処理の条件がシンプルになります。この積み重ねが、読みやすいコードの正体です。

決まった値をまとめて返すときは、オブジェクトに変数名だけを並べられます。同じ名前のキーにその値が入る省略記法です。

const theme = "dark";
const fontSize = 16;
console.log({ theme, fontSize }); // { theme: "dark", fontSize: 16 }

変数名とキー名をそろえられないときは、キー: 値 と書けば好きな名前を付けられます。 引数と同じ名前の変数はもう作れないので、別名で受けた値をキーに戻すときはこの形になります。

const size = 16;
console.log({ theme, fontSize: size }); // { theme: "dark", fontSize: 16 }

解説

値をひとつずつ const に置いてから返すと、名前がそのまま説明になります。ひとつの長い式に詰め込むこともできますが、途中の値に名前を付けたほうが、あとから読む人に親切です。

よくある間違い

• 数値の既定値に || を使う — 既定値が 0 のときはたまたま同じ結果になりますが、views || 10 のように既定値が 0 以外だと、実際に 0 だった値が 10 にすり替わります。数値には ??、と決めておくと事故りません
• 形をそろえる前に比べる — null は比較のときに数値へ変換されるため、null >= 0 は true になります。届いたままの値でいきなり比べると、こういう思わぬ結果を踏みます。既定値を入れて形をそろえてから比較してください

1. 関数名は buildHeader、引数は nickname fullName jobTitle worksCount の 4 つにすること
2. 戻り値は displayName subtitle worksLabel worksCount の 4 つのキーを持つオブジェクトにすること
3. 空文字の肩書きは既定値に置き換えるため || を使い、件数は 0 を守るため ?? を使うこと
4. if 文を使わず、三項演算子で表示文を切り替えること