JavaScript｜基数変換計算フォームの作り方【サンプル有】

2023年11月9日

プログラミングやIT関係を学んでいると、2進数、10進数の変換などがよく出てきます。

いちいち手計算をしていると時間がかかります。
そこで今回は基数変換をするwebアプリをJavaScriptで作る方法を解説します。

HTML、JavaScrpt、CSSの三つに分けて解説していきます。

完成したもの

今から作るアプリのイメージを掴むために完成したwebアプリの紹介です。

数値を入力し元の基数と変換後の基数を選択すると、変換してくれる簡単なwebアプリです。

間違った入力の際は、エラーメッセージを出すようにバリデーションも行っています。

HTML

早速コードを見ていきましょう！

まずはHTMLのコードです。ファイル名はindex.htmlにしています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数値形式変換器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
  <div class="form-group">
    <label for="numberInput">数値入力:</label>
    <input type="text" id="numberInput" class="form-control" placeholder="数値を入力">
  </div>

  <div class="form-group">
    <label for="baseInput">元の進数:</label>
    <select id="baseInput" class="form-control">
      <option value="2">2進数</option>
      <option value="8">8進数</option>
      <option value="10" selected>10進数</option>
      <option value="16">16進数</option>
    </select>
  </div>

  <div class="form-group">
    <label for="baseOutput">変換後の進数:</label>
    <select id="baseOutput" class="form-control">
      <option value="2">2進数</option>
      <option value="8">8進数</option>
      <option value="10">10進数</option>
      <option value="16">16進数</option>
    </select>
  </div>
  
<button class="btn" onclick="convertNumber()">変換</button>

<p id="errorMessage" class="error-message"></p> <!-- エラーメッセージを表示する -->
<p class="result">変換結果: <span id="result"></span></p>

</div>

<script src="converter.js"></script>
</body>
</html>

HTMLではユーザーが数値と基数を入力し、変換結果を表示するためのフォームを定義しています。
基数の入力はプルダウンから選択する形式にしています。

各入力要素には、スタイリングとJavaScript関数との連携を容易にするためのidをつけています。

JavaScriptを使用するので<script></script>でconverter.jsを指定しています。
名前は自分が作成するJavaScriptのファイル名に合わせてください。

同様にcssを適用するためにclassもつけています。

ボタンがクリックされるとconvertNumber関数が呼び出されます。
この関数はJavaScriptのコードに書いてあるので後ほど紹介します。

errorMessageは、エラーメッセージを表示するための空の段落です。
入力値に誤りがあった場合にこの段落にメッセージを表示します。

CSSのコード

次はcssのコードです。

CSS

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-control {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-top: 5px;
    box-sizing: border-box; /* 追加 */
  }
  
  .btn {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: #0056b3;
  }
  
  .result {
    margin-top: 15px;
  }


.error-message {
    color: #ff0000;
    margin-top: 10px;
  }

cssは基本的なものしかないです。各要素のサイズやマージン、色を指定しています。

errorMessageクラスは先ほど用意した空の段落に描かれるメッセージの文字の色を指定しています。
エラー時にユーザーが視覚的にわかりやすいように赤色で表示するのが良いと思います。

サイズや色などの要素を変えることでオリジナルのデザインの計算フォームを作ってみてください！

JavaScriptのコード

最後はJavaScriptのコードです。実際に数値の変換などを行う関数を定義しています。

JavaScript

function convertNumber() {
    // エラーメッセージをクリア
    document.getElementById('errorMessage').textContent = '';
  
    // 入力値と基数を取得
    var number = document.getElementById('numberInput').value;
    var baseInput = parseInt(document.getElementById('baseInput').value);
    var baseOutput = parseInt(document.getElementById('baseOutput').value);
  
    // 入力値のバリデーション
    if (!number.match(/^[0-9a-fA-F]+$/)) {
      document.getElementById('errorMessage').textContent = '有効な数値を入力してください。';
      return;
    }
  
    // 基数に応じたバリデーション
    if ((baseInput === 2 && !number.match(/^[0-1]+$/)) ||
        (baseInput === 8 && !number.match(/^[0-7]+$/)) ||
        (baseInput === 16 && !number.match(/^[0-9a-fA-F]+$/))) {
      document.getElementById('errorMessage').textContent = '選択した基数に対する有効な数値を入力してください。';
      return;
    }
  
    // 入力値を10進数に変換
    var decimal = parseInt(number, baseInput);
  
    // 10進数を出力基数に変換
    var result = decimal.toString(baseOutput);
  
    // 結果を表示
    document.getElementById('result').textContent = result.toUpperCase(); // 16進数の場合は大文字で表示
  }