最近、AIの進化が話題ですが、「実際に何ができるの？」と感じている方も多いのではないでしょうか。
今回は、AIを使って“西暦を和暦に変換するWebアプリ”を、たった1つのHTMLファイルで作ってみました。
しかも、専門的な知識がなくてもOK。
AIに「西暦を和暦に変換するWebアプリを作って」とお願いするだけで、必要なHTML・CSS・JavaScriptをすべて含んだコードを生成してくれます。
■実際に生成されたコード：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>西暦→和暦 変換アプリ</title>
<style>
body {
font-family: sans-serif;
padding: 2em;
background: #f9f9f9;
}
h1 {
color: #333;
}
input, button {
font-size: 1.2em;
padding: 0.5em;
margin: 0.5em 0;
}
#result {
margin-top: 1em;
font-weight: bold;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>西暦 → 和暦 変換アプリ</h1>
<label for="yearInput">西暦を入力してください：</label><br/>
<input type="number" id="yearInput" placeholder="例: 2025" />
<button onclick="convertToWareki()">変換</button>
<div id="result"></div>
<script>
function convertToWareki() {
const year = parseInt(document.getElementById("yearInput").value);
const result = document.getElementById("result");
if (isNaN(year) || year < 645) {
result.textContent = "有効な西暦年を入力してください（645年以降）";
return;
}
const eras = [
{ name: "令和", start: 2019 },
{ name: "平成", start: 1989 },
{ name: "昭和", start: 1926 },
{ name: "大正", start: 1912 },
{ name: "明治", start: 1868 }
];
const era = eras.find(e => year >= e.start);
if (era) {
const eraYear = year - era.start + 1;
result.textContent = `${era.name}${eraYear === 1 ? "元" : eraYear}年`;
} else {
result.textContent = "明治以前の和暦には対応していません";
}
}
</script>
</body>
</html>
■実際にどのようにして作成したのか
以下のブログを参考にして...
西暦を和暦に変換するwebアプリを作成して
すべてのコードを1つのHTMLファイルに含むSPA（シングルページアプリケーション）として作成してください
というプロンプトを会社のCopilotに投げました。
すると上記の実際に生成されたコードが作成されました。
あとはメモ帳を開いて実際に生成されたコードを貼り付けてt.htmlで保存してブラウザで開くと
テキストボックスに西暦を打ち込んで変換を押下すると和暦に変換してくれます。
驚きです。
しかも、アプリを作成するときに
すべてのコードを1つのHTMLファイルに含むSPA（シングルページアプリケーション）として作成してください
のメッセージを入れていることでHTMLファイル一つだけで配布が可能！！
以上、５分でwebアプリを作成してみました。