配列のレンダリング方法を解説2022年2月21日hcb-masterこの記事ではReactを学習中の方を対象として、配列を展開してJSXにレンダリングする方法を解説します。どのプログラミング言語でも、どのフレームワークでも、現場で配列が使われていることは多くあります。配列の使い方を押さえておくことは非常に重要となります。今回は、for文、map関数を使った展開方法と、filter関数を使った絞り込みについて解説します。サンプルコードも用意しておりますので、是非ご自身のPCでプログラムを動かして理解してみてください。この記事では以下の2点を学習することが出来ます。Reactを学習中の方は参考にしてください!Reactで配列をレンダリングする方法Reactでオブジェクトの配列をレンダリングする方法Reactで配列をレンダリングする方法それでは、実際にデータを作成してJSXに表示する方法について解説していきます。JSXについて詳しく知りたい方はこちらの記事をご覧ください。JavaScript構文を理解するアプリケーション作成の準備アプリケーションのひな型を作成し、ひな形のファイルの中にソースコードを書き込んでいく形でプログラムを作成します。アプリケーションの作成準備が出来ていない方はこちらの記事を参考にして、開発に必要なパッケージ等をインストールしてください。sample今回のサンプルを実装するために新しくcreate-react-appコマンドを使用して新しくアプリケーションのひな形を作成します。この記事では上記を実行してsampleという名前のアプリケーションを立ち上げます。スタイルの準備create-react-appコマンドを使用すると、デフォルトで専用のCSSが適用されています。今回はCSSを調整したいので、index.cssに以下のスタイルを定義してください。今回、ソースコードを書くのはindex.jsです。純粋な配列をレンダリングするため、以下のように定義をしてください。4];for文を利用したレンダリングシンプルなfor文を使用して要素を返す方法でレンダリングします。document.getElementById('root'));今回はLoopItemsという関数を作成して、実行します。関数の呼び出し元を上記のようにしてください。これはarrで定義した配列をLoopItems関数に渡して実行した後、rootというIDを持つ要素の中に実行結果をレンダリングするという意味になります。);}関数LoopItemsを上記のように定義します。itemsは関数の実行結果を返す値として定義します。引数として渡ってきたarrを1つずつ取り出して、pタグで囲った後にitemsに格納しています。startで実行すると、ブラウザに図のように0~4までの5つの数字が表示されます。map関数を利用したレンダリング次にJavaScriptの配列の関数である、map関数を使用して値を渡してみます。document.getElementById('root'));関数の呼び出し元は上の例のようにMapItemsと変更してください。この関数で配列をレンダリングします。);}上記のようにMapItems関数を定義します。mapメソッドに関してはReact独自のものではなくJavaScriptにある配列のメソッドとなります。これは、配列を元に処理を行い、新しく作成した配列を返すものです。startで実行するとブラウザが立ち上がり、0~4までの5つの数字が表示されることが分かります。filter関数を使用してみよう!次に、filter関数を使用してレンダリングする要素を絞り込みます。document.getElementById('root'));関数の呼び出し元を上記のようにFilterItemsという関数に変更します。それでは、FilterItems関数を作成していきます。);}上記のようにFilterItems関数を定義します。この例ではfilter関数で値が0以外のものに限定して、新しい配列を返しています。filter関数もmap関数と同じくJavaScriptの配列のメソッドです。startで実行するとブラウザが立ち上がり、0以外の4つの数字が表示されることが分かります。オブジェクトの配列をレンダリングしてみよう!それでは今度は、数値の配列を表示する際に作成したLoopItem、MapItems、FilterItemsの3つの関数を改造してオブジェクトの配列をレンダリングしてみましょう。配列の準備スタイルや関数の呼び出し元となるソースはシンプルな配列で使用したものと同じものを使用します。そのため、新しくオブジェクトの配列のみを定義します。}];今回は4つのオブジェクトを配列にしました。for文を利用したレンダリング呼び出し元に関しては数値を配列にした例と同様ですので、ここではfor文を利用して配列を処理する関数の内部を示します。items.push(<p>ID{arr[i].id}のデータは{arr.data}です。);}配列の処理からオブジェクトの配列を扱うためにfor文の中を以下のように書き換えています。items.push(<p>{arr[i]}</p>);↓items.push(<p>ID{arr[i].id}のデータは{arr.data}です。</p>);これでitemsに渡す文章にオブジェクトから取り出した値を反映することができます。ブラウザで確認すると、オブジェクトで定義されているidとdataが参照され、表示されることが分かります。map関数を利用したレンダリング次にmap関数を使用した例を書き換えてみます。<p>ID{arrItem.id}のデータは{arrItem.data}です。);}配列を扱った処理からオブジェクトの配列を扱う処理にするため、変更したのはitemsに値を設定する個所で以下のように変更しています。<p>ID{arrItem.id}のデータは{arrItem.data}です。</p>);これでmap関数により渡される文章をオブジェクトから取り出した値に変更することができます。ブラウザで確認をすると、各オブジェクトのidとdataに設定した値が表示されていることが分かります。filter関数を使用してみよう!それでは最後に、filter関数を使用したものを書き換えてみましょう。items.push(<p>ID{arrItems[i].id}のデータは{arrItems.data}です。);}新しくdelItemsIdという定数を定義して、表示しないid番号を設定しておきます。今回はidが3のものを非表示としたいので、3を設定しておきます。表示したいオブジェクトだけをfilter関数により取り出すために、以下のように変更を加えます。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のオブジェクトを除いたものが表示されていることが分かります。サンプルコードこの項目ではサンプルコードを示します。こちらのコードで動作確認をする場合は、関数の呼び出し元の部分を動作確認したい関数名に変更してください。<p>ID{arrItem.id}のデータは{arrItem.data}です。document.getElementById('root'));呼び出し元の部分はfor文による処理を呼び出しています。map関数を使った処理を呼び出したいときは「LoopItems」の部分を「MapItems」に、filter関数を使った処理を呼び出したいときには「FilterItems」と書き換えてください。items.push(<p>ID{arr[i].id}のデータは{arr.data}です。<p>ID{arrItem.id}のデータは{arrItem.data}です。items.push(<p>ID{arrItems[i].id}のデータは{arrItems.data}です。document.getElementById('root'));まとめ今回はReactで配列を扱うための方法をご紹介いたしました。配列は必ず使用するものですし、オブジェクトに関しても近年のプログラミング言語では避けて通るのは難しいでしょう。こちらで基本を押さえ、ご自分のスキルにしてください。開発においてはcreate-react-appではなくreact-scriptsを使用する方法もあります。そちらも是非、試してみてください。