【Labs】Microsoft CopilotにJavaScriptで作ってもらった摂氏・華氏の温度変換ツール
こんにちは(・∀・)
web design lab中の人です。
摂氏と華氏の変換ができる、ブラウザで動くプログラムをPHPとJavaScriptで作って欲しいってMicrosoft Copilotにお願いしてできたツール。
結果、JavaScript版で十分だった。
Microsoft CopilotにJavaScriptで作ってもらった摂氏・華氏の温度変換ツール
AIで簡単なツールが作れるのか、以前試してみたところ、十分使えそうなレベルだったので、今回計算ツールを作らせてみた。
↑こんな感じで質問して、返ってきた回答は二通り。
1. JavaScriptだけで完結する版（おすすめ）
2. PHP＋JavaScript版（フォーム送信でPHPでも計算）
JavaScript版で十分だったので、1. JavaScriptだけで完結する版（おすすめ）を採用。
PHP版も見たかったって場合、Copilotに同じ質問を投げれば見れると思う。
では、実際のコードとサンプルはこちら。
JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>摂氏・華氏変換ツール</title>
<style>
body { font-family: sans-serif; margin: 40px; }
label { display: block; margin-top: 12px; }
input { padding: 4px 8px; }
button { margin-top: 12px; padding: 6px 12px; }
.result { margin-top: 16px; font-weight: bold; }
</style>
</head>
<body>
<h1>摂氏・華氏変換ツール</h1>
<label>
摂氏 (°C):
<input type="number" id="celsius" step="0.1">
</label>
<label>
華氏 (°F):
<input type="number" id="fahrenheit" step="0.1">
</label>
<button id="toF">摂氏 → 華氏 に変換</button>
<button id="toC">華氏 → 摂氏 に変換</button>
<button id="reset">リセット</button>
<div class="result" id="result"></div>
<script>
const cInput = document.getElementById('celsius');
const fInput = document.getElementById('fahrenheit');
const result = document.getElementById('result');
document.getElementById('toF').addEventListener('click', () => {
const c = parseFloat(cInput.value);
if (isNaN(c)) {
result.textContent = '摂氏の値を入力してください。';
return;
}
const f = c * 9 / 5 + 32;
fInput.value = f.toFixed(1);
result.textContent = `${c.toFixed(1)} °C = ${f.toFixed(1)} °F`;
});
document.getElementById('toC').addEventListener('click', () => {
const f = parseFloat(fInput.value);
if (isNaN(f)) {
result.textContent = '華氏の値を入力してください。';
return;
}
const c = (f - 32) * 5 / 9;
cInput.value = c.toFixed(1);
result.textContent = `${f.toFixed(1)} °F = ${c.toFixed(1)} °C`;
});
</script>
</body>
</html>
サンプルでは、「input」と「button」に「background:lightblue;」を設定してる。
Result
↑
十分いいんだけど、リセットボタンと、キーボードでもエンターしたいな。
ということで、「JavaScript版を採用した。リセットボタンと、キーボードでもエンターしたい。」とさらに投げてみる。
で、返ってきた回答がこれ。
JavaScriptを置き換えて、
JavaScript
<script>
const cInput = document.getElementById('celsius');
const fInput = document.getElementById('fahrenheit');
const result = document.getElementById('result');
const convertCtoF = () => {
const c = parseFloat(cInput.value);
if (isNaN(c)) {
result.textContent = '摂氏の値を入力してください。';
return;
}
const f = c * 9 / 5 + 32;
fInput.value = f.toFixed(1);
result.textContent = `${c.toFixed(1)} °C = ${f.toFixed(1)} °F`;
};
const convertFtoC = () => {
const f = parseFloat(fInput.value);
if (isNaN(f)) {
result.textContent = '華氏の値を入力してください。';
return;
}
const c = (f - 32) * 5 / 9;
cInput.value = c.toFixed(1);
result.textContent = `${f.toFixed(1)} °F = ${c.toFixed(1)} °C`;
};
document.getElementById('toF').addEventListener('click', convertCtoF);
document.getElementById('toC').addEventListener('click', convertFtoC);
// Enterキー対応
cInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') convertCtoF();
});
fInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') convertFtoC();
});
// リセットボタン
document.getElementById('reset').addEventListener('click', () => {
cInput.value = '';
fInput.value = '';
result.textContent = '';
});
</script>
HTMLのボタンを一つ追加。
HTML
<button id="reset">リセット</button>
Result
あとはサイトにあったデザインにCSSを変更するだけ。
1分もかからずにここまでできるって、AIはやっぱり便利だな。今回はCopilotで作ってみたけど、ChatGPTやGeminiで試しても面白いかもね。
働き方がどんどん変わっていくー
contents
Labs
HTML
CSS
LOCAL
Mac
iPhone iPad
JavaScript
jQuery
Camera
GIMP
Inkscape
DaVinci Resolve
Guide
WebTool
Blog
HTML
CSS
LOCAL
Mac
iPhone iPad
JavaScript
jQuery
Camera
GIMP
Inkscape
DaVinci Resolve
Guide
WebTool
Blog
参考
組織向けの AI ツール | Microsoft Copilot