以下が人脈マッチングアプリの実装例です。セキュリティを重視したコードを書いています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人脈マッチングアプリ</title>
</head>
<body>
<h1>人脈マッチングアプリ</h1>
<form onsubmit="return false;">
<label for="name">名前:</label>
<input type="text" id="name"><br>
<label for="age">年齢:</label>
<input type="text" id="age"><br>
<label for="job">職業:</label>
<input type="text" id="job"><br>
<label for="interests">趣味・興味:</label>
<input type="text" id="interests"><br>
<label for="looking_for">探している人柄:</label>
<input type="text" id="looking_for"><br>
<button onclick="submitProfile()">プロフィールを投稿する</button>
</form>
<div id="profiles"></div>
<script>
let profiles = [];
function submitProfile() {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let job = document.getElementById("job").value;
let interests = document.getElementById("interests").value;
let looking_for = document.getElementById("looking_for").value;
// フォームバリデーション
if (!name || !age || !job || !interests || !looking_for) {
alert("全ての項目を入力してください。");
return;
}
// HTMLエスケープ
name = htmlEscape(name);
age = htmlEscape(age);
job = htmlEscape(job);
interests = htmlEscape(interests);
looking_for = htmlEscape(looking_for);
// プロフィール投稿
profiles.push({name: name, age: age, job: job, interests: interests, looking_for: looking_for});
let html = renderProfiles();
document.getElementById("profiles").innerHTML = html;
}
function renderProfiles() {
let html = "";
for (let i = 0; i < profiles.length; i++) {
let profile = profiles[i];
html += "<div>";
html += "<b>" + profile.name + "（" + profile.age + "歳）</b><br>";
html += "職業: " + profile.job + "<br>";
html += "趣味・興味: " + profile.interests + "<br>";
html += "探している人柄: " + profile.looking_for + "<br>";
html += "</div><hr>";
}
return html;
}
function htmlEscape(str) {
return str.replace(/[&'`"<>]/g, function(match) {
let escape = {
"&": "&",
"'": "'",
"`": "`",
"\"": """,
"<": "<",
">": ">"
};
return escape[match];
});
}
</script>
</body>
</html>
```
このアプリは、プロフィールを入力するフォームがあり、それを投稿することでプロフィール一覧が表示されます。プロフィールを入力する際、全ての項目を入力しなかった場合には、エラーメッセージが表示されます。また、HTMLエスケープを行うことで、XSS攻撃を防止しています。
ジョークとしては、「一緒にバレーボールができ、身長が175cm以下の人を探しています」という内容を掲載すると面白いかもしれません。
