配列から一覧を描画する

解説

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

• 「1 件を要素に変えて return する関数」を切り出すと、まわす側が短くなります
• forEach の中の return は、その 1 回ぶんを終えて次へ進むという意味です

変数名の末尾に番号が増えていく

前回つくったのは 1 つぶんです。もう 2 つ足したくなったら、同じ数行を名前だけ変えてもう一度、さらにもう一度と書くことになります。

2 や 3 が変数名の末尾に増えていくコードは、たいてい何かがおかしいという合図です。第5章で配列を学び、第6章で forEach を学び、第7章でオブジェクトの配列を扱ったのは、この場面のためでした。ここで 3 つが合流します。

やることは 2 つです。表示したい情報をオブジェクトの配列にまとめること。そして「1 件から要素をつくる関数」を書き、配列をまわして呼ぶことです。これができると、増やしたいときに書き足すのは配列の 1 行だけになります。組み立てのコードは 1 か所のまま増えません。

forEach の中に組み立てを直接書くと読めない

forEach のコールバックの中に 10 行の組み立てを書き下ろすと、まわしているのか組み立てているのか分からない塊になります。1 件ぶんを関数に切り出し、できた要素を返させます。

前回の組み立てとの違いは 2 つだけです。固定の文字だったところが hobby.label になったことと、最後に return item で要素を返していることです。関数が返せるのは数値や文字列だけではありません。要素も 1 つの値なので、そのまま返せます。

この関数には、DOM に足す処理を入れていません。つくって返すところで止めておくと、どこに足すかを呼ぶ側が決められます。1 つの関数に 1 つの仕事だけをさせておくと、あとで使い回しが効きます。

出したくない 1 件だけ飛ばす

配列の中には、まだ人に見せたくないものが混ざります。そこで、データの側に「出すかどうか」を持たせます。

if (!hobby.show) { return; } が、飛ばす部分です。第6章で学んだ早期 return の形をそのまま使っています。ここでの return は、コールバック 1 回ぶんを終えるという意味です。forEach 全体が止まるわけではなく、次の要素の処理はふつうに続きます。for ループの continue と同じはたらきだと考えると分かりやすくなります。

こうしておくと、表示のコードを 1 文字も直さずに、公開と非公開を切り替えられます。データを直すだけで画面が変わる。この形をデータ駆動と呼びます。

解説

作品の配列も、第7章で決めた形をそのまま使います。1 件は title year views published の 4 つを持ち、published が公開の可否を表します。上の show にあたるのがこの published です。

よくある間違い

• 関数の中で return を忘れる — 関数は undefined を返し、append(undefined) は文字列の "undefined" を足します。要素のかわりにその文字だけが並んだら、まず最後の行を見ます
• createElement を forEach の外に置く — 要素は 1 件ごとに新しくつくらないといけません。外で 1 つだけつくって使いまわすと、前回学んだとおり同じ要素が移動するだけで、最後の 1 件しか残りません
• return で全部止まると思う — 止まりません。飛ばすだけです。1 件見つかったら終わりにしたい処理は forEach に向かないので、第7章の find を使います

1. extraWorks に 3 件のオブジェクトを入れる。中身は「JavaScript のメモ帳 / 2026 / 0 / true」「クリックできるボタン / 2026 / 8 / true」「つくりかけの計算機 / 2026 / 3 / false」
2. createWorkCard(work) を書く。article.work-card の中に h3 と p.work-meta を入れ、つくった要素を return する
3. p.work-meta の文字は "2026 年 / 8 回表示" の形にする。work.year と work.views から組み立てる
4. extraWorks を forEach でまわし、published が false のものは return で飛ばして .work-list に足す