JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLとJavaScriptで温度コンバーターを作成する方法をわかりやすく解説

HTMLとJavaScriptを組み合わせれば、摂氏（℃）の値を入力すると自動的に華氏（℉）へ変換してくれる温度コンバーターを簡単に作成できます。本記事では、そのまま使えるサンプルコードをもとに、仕組みや実装のポイントまで丁寧に解説します。

温度コンバーターのサンプルコード

以下が、HTMLとJavaScriptだけで実装した温度コンバーターの完全なコード例です。テキストエディターに貼り付けて拡張子「.html」で保存し、ブラウザーで開けばすぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    input,span{
        font-size: 20px;
    }
</style>
</head>
<body>
<h1>Temperature Converter</h1>
<h2>摂氏（℃）の温度を入力すると華氏（℉）に変換されます</h2>
<p>
<label>Celsius：</label>
<input id="inputCelsius" type="number" placeholder="Celsius"
oninput="CtoFConverter(this.value)" onchange="CtoFConverter(this.value)">
</p>
<p>Fahrenheit：<span class="fahrenheit"></span></p>
<script>
    function CtoFConverter(temp) {
        document.querySelector(".fahrenheit").innerHTML = temp * 1.8 + 32;
    }
</script>
</body>
</html>

コードのポイント解説

1. 数値入力フィールドの準備

<input>要素に type="number" を指定することで、数値以外の文字が入力されるのを防いでいます。また placeholder 属性を設定しておくと、入力欄にヒントとなるテキストを表示でき、ユーザーにとって分かりやすいインターフェースになります。

2. リアルタイム変換を実現するイベント処理

oninput イベントと onchange イベントの両方に関数を紐付けているのがポイントです。特に oninput はキー入力のたびに発火するため、「変換」ボタンを押すことなく、数字を打ち込んだ瞬間に結果が更新されます。

3. 摂氏から華氏への変換式

摂氏から華氏への変換には、次の計算式を使用します。

華氏（℉）＝ 摂氏（℃）× 1.8 ＋ 32

例えば摂氏100度（水の沸点）であれば、100 × 1.8 ＋ 32 ＝ 212℉ となり、正しく変換できていることが確認できます。

4. 変換結果の画面表示

document.querySelector() メソッドでクラス名「fahrenheit」を持つ <span> 要素を取得し、innerHTML プロパティに計算結果を代入することで、ページ上に変換後の温度を表示しています。

実行結果

上記のコードをブラウザーで開くと、まず次のような画面が表示されます。

HTMLとJavaScriptで温度コンバーターを作成する方法をわかりやすく解説

摂氏の温度を入力すると、入力内容に合わせて華氏の値がリアルタイムに表示されます。

HTMLとJavaScriptで温度コンバーターを作成する方法をわかりやすく解説

まとめ

このように、HTMLの入力フォームとJavaScriptのイベント処理を組み合わせることで、わずか数十行のコードで実用的な温度コンバーターを作成できます。さらに学習を深めたい方は、華氏から摂氏への逆変換機能の追加や、絶対温度であるケルビン（K）への対応などにも挑戦してみると良いでしょう。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini