ブラウザJavaScriptだけで、CGI掲示板ぽいやつを作る

# これはもしかしたら、ジョークプログラムかも、とお思いの皆さん・

- ご明察。
- JavaScript初心者が、Geminiくんに聞いて、JavaScriptで掲示板作って、と頼んだら作ってくれたものですね。
- （そのあと、JavaScript初心者が6時間ぐらい掛けて仕上げたものです。短いですが）

# 思い付きの発端

- GitHub Pagesに、掲示板CGIを設置したいけど、PerlもPHPも動かないよね。
- FC2とかの掲示板を借りるのはしゃくだよね。
- だったら、いっそのこと、Static HTMLとJavaScriptだけで掲示板って、作れないですかね～？

# やってみた。

- ギッハブに上げるほどでもないので、ソースを貼り付け
- （ちなみに、骨格は全部Geminiくんが書いてくれました）


``` index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>簡易掲示板</title>
</head>
<body>
<link rel="stylesheet" href="./style.css"/>
  <h1>掲示板</h1>
  <div id="thread-list"></div>
  <form id="new-thread-form">
    <label for="name">名前:</label>
    <input type="text" id="name">
    <br>
    <label for="message">本文:</label>
    <textarea id="message" cols="64"></textarea>
    <br>
    <button type="submit" onclick="postMsg()">投稿</button>
                                      <br><br><br><br>
    <button type="submit" onclick="clearMsg()">全データクリア</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

```

JavaScript
```script.js
// script.js

const threadList = document.getElementById('thread-list');
const newThreadForm = document.getElementById('new-thread-form');

var threads = [];

// ローカルストレージから読み込み.
function loadThreads() {
  const s1 = localStorage.getItem('data');
  if(s1 != '') {
	threads = JSON.parse( s1 );
  }
}
// スレッドデータをHTMLに変換する関数
function threadToHTML(thread) {
  return `
    <div class="thread">
      <div class="thread-name">${thread.name}</div>
      <div class="thread-message">${thread.message}</div>
    </div>
  `;
}
// スレッドを表示する関数
function displayThreads() {
  threadList.innerHTML = '';
  threads.forEach(thread => {
    threadList.innerHTML += threadToHTML(thread);
  });
}
// 新しいスレッドを追加する関数
function addThread(name, message) {
  threads.push({ name, message });
  displayThreads();
  // ローカルストレージに保管.
  const s1 = JSON.stringify(threads);
  localStorage.setItem('data', s1 );
}
// ローカルストレージ全消去.
function clearThread() {
  threads=[];
  // ローカルストレージに保管.
  const s1 = JSON.stringify(threads);
  localStorage.setItem('data', s1 );
}
// 投稿ボタン OnClick
function postMsg() {
  const name = document.getElementById('name').value;
  const message = document.getElementById('message').value;
  if((name!="")&&(message!="")) {
     addThread(name, message);
  }
  newThreadForm.reset();
}
// 全消去ボタン OnClick
function clearMsg() {
  clearThread();
}
// 最初のスレッドを表示する
// addThread('テストユーザー', 'これはテストスレッドです。');
loadThreads();
displayThreads();
//
```

- いらないかもだけど、CSS

```style.css
/* style.css */

body {
  font-family: sans-serif;
}

#thread-list {
  margin-bottom: 20px;
}

.thread {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.thread-name {
  font-weight: bold;
}

.thread-message {
  margin-top: 5px;
}

```

以上、JavaScript全くの初心者が人工知能に頼んで書いてもらったもの（を悪戦苦闘した結果）、でした。

スクショ

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28186/06ddf146-bfb3-f1f9-7308-0c54ff90133a.png)


# で、？

- 全クリアボタンはユーザーには見せないほうがいいでしょう。
- 投稿と同時に、なんらかのサーバーレスなストレージとか、自分のサイトに投稿ログを送信することで、投稿を集めることが可能。
- どんなに荒らされても、荒らしたデータは、その荒した人のブラウザのローカルストレージの中・・・というオチが楽しい。
- 自分用のメモ帳にも使えるかな。スマホとかで。ただし、異なるブラウザではデータは参照できません。
- もちろん、ブラウザのローカルストレージから投稿データを取得したり追加したりするかわりに、なんらかの外部ストレージ（Web API?）に保存したり参照したりすることが出来るように改造すれば、普通に掲示板になり得るかと・・・。
- （ただし、やるとは言ってない）