FetchAPI を使って SPA のページを作成

次のようなページを作成します。
![spa_apr1701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/bcab0a3a-c15a-2d7a-5c2d-dd972bae9dbd.png)

履歴をクリック
![spa_apr1702.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0db87704-7f60-bb66-91b9-10a31559290b.png)

フォルダーの構造

```text
$ tree
.
├── css
│   └── public_doc.css
├── doc
│   ├── action.txt
│   ├── grafana.txt
│   ├── history.txt
│   ├── maintenance.txt
│   ├── mariadb.txt
│   ├── nginx.txt
│   ├── server.txt
│   ├── top.txt
│   └── wiolte.txt
├── index.html
└── public_doc.js
```

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<meta content="Uchida Masatomo" name="author">
<script src="public_doc.js"></script>
<link rel="stylesheet" href="css/public_doc.css">
<title>WioLTE 計測システム</title>
</head>

<body>
<h2>WioLTE 計測システム</h2><p />
<blockquote>
	<button id="action"  onclick="fetch_proc(this)">動作仕様</button>
	<button id="wiolte"  onclick="fetch_proc(this)">WioLTE仕様</button>
	<button id="server"  onclick="fetch_proc(this)">サーバー仕様</button>
	<button id="mariadb" onclick="fetch_proc(this)">MariaDB</button>
	<button id="grafana" onclick="fetch_proc(this)">Grafana</button>
	<button id="history" onclick="fetch_proc(this)">履歴</button>
</blockquote>

<div class="contents"></div>
<p />
<hr />

<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>

<hr />
Apr/17/2022 AM 11:21<p>
</body>
</html>
```

```js:public_doc.js
// -----------------------------------------------------------------------
//	public_doc.js
//
//					Apr/17/2022
//
// -----------------------------------------------------------------------
'use strict'
// -----------------------------------------------------------------------
window.onload = ()=>{

	document.querySelector("#outarea_aa").innerHTML = "*** public_doc *** start ***"
	display_information("top")

	document.querySelector("#outarea_hh").innerHTML = "*** public_doc *** end ***"
}

// -----------------------------------------------------------------------
// [4]:
function display_information(title)
{
	const file_in = "./doc/" + title + ".txt"

	const data_aa = read_fetch_proc(file_in)
}

// -----------------------------------------------------------------------
// [4-6]:
function read_fetch_proc(url)
{
fetch(url).then((response) => {
        if(!response.ok) {
            console.log('Read error!')
            throw new Error('error')
        } 
        console.log('Read ok!')
        return response.text()
    }).then((data)  => {
        console.log(data)
	document.querySelector(".contents").innerHTML = data
    }).catch((error) => {
        console.log(error)
    })
}

// -----------------------------------------------------------------------
// [8]:
function fetch_proc(obj)
{
	const key = obj.id

	document.querySelector("#outarea_bb").innerHTML = key + " clicked ***"

	const matches = document.querySelectorAll("button")

	console.log("matches.length = " + matches.length)
	for (var it=0; it < matches.length; it += 1)
		{
		const id = matches[it].id
		console.log("id = " + id)
		const elemx = document.getElementById(id)
		elemx.style.color = 'black'
		}

	const elem = document.getElementById(key)
	elem.style.color = 'blue'

	display_information(key)
}

// -----------------------------------------------------------------------
```

```cs:css/public_doc.css
/* -------------------------------------------------------------- */
/*

	public_doc.css

						Aug/24/2020

*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}

th {
	background: #c6c6c6;
}


table.tag {
border:0.5px green solid;
}

tr.cyan {
	background-color: #c7d7c7;
}

.red {color:#ff0000;}

/* -------------------------------------------------------------- */
```