つくる 起動メッセージ
このレッスンで分かること
- 第 1 章で学んだ連結・計算・コメントを 1 つの関数にまとめます
- 数値を文章に混ぜるときは、計算を先に済ませてから連結します
- 最小例は
function startupMessage(name, workCount, years, months) { return "こんにちは、" + name + " です。"; }
つくる 起動メッセージ とは
第 1 章の総仕上げです。プロフィールサイトを開いたときにコンソールへ出す自己紹介メッセージを、1 つの関数で組み立てます。
ここまでで何ができるようになったか
第 1 章では 6 つのことを学びました。最初に振り返ります。
| レッスン | 身につけたこと |
|---|---|
| HTML に JavaScript を読み込む | <script src="script.js" defer></script> でファイルをつなぐ |
| console.log で表示する | console.log で確認し、return で値を返す |
| 文字列を連結する | + で文字列をつなぎ、数値も混ぜられる |
| 四則演算 | + - * / % ** と優先順位 |
| コメントで意図を残す | // と /* */ で意図を書き残す |
| エラーを読んでみる | 種類・説明・行番号の 3 点で原因をたどる |
この 6 つを合わせると、もう「読み込んだときに自己紹介を出す」という小さな機能が作れます。今回はそれを 1 本の関数として書きます。
作るもの
startupMessage という関数を作ります。名前・作品数・経験年数・経験月数の 4 つを受け取り、コンソールに出すための 1 行を組み立てて返します。
こんにちは、山田 太郎 です。Web エンジニアを目指しています。公開作品は 3 件、学習は 14 ヶ月目です。学習期間に注目してください。受け取るのは「1 年」と「2 ヶ月」ですが、出力は合計の「14 ヶ月」です。ここで四則演算が必要になります。
手順を分けて考える
いきなり 1 本の式で書こうとすると混乱します。やることを 3 つに分けます。
- 固定の文章と引数を
+でつなぐ - 学習期間を
years * 12 + monthsで月数に直す - 計算した数値を文章の途中に差し込む
3 番目が今回のポイントです。第 3 レッスンで見たとおり、+ は左から順に処理されるので、計算部分をカッコでくくらないと連結になってしまいます。
console.log("学習は " + 1 * 12 + 2 + " ヶ月目です。");
// => 学習は 122 ヶ月目です。
console.log("学習は " + (1 * 12 + 2) + " ヶ月目です。");
// => 学習は 14 ヶ月目です。上の行では 1 * 12 が先に計算されて 12 になり、そこから先は文字列との連結なので "12" と "2" がくっついて "122" になりました。カッコ 1 組の有無で結果がまったく変わります。
こういう「一見なぜか数字が並ぶ」現象は、実務でも定期的に起きます。表示がおかしいときは、まず連結と計算の境目を疑ってください。
組み立ての例
似た形の関数を先に見ておきます。作品の紹介文を組み立てる関数です。
/**
* 作品の紹介文を組み立てる
* @param {string} title 作品名
* @param {number} year 公開年
* @param {number} views 閲覧数
* @returns {string} 紹介文
*/
function workSummary(title, year, views) {
// 年と閲覧数はどちらも数値。連結すると文字列になる
return title + " (" + year + " 年公開) 閲覧 " + views + " 回";
}
console.log(workSummary("プロフィールサイト", 2026, 120));
// => プロフィールサイト (2026 年公開) 閲覧 120 回数値の 2026 と 120 が、そのまま文章に溶け込んでいます。数値を文字列に直す特別な処理は要りません。+ が自動でやってくれます。
コメントの付け方にも注目してください。/** */ で関数全体の役割を書き、行コメントで「読んだ人が引っかかりそうな一点」だけを補っています。全部の行に説明を付ける必要はありません。
数値と文字列の混ざり方をもう一度
今回の課題は、文章の中に数値が 2 か所入ります。表で整理します。
| 差し込む場所 | 元の値 | 書き方 | 結果 |
|---|---|---|---|
| 作品数 | 3 (数値) | "公開作品は " + workCount + " 件" | 公開作品は 3 件 |
| 学習期間 | 1 と 2 (数値) | "学習は " + (years * 12 + months) + " ヶ月目" | 学習は 14 ヶ月目 |
作品数はそのまま差し込むだけなのでカッコは不要です。学習期間は計算してから差し込むのでカッコが要ります。この違いを説明できれば、第 1 章は卒業です。
実際の
script.jsでは、この関数を定義したあとにconsole.log(startupMessage("山田 太郎", 3, 1, 2));と 1 行足します。ブラウザでindex.htmlを開き直すと、コンソールに自己紹介が出ます。自分の書いたコードが自分のサイトで動く、最初の瞬間です。
詰まったときの進め方
うまく組み立てられないときは、一度に完成させようとせず、途中の形をコンソールに出しながら育てます。
function startupMessage(name, workCount, years, months) {
console.log("受け取った値", name, workCount, years, months);
console.log("学習月数", years * 12 + months);
return "こんにちは、" + name + " です。";
}まず引数がちゃんと届いているかを確かめ、次に計算だけが合っているかを確かめます。ここまで正しければ、あとは文章をつなぐだけです。返す文字列は短いところから始めて、1 つずつ足していきます。テストが赤いまま 20 分悩むより、console.log を 3 つ足すほうがずっと速く原因にたどり着けます。
エラーが出たら、前のレッスンで学んだ読み方を使います。ReferenceError なら名前のつづり、SyntaxError ならカッコとクォートの対応です。
引数が空でも壊さない
テストには、名前が空文字のケースや、作品数も学習期間も 0 のケースが入っています。特別な処理は要りません。空文字は連結しても何も足されず、0 はそのまま 0 と表示されます。
console.log("こんにちは、" + "" + " です。");
// => こんにちは、 です。
console.log("公開作品は " + 0 + " 件");
// => 公開作品は 0 件条件で分けたくなるかもしれませんが、いまは分けません。「値が空のときだけ表示を変える」という書き方は第 4 章の条件分岐で扱います。
よくある間違い
- 計算のカッコを忘れる — 学習期間が
122のように数字の並びになります。計算部分はカッコでくくります
// 誤り。学習は 122 ヶ月目です。になる
return "学習は " + years * 12 + months + " ヶ月目です。";
// 正しい
return "学習は " + (years * 12 + months) + " ヶ月目です。";- 句読点や単位の前後の空白がずれる — テストは 1 文字も違わないことを求めます。
" 件、学習は "のように、読点の前後まで期待値と見比べます
// 誤り。件 のあとの読点が抜けている
return "公開作品は " + workCount + " 件 学習は ";
// 正しい
return "公開作品は " + workCount + " 件、学習は ";returnを分けて 2 回書く — 最初のreturnで関数が終わるため、2 行目は実行されません。1 本の式につないでから返します
// 誤り。2 つ目は実行されない
return "こんにちは、" + name + " です。";
return "公開作品は " + workCount + " 件";要件
- 関数名は
startupMessage、引数はnameworkCountyearsmonthsの 4 つ - 戻り値は 1 本の文字列。肩書きの
Web エンジニアを目指していますは固定で埋め込むこと - 学習期間は
years * 12 + monthsで求め、カッコでくくってから連結すること - コードの中に、意図を説明するコメントを 1 つ以上書くこと
入出力例
startupMessage("山田 太郎", 3, 1, 2) → "こんにちは、山田 太郎 です。Web エンジニアを目指しています。公開作品は 3 件、学習は 14 ヶ月目です。"
startupMessage("田中 花子", 10, 2, 0) → "こんにちは、田中 花子 です。Web エンジニアを目指しています。公開作品は 10 件、学習は 24 ヶ月目です。"
startupMessage("山田 太郎", 0, 0, 0) → "こんにちは、山田 太郎 です。Web エンジニアを目指しています。公開作品は 0 件、学習は 0 ヶ月目です。"
startupMessage("", 0, 0, 1) → "こんにちは、 です。Web エンジニアを目指しています。公開作品は 0 件、学習は 1 ヶ月目です。"
startupMessage("山田 太郎", 1, 0, 11) → "こんにちは、山田 太郎 です。Web エンジニアを目指しています。公開作品は 1 件、学習は 11 ヶ月目です。"