認知行動療法アプリ

1. どんな状況でしたか？

2. どんな感情を感じましたか？

3. どんな考えが頭をよぎりましたか？

4. 代替の考え方はありますか？
過去のエントリー

以下が、認知行動療法アプリの実装例となります。

```html
<!DOCTYPE html>
<html>
<head>
	<title>認知行動療法アプリ</title>
</head>
<body>
	<h1>認知行動療法アプリ</h1>

	<label for="situation">1. どんな状況でしたか？</label><br>
	<input type="text" id="situation"><br>

	<label for="emotions">2. どんな感情を感じましたか？</label><br>
	<input type="text" id="emotions"><br>

	<label for="thoughts">3. どんな考えが頭をよぎりましたか？</label><br>
	<input type="text" id="thoughts"><br>

	<label for="alternatives">4. 代替の考え方はありますか？</label><br>
	<input type="text" id="alternatives"><br>

	<button onclick="saveEntry()">保存する</button>

	<h2>過去のエントリー</h2>
	<div id="entries"></div>

	<script>
		function saveEntry() {
			// フォームから入力値を取得する
			const situation = document.getElementById("situation").value;
			const emotions = document.getElementById("emotions").value;
			const thoughts = document.getElementById("thoughts").value;
			const alternatives = document.getElementById("alternatives").value;

			// 入力値が空でなければ、オブジェクトにまとめる
			if (situation && emotions && thoughts && alternatives) {
				const entry = {
					situation: situation,
					emotions: emotions,
					thoughts: thoughts,
					alternatives: alternatives
				};

				// localStorageに保存する
				if (localStorage.getItem("entries")) {
					const entries = JSON.parse(localStorage.getItem("entries"));
					entries.push(entry);
					localStorage.setItem("entries", JSON.stringify(entries));
				} else {
					localStorage.setItem("entries", JSON.stringify([entry]));
				}

				// フォームをリセットする
				document.getElementById("situation").value = "";
				document.getElementById("emotions").value = "";
				document.getElementById("thoughts").value = "";
				document.getElementById("alternatives").value = "";

				// 過去のエントリーを再表示する
				showEntries();
			} else {
				alert("全ての項目を入力してください。");
			}
		}

		function showEntries() {
			// localStorageからエントリーを取得する
			if (localStorage.getItem("entries")) {
				const entries = JSON.parse(localStorage.getItem("entries"));

				// 空にする
				document.getElementById("entries").innerHTML = "";

				// 1つずつ表示する
				entries.forEach((entry) => {
					const div = document.createElement("div");
					div.innerHTML = `
						<h3>${entry.situation}</h3>
						<p>感情：${entry.emotions}</p>
						<p>考え：${entry.thoughts}</p>
						<p>代替の考え方：${entry.alternatives}</p>
					`;
					document.getElementById("entries").appendChild(div);

					// サプライズのジョークを表示する
					if (Math.random() < 0.05) {
						const p = document.createElement("p");
						p.innerHTML = "※おお、このエントリーに「こわかったぜ」というフレーズが！もしかして怪談の話？！<br>";
						document.getElementById("entries").appendChild(p);
					}
				});
			} else {
				document.getElementById("entries").innerHTML = "まだエントリーはありません。";
			}
		}

		// 初回表示時に過去のエントリーを表示する
		showEntries();
	</script>
</body>
</html>
```

このアプリでは、localStorageを使って、過去のエントリーを保存しています。localStorageが脆弱性を持っているわけではありませんが、ユーザーの個人情報などを扱う場合には、適切な暗号化とセキュリティ対策が必要です。

また、上記の実装では、過去のエントリーに対して、5%の確率でサプライズとして怪談の話を表示するというジョークを取り入れています。ただし、ジョークによってユーザーの不安感や恐怖を引き起こすようなことがあってはならないことに注意してください。