この記事ではReactを学習中の方を対象として、配列を展開してJSXにレンダリングする方法を解説します。
どのプログラミング言語でも、どのフレームワークでも、現場で配列が使われていることは多くあります。なので、配列の使い方を押さえておくことは非常に重要となります。
今回は、for文、map関数を使った展開方法と、filter関数を使った絞り込みについて解説します。
サンプルコードも用意しておりますので、是非ご自身のPCでプログラムを動かして理解してみてください。
この記事では以下の2点を学習することが出来ます。Reactを学習中の方は参考にしてください！
- Reactで配列をレンダリングする方法
- Reactでオブジェクトの配列をレンダリングする方法
Reactで配列をレンダリングする方法
それでは、実際にデータを作成してJSXに表示する方法について解説していきます。
JSXについて詳しく知りたい方はこちらの記事をご覧ください。
Reactで使用するJSXとは？ | JavaScript構文を理解する
アプリケーション作成の準備
アプリケーションのひな型を作成し、ひな形のファイルの中にソースコードを書き込んでいく形でプログラムを作成します。
まだアプリケーションの作成準備が出来ていない方はこちらの記事を参考にして、開発に必要なパッケージ等をインストールしてください。
VSCodeでReactの開発環境を整える！手順とおすすめ拡張機能を紹介
アプリケーションのひな形を準備
npx create-react-app sample
今回のサンプルを実装するために新しくcreate-react-appコマンドを使用して新しくアプリケーションのひな形を作成します。
この記事では上記を実行してsampleという名前のアプリケーションを立ち上げます。
スタイルの準備
create-react-appコマンドを使用すると、デフォルトで専用のCSSが適用されています。今回はCSSを調整したいので、index.cssに以下のスタイルを定義してください。
.item {
margin: 0;
padding: 0;
text-align: left;
}
.item p {
margin: 0;
padding: 0;
font-weight: bold;
}
.item h1 {
margin: 0;
padding: 0;
font-weight: bold;
}
配列の準備
今回、ソースコードを書くのはindex.jsです。まずは純粋な配列をレンダリングするため、以下のように定義をしてください。
// 配列の宣言
const arr = [0, 1, 2, 3, 4];for文を利用したレンダリング
シンプルなfor文を使用して要素を返す方法でレンダリングします。
ReactDOM.render(
<LoopItems arr={arr} />,
document.getElementById('root')
);今回はLoopItemsという関数を作成して、実行します。関数の呼び出し元を上記のようにしてください。
これはarrで定義した配列をLoopItems関数に渡して実行した後、rootというIDを持つ要素の中に実行結果をレンダリングするという意味になります。
function LoopItems({arr}){
const items = [];
for(let i = 0; i < arr.length; i++){
items.push(<p>{arr[i]}</p>);
}
return(
<div class="item">
<h1>for文を使った例</h1>
{items}
</div>
);
}関数LoopItemsを上記のように定義します。
itemsは関数の実行結果を返す値として定義します。
引数として渡ってきたarrを1つずつ取り出して、pタグで囲った後にitemsに格納しています。
npm startで実行すると、ブラウザに図のように0～4までの5つの数字が表示されます。
map関数を利用したレンダリング
次にJavaScriptの配列の関数である、map関数を使用して値を渡してみます。
ReactDOM.render(
<MapItems arr={arr} />,
document.getElementById('root')
);関数の呼び出し元は上の例のようにMapItemsと変更してください。この関数で配列をレンダリングします。
function MapItems({arr}){
const items = arr.map((arrItem) => <p>{arrItem}</p>);
return(
<div class="item">
<h1>map関数を使った例</h1>
{items}
</div>
);
}上記のようにMapItems関数を定義します。
mapメソッドに関してはReact独自のものではなくJavaScriptにある配列のメソッドとなります。
これは、配列を元に処理を行い、新しく作成した配列を返すものです。
参考：NDM Web Docs Array.prototype.map()
npm startで実行するとブラウザが立ち上がり、0～4までの5つの数字が表示されることが分かります。
filter関数を使用してみよう！
次に、filter関数を使用してレンダリングする要素を絞り込みます。
ReactDOM.render(
<FilterItems arr={arr} />,
document.getElementById('root')
);関数の呼び出し元を上記のようにFilterItemsという関数に変更します。
それでは、FilterItems関数を作成していきます。
function FilterItems({arr}){
const items = [];
const arrItems = arr.filter((item => {
return item != 0;
}));
for(let i = 0; i < arrItems.length; i++){
items.push(<p>{arrItems[i]}</p>);
}
return(
<div class="item">
<h1>filterを使った例</h1>
{items}
</div>
);
}上記のようにFilterItems関数を定義します。
この例ではfilter関数で値が0以外のものに限定して、新しい配列を返しています。
filter関数もmap関数と同じくJavaScriptの配列のメソッドです。
参考：NDM Web Docs Array.prototype.filter()
npm startで実行するとブラウザが立ち上がり、0以外の4つの数字が表示されることが分かります。
オブジェクトの配列をレンダリングしてみよう！
それでは今度は、数値の配列を表示する際に作成したLoopItem、MapItems、FilterItemsの3つの関数を改造してオブジェクトの配列をレンダリングしてみましょう。
配列の準備
スタイルや関数の呼び出し元となるソースはシンプルな配列で使用したものと同じものを使用します。
そのため、新しくオブジェクトの配列のみを定義します。
オブジェクトの配列を準備
const obj = [
{ id: 1, data: "data1" },
{ id: 2, data: "data2" },
{ id: 3, data: "data3" },
{ id: 4, data: "data4" }
];今回は4つのオブジェクトを配列にしました。
for文を利用したレンダリング
呼び出し元に関しては数値を配列にした例と同様ですので、ここではfor文を利用して配列を処理する関数の内部を示します。
function LoopItems({arr}){
const items = [];
for(let i = 0; i < arr.length; i++){
items.push(<p>ID{arr[i].id}のデータは{arr.data}です。</p>);
}
return(
<div class="item">
<h1>for文を使った例</h1>
{items}
</div>
);
}配列の処理からオブジェクトの配列を扱うためにfor文の中を以下のように書き換えています。
items.push(<p>{arr[i]}</p>);
↓
items.push(<p>ID{arr[i].id}のデータは{arr.data}です。</p>);これでitemsに渡す文章にオブジェクトから取り出した値を反映することができます。
ブラウザで確認すると、オブジェクトで定義されているidとdataが参照され、表示されることが分かります。
map関数を利用したレンダリング
次にmap関数を使用した例を書き換えてみます。
function MapItems({arr}){
const items = arr.map((arrItem) => <p>ID{arrItem.id}のデータは{arrItem.data}です。</p>);
return(
<div class="item">
<h1>map関数を使った例</h1>
{items}
</div>
);
}配列を扱った処理からオブジェクトの配列を扱う処理にするため、変更したのはitemsに値を設定する個所で以下のように変更しています。
const items = arr.map((arrItem) => <p>{arrItem}</p>);
↓
const items = arr.map((arrItem) => <p>ID{arrItem.id}のデータは{arrItem.data}です。</p>);これでmap関数により渡される文章をオブジェクトから取り出した値に変更することができます。
ブラウザで確認をすると、各オブジェクトのidとdataに設定した値が表示されていることが分かります。
filter関数を使用してみよう！
それでは最後に、filter関数を使用したものを書き換えてみましょう。
function FilterItems({arr}){
const items = [];
const delItemsId = 3;
const arrItems = arr.filter((item => {
return item.id != delItemsId;
}));
for(let i = 0; i < arrItems.length; i++){
items.push(<p>ID{arrItems[i].id}のデータは{arrItems.data}です。</p>);
}
return(
<div class="item">
<h1>filterを使った例</h1>
{items}
</div>
);
}新しくdelItemsIdという定数を定義して、表示しないid番号を設定しておきます。今回はidが3のものを非表示としたいので、3を設定しておきます。
そして、表示したいオブジェクトだけをfilter関数により取り出すために、以下のように変更を加えます。
return item != 0;
↓
return item.id != delItemsId;もちろん、上のような変更をせず、「return item.id != 3;」としても同様の結果が得られます。
今回の処理はあまり変わりませんが、処理の中に決まった値を使用する場合は定数を定義することをおすすめします。
理由としてはもっと大規模な関数を扱うようになってくると、上記のidの値を判定するような個所が増える場合が良くあり、その際にメンテナンス性が良くなるからです。
複数個所に3を直接入力していると、もし判定したいidが2に変更されたときに全ての「3」を「2」に手作業で書き換えなくてはならず、ミスの原因になります。
定数を使用していれば、判定したいidが変更された場合でも数字を変更する個所が定義部分の1ヵ所のみとなるためミスを減らすことができます。
次に、メインとなる改造個所を見ていきましょう。
items.push(<p>{arrItems[i]}</p>);
↓
items.push(<p>ID{arrItems[i].id}のデータは{arrItems.data}です。</p>);こちらもfor文やmap関数と同様にオブジェクトの内容を参照して画面に出力する要素をitemsに代入しています。
ブラウザで確認すると、きちんとidが3のオブジェクトを除いたものが表示されていることが分かります。
サンプルコード
この項目ではサンプルコードを示します。
こちらのコードで動作確認をする場合は、関数の呼び出し元の部分を動作確認したい関数名に変更してください。
配列のレンダリング
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
const arr = [0, 1, 2, 3, 4];
function LoopItems({arr}){
const items = [];
for(let i = 0; i < arr.length; i++){
items.push(<p>{arr[i]}</p>);
}
return(
<div class="item">
<h1>for文を使った例</h1>
{items}
</div>
);
}
function MapItems({arr}){
const items = arr.map((arrItem) => <p>ID{arrItem.id}のデータは{arrItem.data}です。</p>);
const items = arr.map((arrItem) => <p>{arrItem}</p>);
return(
<div class="item">
<h1>map関数を使った例</h1>
{items}
</div>
);
}
function FilterItems({arr}){
const items = [];
const delItemsId = 3;
const arrItems = arr.filter((item => {
return item != 0;
}));
for(let i = 0; i < arrItems.length; i++){
items.push(<p>{arrItems[i]}</p>);
}
return(
<div class="item">
<h1>filterを使った例</h1>
{items}
</div>
);
}
// 関数の呼び出し元
ReactDOM.render(
<LoopItems arr={obj} />,
document.getElementById('root')
);呼び出し元の部分はfor文による処理を呼び出しています。
map関数を使った処理を呼び出したいときは「LoopItems」の部分を「MapItems」に、filter関数を使った処理を呼び出したいときには「FilterItems」と書き換えてください。
オブジェクトのレンダリング
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
const obj = [
{ id: 1, data: "data1" },
{ id: 2, data: "data2" },
{ id: 3, data: "data3" },
{ id: 4, data: "data4" }
];
function LoopItems({arr}){
const items = [];
for(let i = 0; i < arr.length; i++){
items.push(<p>ID{arr[i].id}のデータは{arr.data}です。</p>);
}
return(
<div class="item">
<h1>for文を使った例</h1>
{items}
</div>
);
}
function MapItems({arr}){
const items = arr.map((arrItem) => <p>ID{arrItem.id}のデータは{arrItem.data}です。</p>);
return(
<div class="item">
<h1>map関数を使った例</h1>
{items}
</div>
);
}
function FilterItems({arr}){
const items = [];
const delItemsId = 3;
const arrItems = arr.filter((item => {
return item.id != delItemsId;
}));
for(let i = 0; i < arrItems.length; i++){
items.push(<p>ID{arrItems[i].id}のデータは{arrItems.data}です。</p>);
}
return(
<div class="item">
<h1>filterを使った例</h1>
{items}
</div>
);
}
// 関数の呼び出し元
ReactDOM.render(
<LoopItems arr={obj} />,
document.getElementById('root')
);まとめ
今回はReactで配列を扱うための方法をご紹介いたしました。
配列は必ず使用するものですし、オブジェクトに関しても近年のプログラミング言語では避けて通るのは難しいでしょう。
こちらで基本を押さえ、ご自分のスキルにしてください。
また、開発においてはcreate-react-appではなくreact-scriptsを使用する方法もあります。
そちらも是非、試してみてください。