Webアプリ開発 React.js フロントエンド環境 Part(15) | 初心者向けWEB技術と機械学習のBlog

Contents

はじめに
React map関数
React 箇条書きリスト
keyとは？
まとめ

はじめに

swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。Webアプリ開発記事と述べていますが、未だに、公式ページをお手本にしているだけで、まだまだ道半ばです。

第14回では、公式サイトに従い、テスト用ドメインで、条件付きレンダーについて実装し確認しました。

引き続き、Reactの勉強を進めていきたいと思います。

React map関数

map関数は、配列に操作をシンプルな記述で行える便利な関数です。

Reactで使う前に、map関数の動作を確認してみることにしました。

第一引数を表示

console.log("---map test1----");
const numbers = [1, 2, 3, 4, 5];
numbers.map((num) => {
	console.log(num);
	}
)

第一引数には、配列の値が入っています。

 ---map test1----
 1
 2
 3
 4
 5

第一引数の値を４倍

const numbers = [1, 2, 3, 4, 5];
console.log("---map test2----");
numbers.map((num) => {
	console.log(num * 4);
	}
)

配列の値は４倍されました。

 ---map test2----
 4
 8
 12
 16
 20

第２引数の中身を確認

第２引数には、配列のIndex値(0,1,2,3,4)が入っているようです。第１引数と第２引数を乗算してみます。

const numbers = [1, 2, 3, 4, 5];
console.log("---map test3----");
numbers.map((num,ind) => {
	console.log(num * ind);
	}
)

第２引数に配列のIndex値が入っていることが確認できました。

 ---map test3----
 0
 2
 6
 12
 20

第３引数の中身を確認

配列をobject　文字列にして確認しました。

console.log("---map test4----");
const object = ["car", "person", "bike", "dog", "bus"];
object.map((num,ind,array) => {
	console.log(array);
	}
)

配列自身が入っているようです。Array(5)が５個表示されている点はよくわかっていません。

React 箇条書きリスト

１〜５の箇条書きリストを表示しています。アロー演算時の処理内容として、<li></li>を返しています。

const title= document.querySelector('#hello_world_19');

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

ReactDOM.render(<ul>{listItems}</ul>,title);

次に、関数NumberList内でレンダリングするようにコードを変更します。コードの改良なので、実行結果は変わりません。

const title= document.querySelector('#hello_world_20');

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,title);

しかし、開発者ツール確認すると、”react_devtools_backend.js:4026 Warning: Each child in a list should have a unique “key” prop.”というワーニングがでていました。key属性を持つように警告されてます。