【React】mapメソッドによる「リストのレンダー」を身につけるための練習問題
mapメソッド練習問題
配列に対するmapメソッドの処理を練習するための4つの問題をご用意しました。
mapメソッドは、引数として与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
詳しくは以下のMDNをご覧ください。
問題1
以下のnumbers配列の各要素を2倍にした新しい配列を、mapメソッドを用いて作成してください。コンソールへの出力や新たな配列名の定義は不要です。mapメソッドはreturnを省略せずに書いてください。
const numbers = [1, 2, 3, 4, 5];
// ここにコードを記述してください
模範解答
const numbers = [1, 2, 3, 4, 5];
numbers.map((number) => {
return number * 2;
});
問題2
以下のwords配列の各値の前後に「好きなフルーツは」「です」を結合した新しい配列を、mapメソッドを用いて作成してください。コンソールへの出力や新たな配列名の定義は不要です。mapメソッドはreturnを省略せずに書いてください。
const words = ["りんご", "バナナ", "オレンジ"];
// ここにコードを記述してください
模範解答
const words = ["りんご", "バナナ", "オレンジ"];
words.map((word) => {
return `好きなフルーツは${word}です`;
});
問題3
以下のReactコンポーネントは、words配列の要素をリスト表示しようとしています。mapメソッドを用いて、<li>単語</li>というように要素を生成するコードを完成させてください。JSX内で直接mapメソッドの処理を記述し、returnを省略せずに書いてください。なお、keyの設定は不要です。
import React from 'react';
const ItemList = () => {
const words = ["りんご", "バナナ", "オレンジ"];
return (
<ul>
{/* ここにコードを記述してください */}
</ul>
);
};
export default ItemList;
模範解答
import React from 'react';
const ItemList = () => {
const words = ["りんご", "バナナ", "オレンジ"];
return (
<ul>
{words.map((word) => {
return <li>{word}</li>;
})}
</ul>
);
};
export default ItemList;
問題4
以下のReactコンポーネントは、users配列の各ユーザー名を表示しようとしています。mapメソッドを用いて、<p>ユーザー名</p>というように要素を生成するコードを完成させてください。JSX内で直接mapメソッドの処理を記述し、returnを省略せずに書いてください。また、各要素に一意なkeyを設定してください。
import React from 'react';
const UserList = () => {
const users = ["信長", "秀吉", "家康"];
return (
<div>
{/* ここにコードを記述してください */}
</div>
);
};
export default UserList;
模範解答
import React from 'react';
const UserList = () => {
const users = ["信長", "秀吉", "家康"];
return (
<div>
{users.map((user, index) => {
return <p key={index}>{user}</p>;
})}
</div>
);
};
export default UserList;
なぜReactはkeyを必要とするのか
デスクトップ上のファイルに名前がない場合を想像してください。代わりに、最初のファイル、2 番目のファイルといったように、順番によってそれらを区別する必要があるとしましょう。そのうち番号に慣れるかもしれませんが、ファイルを削除した途端に混乱してしまいますね。2 番目のファイルが 1 番目のファイルになり、3 番目のファイルが 2 番目のファイルになり、という具合です。
フォルダ内のファイル名と JSX の key の目的は似ています。兄弟間で項目を一意に識別できるようにするのです。適切に選択された key は、配列内の位置よりも多くの情報を提供します。並べ替えによって位置が変更されたとしても、key のおかげで React はその項目が存在する限り、それを一意に識別できるのです。
皆さんいかがでしたでしょうか？
もっと多くの問題を解きたい場合、以下のように生成AIを用いて問題の作成と添削を依頼する勉強法がおすすめです。
もちろん、誤った情報を返す可能性もあるので、都度自分でも追加で調査を行うことを推奨します。
Discussion