つくる プロフィールを変数にする

解説

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

• 第2章で手に入れた道具を、1 つの関数の中で順番に使えます
• 外から届いた値は、受け取った直後に型をそろえておくと後が楽になります

型がそろわないまま文面を作ると崩れる

第2章では、値を扱うための道具がそろいました。

道具がそろっていても、届いた形のまま文面に混ぜると結果が崩れます。入力欄から来る値はすべて文字列なので、数として足したつもりが連結になります。

const stockText = "12";
console.log(`残り ${stockText + 1} 個`); // "残り 121 個"

画面に出てから気付くのがこの手のバグの厄介なところです。崩れないようにするには、文面を作る前に型をそろえておきます。

入口でそろえて、最後に組み立てる

処理は 3 段階に分けて書きます。この順番は、この関数に限らず値を扱う処理の基本形です。

1. 書き換えない固定値を const で宣言する
2. 届いた値を変換して型をそろえる
3. 文面を組み立てて返す

別の題材で 3 段階を通すと、次のような形になります。

const shopName = "ゆめさく雑貨店";  // 1 固定値
const stock = Number(" 12 ");      // 2 型をそろえる
const isOpen = Boolean("営業中");   // 2 型をそろえる
console.log(`${shopName}
残り ${stock + 1} 個
営業 ${isOpen}`);                   // 3 組み立てる

変換した値に名前を付けておくと、そこから先の行は「これは数値である」と読むだけで分かります。逆に、変換と組み立てが 1 行に混ざっていると、直したい場所を探すのに手間がかかります。上から読んで、固定値のかたまり、変換のかたまり、組み立てのかたまりの 3 つが見えていれば合格です。

作るもの

入力欄から届いた 3 つの値を受け取り、確認用のプロフィールカードを 4 行の文字列で返します。

山田 太郎
Web エンジニアを目指しています
経験 4 年目
自己紹介の入力 true

1 行目が名前、2 行目が肩書き、3 行目が経験年数、4 行目が自己紹介の入力状況です。肩書きは全員共通の固定文言なので、引数では受け取らず関数の中で持ちます。経験年数は、届いた値に 1 を足した「何年目か」を表示します。4 行目は、自己紹介が入力されているかどうかを真偽値のまま出します。行の区切りは改行 1 つで、末尾に改行は付けません。

途中で値が想定どおりか確かめたくなったら typeof を挟んでください。変換できていれば "number" "boolean" が返ります。

解説

現場の話 型がそろっていない値を関数の奥まで持ち込むと、原因の場所を特定しにくくなります。入口でそろえる、というだけで調査にかかる時間が変わります。

よくある間違い

経験年数を変換せずに足してしまうのが 1 つ目です。文字列と数値の + は連結になるので、"3" + 1 は "31" になります。数として足したいなら、足す前に Number() を通します。

2 つ目は、末尾に余分な改行や空白を残すケースです。

const text = `1 行目
2 行目
`; // 末尾に改行が 1 つ残る

テンプレートリテラルは書いたとおりの空白と改行をそのまま含みます。テストが通らないときは、まず末尾の改行と行頭の字下げを疑ってください。

1. 関数名は buildProfileText、引数は name (文字列) と yearsText (文字列または数値) と bio (文字列または null) の 3 つ
2. 肩書きは const で宣言し、yearsText は Number、bio は Boolean で変換する
3. 文面はテンプレートリテラルで組み立て、行の区切りは改行 1 つ。末尾に改行は付けない
4. 戻り値は 4 行を改行でつないだ 1 つの文字列