つくる 起動メッセージ

解説

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

• 第 1 章で学んだ連結・計算・コメントを 1 本の関数にまとめます
• 引数が空文字や 0 でも、特別な処理は要りません

材料はそろっているのに 1 本にならない

第 1 章では、文字列をつなぐ +、数をそろえて計算する * と +、意図を残すコメントを扱いました。道具は出そろっています。ここでは startupMessage という関数を書いて、プロフィールサイトを開いたときにコンソールへ出す 1 行を組み立てます。作りたいのは次の文です。

こんにちは、山田 太郎 です。Web エンジニアを目指しています。公開作品は 3 件、学習は 14 ヶ月目です。

受け取るのは、名前・作品数・経験年数・経験月数の 4 つです。学習期間に注目してください。受け取るのは「1 年」と「2 ヶ月」なのに、出したいのは合計の「14 ヶ月」です。ここだけ、つなぐ前に計算が要ります。やることを 3 つに分けます。

1. 固定の文章と引数を + でつなぐ
2. 経験年数と経験月数を、合計の月数に直す
3. 直した数値を文章の途中に差し込む

似た形を 1 つ見ておく

作品の紹介文を組み立てる関数です。形だけ借りてください。

function workSummary(work, year, views) {
  // 公開年と閲覧数はどちらも数値。文字列とつなぐと文字になる
  return work + " (" + year + " 年公開) 閲覧 " + views + " 回";
}

console.log(workSummary("プロフィールサイト", 2026, 120));
// => プロフィールサイト (2026 年公開) 閲覧 120 回

数値の 2026 と 120 が、そのまま文章に溶け込んでいます。数値を文字列に直す特別な処理は要りません。

コメントの付け方にも注目してください。全部の行に説明を付ける必要はなく、読んだ人が引っかかりそうな一点だけを補います。今回の課題では、こうしたコメントを 1 つ以上書くことが条件に入っています。

引数が空でも壊さない

テストには、名前が空文字のケースや、作品数も学習期間も 0 のケースが入っています。身構える必要はありません。空文字はつないでも何も足されず、0 はそのまま 0 と出ます。

console.log("[" + "" + "]");
// => []
console.log("残り " + 0 + " 件");
// => 残り 0 件

値が空のときだけ表示を変えたくなるかもしれませんが、いまは分けません。どの入力でも同じ形の文が出るように、1 本の式で書ききります。

解説

書き上げたら、実際の script.js でも呼んでみてください。関数を定義したあとに console.log で呼び出す 1 行を足し、index.html を開き直すと、コンソールに自己紹介が出ます。自分の書いたコードが自分のサイトで動く、最初の瞬間です。

よくある間違い

• 句読点や単位の前後の空白がずれる — テストは 1 文字も違わないことを求めます。" 件、学習は " のように、読点の前後まで期待値と見比べます
• return を 2 回に分けて書く — 最初の return を通った瞬間に関数が終わるので、2 行目は実行されません。1 本の式につないでから返します

1. 関数名は startupMessage、引数は name workCount years months の 4 つ
2. 戻り値は 1 本の文字列。肩書きの Web エンジニアを目指しています は固定で埋め込むこと
3. 学習期間は years * 12 + months で求め、カッコでくくってから連結すること
4. コードの中に、意図を説明するコメントを 1 つ以上書くこと