# 環境構築前回バックエンドの実装が出来たので、フロントエンドの実装を行っていきます。まずはサクッと環境構築していきます。今回はtypescriptを使用したNext.js環境で開発を行います。合わせて必要なライブラリもインストールしておきます。今回はMaterial UIとreact-chartjs-2を使用します。 ```bash npx create-next-app@latest --ts npm install @mui/material @emotion/react @emotion/styled npm install @mui/icons-material npm install chart.js react-chartjs-2 ``` また、個人の好みではありますがソースコードは「src」以下に入っていた方がスッキリするので今回は少し構成を変更します。 ![20221123131500](//images.ctfassets.net/g03afh073hzw/7a6bPgh6oPnQgrfNXeCgZm/94f744d016502e41e6518f95ed4f746a/20221123131500.jpg) 「src」フォルダを作成し、その配下に「components」「layout」「pages」「services」「styles」「types」を作成しました。 ※API呼び出し処理を共通化する際に「services」にソースコードを格納しようと思いましたが、今回は使いませんでした。今後使用予定なのでとりあえず作っておきます。

# ページの骨組み作成 ## Header作成「Components」配下にHeaderフォルダとHeader.tsxを作成し [Material UI - App Bar](https://mui.com/material-ui/react-app-bar/) を参考にヘッダーを作成します。スマホなどから使う予定はないですが、とりあえず「Responsive App bar with Drawer」のコードをコピペし、リンクの設定や表示項目を変更します。 ```javascript import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; import Drawer from '@mui/material/Drawer'; import IconButton from '@mui/material/IconButton'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemText from '@mui/material/ListItemText'; import MenuIcon from '@mui/icons-material/Menu'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import Link from 'next/link'; interface Props { /** * Injected by the documentation to work in an iframe. * You won't need it on your project. */ window?: () => Window; } const drawerWidth = 240; const navItems = ['資産残高管理', '配当管理']; const navItemsUrl = ['assets', 'dividend']; const Header = (props: Props) => { const { window } = props; const [mobileOpen, setMobileOpen] = React.useState(false); const handleDrawerToggle = () => { setMobileOpen(!mobileOpen); }; const drawer = ( 資産管理アプリ {navItems.map((item, i) => ( ))} ); const container = window !== undefined ? () => window().document.body : undefined; return (

資産管理アプリ {navItems.map((item, i) => ( ))} {drawer}

); } export default Header; ```

## Layout作成全ページでHeaderを固定表示するためのLayoutを作成します。先ほど作成した「layout」フォルダにLayout.tsxを作成し、Headerを表示するよう記述します。また、今回はcssを使いたいので、「styles」フォルダにLayout.module.cssも作っておきます。 ```javascript import { ReactElement } from 'react'; import Header from '../components/Header/Header'; import styles from '../styles/Layout.module.css' type LayoutProps = Required<{ readonly children: ReactElement }> export const Layout = ({ children }: LayoutProps) => (

{children}

) ``` ```javascript .main { margin: 100px 0px 0px 100px; } ``` デフォルトの状態だとHeaderでコンテンツが隠れてしまうので、cssでmarginを設定しておきました。「pages」フォルダ配下にある「_app.tsx」にLyoutを追加します。 ```javascript import '../styles/globals.css' import type { AppProps } from 'next/app' import { Layout } from '../layout/Layout' export default function App({ Component, pageProps }: AppProps) { return ( ) } ``` これで前ページにHeaderが表示されるようになりました。 ※下記画像ではわかりやすいよう、「index.tsx」に「home」と表示する処理を追加して確認しています。 ![20221123133100](//images.ctfassets.net/g03afh073hzw/5pdxnSYMx42qymBoB8ENnu/ca2599b28c68f6decf434ae5e5088ba4/image.png)

# 資産残高管理ページ作成「pages」フォルダ配下に「assets.tsx」を作成し、本題の資産残高管理ページを作っていきます。 ## グラフの表示 Chart.js、react-chartjs-2では共に公式ページに色々なサンプルを載せてくれています。 Chart.js：[Chart.js - samples](https://www.chartjs.org/docs/latest/samples/information.html) react-chartjs-2：[react-chartjs-2 - samples](https://react-chartjs-2.js.org/examples) 今回は「Line Charts」を使用します。まずはサンプルをコピペして、動作することを確認します。「faker」が入っていない場合は、 Math.random()などを使うと動作するようになります。 ![20221123134400](//images.ctfassets.net/g03afh073hzw/1AubZQybqWr1u5YuTdX7Cq/8cfcabc98cbbd0260ed6bcec2b87870b/image.png) 動作することが確認できたので、APIからデータを取得してそれを表示するように修正していきます。事前に型の定義だけしておきます。「types」フォルダ配下に「assets.tsx」を作成し、APIで受け取るデータの型を定義しておきます。 ```javascript export interface IApp{ id: number; name: string; } export interface IChartData{ label: string; data: Array; borderColor: string; backgroundColor: string; } ``` 「pages/assets.tsx」を修正していきます。 useState()を使って、データを格納しておくための変数を用意しておきます。そして、useEffect()を使ってまずはアプリ一覧取得APIを呼び出し、「apps」に格納します。 ```javascript import React, { useEffect, useState } from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import axios from "axios"; import { IApp, IChartData } from '../types/assets'; import styles from '../styles/assets.module.css'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export const Assets = () => { // アプリ一覧 const [apps, setApps] = useState>(); // グラフ用データ const [chartData, setChartData] = useState>([]); // グラフ用ラベルデータ const [labels, setLabels] = useState>([]); // 更新用 const [update, setUpdate] = useState(false); useEffect(() => { // アプリ一覧取得 axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/appmaster/`) .then((response) => { setApps(response.data); createChartData(response.data); }); }, [update]); return (

); } export default Assets; ``` 「NEXT_PUBLIC_BACKENDURL」は「.env」に ```javascript NEXT_PUBLIC_BACKENDURL=http://localhost:8888 ``` 等のように定義しておきます。次に、グラフ用データを作成します。今回はアプリ毎に分けて表示するので、アプリの個数分APIを呼び出し、配列にデータを格納していきます。 ```javascript const createChartData = (appNames:Array) => { console.log(appNames); let temp: IChartData[] = []; appNames.map((e, i) => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-amount/?target=${e.name}`) .then((response) => { const value: IChartData = { label: e.name, data: response.data.data, borderColor: borderColorList[i], backgroundColor: backgroundColorList[i], } temp.push(value); if (temp.length === appNames.length){ setChartData(temp); } }); }); } ``` 最後にラベルを取得します。今回ラベルには登録日を使用します。こちらは事前に作成しておいたAPIを呼び出し「labels」に格納するだけです。 ```javascript useEffect(() => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-date/`) .then((response) => { setLabels(response.data.data) }); }, [update]); ``` これまでのものをすべてまとめ、取得したデータをChart.jsの関数に渡すと下記のようになります。 ```javascript import React, { useEffect, useState } from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import axios from "axios"; import { IApp, IChartData } from '../types/assets'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); const borderColorList: string[] = ['rgb(255, 99, 132)', 'rgb(53, 162, 235)'] const backgroundColorList: string[] = ['rgba(255, 99, 132, 0.5)', 'rgba(53, 162, 235, 0.5)'] export const options = { responsive: true, plugins: { legend: { position: 'top' as const, }, title: { display: true, text: '資産残高', }, }, }; export const Assets = () => { // アプリ一覧 const [apps, setApps] = useState>(); // グラフ用データ const [chartData, setChartData] = useState>([]); // グラフ用ラベルデータ const [labels, setLabels] = useState>([]); // 更新用 const [update, setUpdate] = useState(false); const createChartData = (appNames:Array) => { console.log(appNames); let temp: IChartData[] = []; appNames.map((e, i) => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-amount/?target=${e.name}`) .then((response) => { const value: IChartData = { label: e.name, data: response.data.data, borderColor: borderColorList[i], backgroundColor: backgroundColorList[i], } temp.push(value); if (temp.length === appNames.length){ setChartData(temp); } }); }); } useEffect(() => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/appmaster/`) .then((response) => { setApps(response.data); createChartData(response.data); }); axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-date/`) .then((response) => { setLabels(response.data.data) }); }, [update]); const data = { labels, datasets: chartData, }; return (

); } export default Assets; ``` 無事にグラフが表示されました。 ![20221123141600](//images.ctfassets.net/g03afh073hzw/5V1pbyzZ7yLdcF4SpJk7CG/62d13f2b354322904070abc651f2b9ce/image.png)

## グラフデータ一覧の表示続いて、データ一覧を表示するためのテーブルを追加していきます。見やすいようにアプリ毎にタブを分け、選択されたタブに対応するアプリのデータをテーブルで表示というようにしていきます。「components」配下に「Table」「Tabs」を作成します。 TabはMaterial UIを、テーブルは[こちら](https://codesandbox.io/s/material-ui-editable-tables-wsp0c?file=/src/index.js:0-4977)を参考に作成しました。 ■Table.tsx コードのほとんどは流用させていただいていますが、データ更新、削除などの処理を独自に追加しています。 ```javascript import React, { useState } from "react"; import { styled } from '@mui/material/styles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from "@mui/material/TableHead"; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Input from "@mui/material/Input"; import IconButton from "@mui/material/IconButton"; import EditIcon from "@mui//icons-material/EditOutlined"; import DoneIcon from "@mui//icons-material/DoneAllTwoTone"; import RevertIcon from "@mui//icons-material/NotInterestedOutlined"; import DeleteIcon from '@mui/icons-material/DeleteOutlined'; import { IAssetData } from '../../types/assets'; import axios from "axios"; // 型定義 export interface ICreateData{ [key: string]: string|number|boolean|null; } export interface ITableCell{ row:ICreateData; name:string; onChange:Function; } export interface IPrevious{ [id: string]: ICreateData; } export interface ITableProps{ appData: IAssetData[]; app: string; handleUpdate: Function; } const SimpleTableCell = styled(TableCell)(({ theme }) => ({ width: 150, height: 40 })); // セルコンポーネント。「isEditMode」がtrueの場合は「Input」、falseの場合はデータを表示する const CustomTableCell = ({ row, name, onChange }:ITableCell) => { const { isEditMode } = row; return ( {isEditMode ? ( onChange(e, row)} /> ) : ( row[name] )} ); }; // データ変換用関数。テーブル表示に合わせてデータを変換 const createData = ( id: number, asset_amount: number, diff: number, diff_rate: number, created_at: Date, managed_app: string, memo: string|null ) => { return ({ id: String(id), asset_amount: asset_amount, diff: diff, diff_rate: diff_rate, created_at: String(created_at), managed_app, memo, isEditMode: false }) }; // データ作成用関数 const createTableData = (appData:IAssetData[]|undefined, app:string) => { let data: ICreateData[] = []; if (appData !== undefined){ appData.map((d) => { data.push(createData(d.id, d.asset_amount, d.diff, d.diff_rate, d.created_at, app, d.memo)) }) } return data; } const CustomTable = ({appData, app, handleUpdate}:ITableProps) => { // テーブル表示用データ const [rows, setRows] = useState>(createTableData(appData, app)); const [previous, setPrevious] = useState({}); const onToggleEditMode = (id: string) => { setRows(state => { return rows.map(row => { if (row.id === id) { return { ...row, isEditMode: !row.isEditMode }; } return row; }); }); }; const onChange = (e:any, row:ICreateData) => { if (!previous[Number(row.id)]) { setPrevious(state => ({ ...state, [String(row.id)]: row })); } const value = e.target.value; const name = e.target.name; const { id } = row; const newRows = rows.map(row => { if (row.id === id) { return { ...row, [name]: value }; } return row; }); setRows(newRows); }; // データ更新用関数 const onUpdate = (id:string) => { rows.map(row => { if (row.id === id) { const tempRow = appData.filter(data => data.id.toString() === id)[0]; tempRow.asset_amount = Number(row.asset_amount); tempRow.diff = Number(row.diff); tempRow.diff_rate = Number(row.diff_rate); tempRow.memo = !row.memo ? null : row.memo.toString(); axios .put(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/assetlist/`, tempRow) .then((response) => { handleUpdate() }); } }) onToggleEditMode(id); }; // データ削除用関数 const onDelete = (id:string) => { rows.map(row => { if (row.id === id) { axios .delete(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/assetlist/?target=${id}`) .then((response) => { handleUpdate() }); } }) onToggleEditMode(id); }; return ( 資産額前回比（円）前回比（％）日付メモ {rows.map(row => ( {row.isEditMode ? ( <> onUpdate(String(row.id))} > onDelete(String(row.id))} > onToggleEditMode(String(row.id))} > ) : ( onToggleEditMode(String(row.id))} > )} ))}

); } export default CustomTable; ```
■Tabs.tsx 親コンポーネントから「アプリ一覧」「テーブルに表示するデータ」「更新用関数」を受け取ります。こちらも基本的には公式サンプルを流用していますが、・アプリの数に応じてタブを自動生成（map()を使用してアプリの数だけ実行）・タブが選択された際に渡す値をアプリの「id」とし、選択された値に応じて表示データを変えるといったような変更を加えています。 ```javascript import React, { useState } from "react"; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { IApp, IAssetData } from '../../types/assets'; import CustomTable from '../../components/Table/Table'; interface TabPanelProps { children?: React.ReactNode; index: number; value: number; } function TabPanel(props: TabPanelProps) { const { children, value, index, ...other } = props; return ( ); } function a11yProps(index: number) { return { id: `simple-tab-${index}`, 'aria-controls': `simple-tabpanel-${index}`, }; } interface BasicTabsProps { apps: Array; allData: IAssetData[]; handleUpdate: Function; } export default function BasicTabs({apps, allData, handleUpdate}: BasicTabsProps) { const [value, setValue] = useState(1); const [appData, setAppData] = useState>(allData.filter(data => data.managed_app === 1)); // 選択されたタブの値に応じて、表示データを変更する const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); setAppData(allData.filter(data => data.managed_app === newValue)) }; return ( {apps.map((m, index) => ( ))} {apps.map((m, index) => ( {(appData !== undefined) && } ))} ); } ``` 「pages/assets.tsx」を修正して、テーブル表示に使用するデータの取得、タブとテーブルを表示するようにします。 ```javascript useEffect(() => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/appmaster/`) .then((response) => { setApps(response.data); createChartData(response.data); }); axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-date/`) .then((response) => { setLabels(response.data.data) }); // 追加。テーブル表示用データ取得 axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/assetlist/`) .then((response) => { setAllData(response.data); }); }, [update]); return (

{/* 追加 */}

{(apps !== undefined) && (allData !== undefined) && }

); ``` レイアウト調整のためにcssファイルも作成しておきます。 ```javascript .content_wrapper { display: flex; flex-wrap: wrap; } .chart { width: 800px; } .table { width: 920; } ``` 想定通り表示されました！ ![20221123144500](//images.ctfassets.net/g03afh073hzw/1HXgdOwAvD9Z3YH1WVlwcI/60097c68410048c98d06373ffa3df098/image.png)

## 新規データ登録ボタンせっかくなので新規データ登録ボタンも作成しておきます。ボタンをクリック→ダイアログが開き、データ入力、データ登録というようにしたいので、これまで同様Components配下にDialogコンポーネントを作っていきます。こちらもMaterial UIのサンプルを流用する形で作りました。今回入力項目とするのは「資産額」「メモ」「アプリ」の3つのみでそれ以外の項目はバックエンド側で自動入力という形にしています。また、「アプリ」に関しては、毎回入力するのが面倒なのでSelectボックスを使用しました。各項目の入力部分とエラーチェック、POSTメソッド（データ登録API呼び出し）を記述していきます。 ```javascript import React, { useState } from 'react'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import Box from '@mui/material/Box'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import FormHelperText from '@mui/material/FormHelperText'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import { IApp } from '../../types/assets'; import axios from "axios"; interface RegisterAssetDialogProps { open: boolean; setOpen: Function; apps: Array; handleUpdate: Function; } export default function RegisterAssetDialog({open, setOpen, apps, handleUpdate}: RegisterAssetDialogProps) { // 資産額 const [asset, setAsset] = useState(''); // メモ const [memo, setMemo] = useState(''); // アプリ const [appId, setAppId] = useState(''); // 各項目エラー用 const [assetError, setAssetError] = useState(false); const [assetErrorMsg, setAssetErrorMsg] = useState(''); const [appIdError, setAppIdError] = useState(false); const [appIdErrorMsg, setAppIdErrorMsg] = useState(''); // 資産額入力のたびに呼び出され、値を変数に格納 const handleChangeAsset = (event: React.ChangeEvent) => { setAsset(event.target.value); setAssetError(false); setAssetErrorMsg(''); }; // メモ入力のたびに呼び出され、値を変数に格納 const handleChangeMemo = (event: React.ChangeEvent) => { setMemo(event.target.value); }; // アプリ選択のたびに呼び出され、値を変数に格納 const handleChangeAppId = (event: SelectChangeEvent) => { setAppId(event.target.value); setAppIdError(false); setAppIdErrorMsg(''); }; // Registerボタン押下時に呼び出され、データ登録APIを呼び出す const handleRegister = () => { if (asset === ''){ setAssetError(true); setAssetErrorMsg('入力してください'); return -1; } if (appId === ''){ setAppIdError(true); setAppIdErrorMsg('選択してください'); return -1; } const data = {'asset': asset, 'memo': memo, 'app': appId}; axios .post(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/assetlist/`, data) .then((response) => { handleUpdate(); handleClose(); }); }; // ダイアログを閉じる const handleClose = () => { setOpen(false); }; return (

); } ``` これまで同様「pages/assets.tsx」に追加していきます。最終的なソースコード全文は以下になります。 ```javascript import React, { useEffect, useState } from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import axios from "axios"; import { IApp, IChartData, IAssetData } from '../types/assets'; import styles from '../styles/assets.module.css'; import BasicTabs from '../components/Tabs/Tabs'; import Button from '@mui/material/Button'; import RegisterAssetDialog from '../components/Dialog/RegisterAssetDialog'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); const borderColorList: string[] = ['rgb(255, 99, 132)', 'rgb(53, 162, 235)'] const backgroundColorList: string[] = ['rgba(255, 99, 132, 0.5)', 'rgba(53, 162, 235, 0.5)'] export const options = { responsive: true, plugins: { legend: { position: 'top' as const, }, title: { display: true, text: '資産残高', }, }, }; export const Assets = () => { // アプリ一覧 const [apps, setApps] = useState>(); // グラフ用データ const [chartData, setChartData] = useState>([]); // グラフ用ラベルデータ const [labels, setLabels] = useState>([]); // テーブル表示様データ const [allData, setAllData] = useState>(); // 更新用 const [update, setUpdate] = useState(false); // ダイアログのOpen/Close制御用 const [open, setOpen] = useState(false); // グラフ表示用データ作成関数 const createChartData = (appNames:Array) => { console.log(appNames); let temp: IChartData[] = []; appNames.map((e, i) => { axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-amount/?target=${e.name}`) .then((response) => { const value: IChartData = { label: e.name, data: response.data.data, borderColor: borderColorList[i], backgroundColor: backgroundColorList[i], } temp.push(value); if (temp.length === appNames.length){ setChartData(temp); } }); }); } useEffect(() => { // アプリ一覧取得 axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/appmaster/`) .then((response) => { setApps(response.data); createChartData(response.data); }); // ラベルデータ取得 axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/asset-date/`) .then((response) => { setLabels(response.data.data) }); // テーブル表示用データ取得 axios .get(`${process.env.NEXT_PUBLIC_BACKENDURL}/api/asset-management/v1/assetlist/`) .then((response) => { setAllData(response.data); }); }, [update]); // 更新用関数。データが更新された際にAPIの再呼び出しを行う const handleUpdate = () => { setUpdate(!update); } // ダイアログのオープン用関数 const handleClickOpen = () => { setOpen(true); }; const data = { labels, datasets: chartData, }; return (

{(apps !== undefined) && (allData !== undefined) && }

{(apps !== undefined) && }

); } export default Assets; ``` 下記のように表示されていればOKです。 ![20221123150300](//images.ctfassets.net/g03afh073hzw/N9f0vkZIGs7OGRJQwMWtE/cd7c608513c6027568dfb57e2ab130d3/image.png) ![20221123150500](//images.ctfassets.net/g03afh073hzw/1DxDW30KUPo6eFHmP36gdZ/368c51a90e6744e34e6cf83721cdaf6d/image.png) 全ファイルは下記に格納してあります。 [https://github.com/hachi0088/AssetManagement/tree/v1.0.0](https://github.com/hachi0088/AssetManagement/tree/v1.0.0)