改行はなぜ末尾ではなく行のあいだに入れるのですか。

各行のうしろに改行を足すと、最後の行のうしろにも余分な改行が残るためです。見た目では気付きにくいのに、文字列を比べるテストでは失敗します。2 行目以降を書く前に改行を足す、という順番にすると余分が出ません。

空配列のときに空文字列を返してはいけませんか。

仕様として決めるなら構いませんが、画面には何も表示されず壊れているように見えます。今回は作品はまだありませんというメッセージを返す仕様にしました。空のとき何を返すかを自分で決めて書く、という考えかたそのものが大事です。

この文字列を実際の画面に出すにはどうしますか。

第8章の DOM のきほんで、要素を取得してテキストを書き換える方法を学びます。今回作った関数の戻り値をそのまま流し込めば、作品一覧が画面に並びます。データを作る部分と表示する部分を分けておくと、あとからどちらも直しやすくなります。

つくる作品リストを一覧にする｜コードで実践

Q: 空配列のときに空文字列を返してはいけませんか。

仕様として決めるなら構いませんが、画面には何も表示されず壊れているように見えます。今回は 作品はまだありません というメッセージを返す仕様にしました。空のとき何を返すかを自分で決めて書く、という考えかたそのものが大事です。

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

配列とループを組み合わせて、一覧の文字列を組み立てられます

区切り文字は要素の「うしろ」ではなく「あいだ」に置きます

作品が 1 件増えるたびに、表示を書き直している

第 5 章では、配列と for と while を手に入れました。この道具がそろったことで、件数が変わっても書き直さなくていいコードが書けます。今回はその総仕上げとして、作品名の配列から、そのまま画面に出せる番号付きの一覧を組み立てる buildWorkList を書きます。作りたいのは次の形です。

プレーンテキスト

プロフィールサイト
自己紹介カード
スキル一覧の表

配列が持っているのは 0 から始まるインデックスだけなので、表示用の番号は自分で作ります。差はいつも 1 です。

インデックス	表示したい番号
`0`	`1`
`1`	`2`
`2`	`3`

番号が要るので、ここは for-of ではなく通常の for を選びます。足した結果を文字列とつなぐときは、丸カッコで囲んでおくと安全です。

JavaScript

console.log(1 + 1 + " 番目");
// => 2 番目
console.log("番号 " + 1 + 1);
// => 番号 11

+ は左から順に処理されるので、いったん文字列が現れたあとの + はすべて連結になります。数として足したいところは、先に丸カッコでまとめてしまいます。

区切りは「うしろ」ではなく「あいだ」に置く

行と行をつなぐ改行は \n と書きます。バックスラッシュと n の 2 文字で 1 つの改行です。

つまずくのは改行を入れる位置です。素直に「1 行ぶん作るたびに、うしろへ \n を足す」と書くと、最後の行のうしろにも改行が残ります。目で見ても気付けないのに、文字列を比べるテストは容赦なく落ちます。

別の題材で形だけ見ておきます。タグを「、」でつなぐ例です。

JavaScript

const tags = ["HTML", "CSS", "JavaScript"];
let line = "";
for (let i = 0; i < tags.length; i++) {
  if (i > 0) {
    line += "、"; // 2 個目以降だけ、前に区切りを足す
  }
  line += tags[i];
}
console.log(line);
// => HTML、CSS、JavaScript

i > 0 がそのまま「2 個目以降」を意味します。1 個目のときだけ区切りを足さない、という考え方です。カンマ区切りでも改行でも、区切り文字を扱うときはいつもこの形になります。

何も無いときに、何を返すか

作品がまだ 1 件も無い場合、何も考えずに書くと空文字列が返ります。画面には何も出ず、まるで壊れているように見えます。そこで空配列のときは専用のメッセージを返します。判定は関数の先頭で済ませてしまうのがきれいです。

JavaScript

function joinTags(tags) {
  if (tags.length === 0) {
    return "タグはまだありません";
  }
  // ここから先は、要素が 1 つ以上あることが保証されている
}

先に特殊なケースを片付けると、そのあとは「要素がある場合」だけを考えればよくなります。空のとき、ひとつだけのとき。この 2 つはプログラムが壊れやすい境界で、テストでも必ず確認されます。要素が 1 つのときは i > 0 が一度も真にならないので、区切りが入らないことを手で追って確かめてください。

よくある間違い

番号がずれる — インデックスをそのまま使うと 0. から始まる一覧になります。表示用は 1 を足した値です
ためる変数をループの中で宣言する — let result = ""; を本体に書くと毎周からっぽに戻り、最後の 1 行しか残りません。宣言はループの前です

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

配列とループを組み合わせて、一覧の文字列を組み立てられます

区切り文字は要素の「うしろ」ではなく「あいだ」に置きます

作品が 1 件増えるたびに、表示を書き直している

プレーンテキスト

プロフィールサイト
自己紹介カード
スキル一覧の表

配列が持っているのは 0 から始まるインデックスだけなので、表示用の番号は自分で作ります。差はいつも 1 です。

インデックス	表示したい番号
`0`	`1`
`1`	`2`
`2`	`3`

番号が要るので、ここは for-of ではなく通常の for を選びます。足した結果を文字列とつなぐときは、丸カッコで囲んでおくと安全です。

JavaScript

console.log(1 + 1 + " 番目");
// => 2 番目
console.log("番号 " + 1 + 1);
// => 番号 11

区切りは「うしろ」ではなく「あいだ」に置く

行と行をつなぐ改行は \n と書きます。バックスラッシュと n の 2 文字で 1 つの改行です。

別の題材で形だけ見ておきます。タグを「、」でつなぐ例です。

JavaScript

const tags = ["HTML", "CSS", "JavaScript"];
let line = "";
for (let i = 0; i < tags.length; i++) {
  if (i > 0) {
    line += "、"; // 2 個目以降だけ、前に区切りを足す
  }
  line += tags[i];
}
console.log(line);
// => HTML、CSS、JavaScript

何も無いときに、何を返すか

JavaScript

function joinTags(tags) {
  if (tags.length === 0) {
    return "タグはまだありません";
  }
  // ここから先は、要素が 1 つ以上あることが保証されている
}

よくある間違い

番号がずれる — インデックスをそのまま使うと 0. から始まる一覧になります。表示用は 1 を足した値です
ためる変数をループの中で宣言する — let result = ""; を本体に書くと毎周からっぽに戻り、最後の 1 行しか残りません。宣言はループの前です

つくる作品リストを一覧にする

作品が 1 件増えるたびに、表示を書き直している

区切りは「うしろ」ではなく「あいだ」に置く

何も無いときに、何を返すか

よくある間違い

要件

入出力例

ヒント

メモ

つくる作品リストを一覧にする

作品が 1 件増えるたびに、表示を書き直している

区切りは「うしろ」ではなく「あいだ」に置く

何も無いときに、何を返すか

よくある間違い

要件

入出力例

ヒント

メモ

つくる 作品リストを一覧にする

作品が 1 件増えるたびに、表示を書き直している

区切りは「うしろ」ではなく「あいだ」に置く

何も無いときに、何を返すか

よくある間違い

要件

入出力例

ヒント

メモ

つくる 作品リストを一覧にする

作品が 1 件増えるたびに、表示を書き直している

区切りは「うしろ」ではなく「あいだ」に置く

何も無いときに、何を返すか

よくある間違い

要件

入出力例

ヒント

メモ

つくる作品リストを一覧にする

つくる作品リストを一覧にする