今回の記事はReactで配列情報からmap関数を使って一覧表描写を行う方法に関して、ご紹介します。初心者にもわかりやすいように記載していくので是非参考にしていただければ幸いです。
Reactプロジェクト環境構築
まずは基礎となる「React」と「TypeScript」のプロジェクトを作成しましょう。
npx create-react-app sample001 --template typescriptこれでプロジェクトが作成されます。私はVSCodeで行っておりますので下記のようになっております。
これでプロジェクト作成完了です。ターミナルを開き作成されたプロジェクトに入り、ローカルサーバーを立ててみましょう。
cd sample001
npm startこれで下記をブラウザで表示するとReactページを表示することができます。
Reactでmap関数による配列の一覧表示
まずはお手軽な一覧表を作る場合、map関数を採用して良いと思います。
Reactでの画面描写は基本的にJSXというHtmlとは違った要素を積み上げて描写を行なっています。（基本的な画面の作り方はHtmlの感触と同じ。）
ちなみにmap関数の使い方に関しては下記記事で解説しているのでmap関数が何かというのを知りたい方はまずは下記を参照ください。
ではコードを記載していきます。基本的には上記で構築した環境の「src/App.tsx」ファイルのみを編集して操作を行います。
import React from 'react';
import './App.css';
// オブジェクト型
type SampleObject = {
'obj1':string,
'obj2':string,
}
// 配列1（通常の配列）
const list1:string[] = ['param1','param2','param3'];
// 配列2（オブジェクト配列）
const list2:SampleObject[] = [
{
obj1:'obj1',
obj2:'obj2',
},
{
obj1:'obj3',
obj2:'obj4',
}
];
function App() {
return (
<div className="App" >
{list1.map((data) =>
<div key={data}>
<li>{data}</li>
</div>
)}
{list2.map((data) =>
<div key={data.obj1}>
<li>{data.obj1}:{data.obj2}</li>
</div>
)}
</div>
);
}
export default App;これでbuildすると見た目は悪いですが、下記のような画面が表示されます。
見た目の部分はMaterialUI等を使って調整してください。他にもReactで一覧表示を行う方法としてはいくつか方法があるのでその中でも私のおすすめ方法として、ご紹介します。
Reactで配列を使ったその他の一覧表示方法
DataGridは他のプログラミング言語を触っていてもよく出てくる表現だと思います。データベース等の連携で配列がオブジェク型になっている場合はこちらを利用した方が楽に実装できます。また、基本的にMaterialUIは画面の見た目部分に関してはかなり優秀なフレームワークなのでWeb開発を行う上で確実に押さえておいた方が良い技術と思われます。以下に関連記事を記載していくので興味がある方は確認して見てください。
「MaterialUIの使い方ご紹介」
「MaterialUIのDataGridを使って一覧を表示する方法」← 今回と同様の内容
「MaterialUIのDataGridにデータベースから取得したデータを一覧表示する方法ご紹介。」
では今回の記事は以上です。他にもReact関連の記事を多数記載しているので興味がある方は是非他の記事も参考にして見てください。
コメント