ローマ数字コンバーターとインタラクティブなローマ数字チャートを作成する方法

ローマ数字はもはや私たちの日常生活に欠かせないものではありません。しかし、モニュメントや時計をデザインするとき、さらにはスポーツイベントにも使用します。

ローマ数字とは何ですか?

ローマ数字は古代ローマで始まり、何世紀にもわたってヨーロッパ全体で数字を書く一般的な方法でした。それらの使用は、ローマ帝国自体よりも長く存続しました。それらは、今日使用しているヒンドゥーアラビア数字のシステム(0から9までの数字)に徐々に置き換えられました。

ローマ数字は、このシステムで数字として機能するラテンアルファベットの文字の組み合わせで表されます。ただし、記号0〜9の10進数とは異なり、ローマ数字では7つの大文字のラテン文字I、V、X、L、C、D、Mが使用されます。

もともと、ゼロを表す1文字の指定はありませんでした。代わりに、彼らは「なし」を意味するラテン語のNullaを使用しました。

ローマ数字はどのように機能しますか?

これらの文字のヒンドゥーアラビア記数法の表現は次のとおりです。I= 1、V = 5、X = 10、L = 50、C = 100、D = 500、M = 1000

他の数が一定のルールごとにこれらの文字を組み合わせて形成されている:Aシンボルの配置同等以上の値の他、その値を加算します。

たとえば、   VI = V + I = 5 + 1 = 6またはLX = L + X = 50 + 10 = 60です。VIとLXの表記は、「5を超える1つ」および「50を超える10」と読みます。

大きい方の値の前に配置された記号は、その値を減算します。例えば、IXは= X - = 9 1、 - I = 10XC = C - X = 100 - 10 = 90

IXとXCの表記は、「10未満の1」および「100未満の10」と読みます。

1,000を超える数値は、記号の上にダッシュを置くことによって形成されます。したがって、V̅= 5,000X̅= 10,000L̅= 50,000C̅= 100,000D̅= 500,000M̅= 1,000,000です。

いわゆる「標準」形式では、同じ記号を3回以上続けて使用することはできません。しかし、時折、例外が見られることがあります。たとえば、番号4の場合はIIII、番号9の場合はVIII、90の場合はLXXXXです。

ローマ数字とその組み合わせのインタラクティブチャート

各記号にカーソルを合わせると、ヒンドゥーアラビア語に相当するものが表示されます。

I II III IV V VI VII VIII IX X XX XXX XL L LX LXX LXXX XC C CC CCC CD D DC DCC DCCCCMMV̅X̅L̅C̅D̅M̅

このインタラクティブなローマ数字チャートのコードを、freeCodeCampNewsに埋め込むために作成しました。

HTML埋め込み機能がフルスケールのコードエディタではないという事実を考えると、指定されたコードは構造化されておらず、個別のHTML、CSS、およびJavaScriptファイルとして表示されます。むしろそれは、単一のHTMLを持つファイルとして書かれているし、スタイリングと機能性のために追加された要素。

これが私のインタラクティブなローマ数字チャートの完全なコードリポジトリです。

ローマ数字コンバーター

0から5,000までの負でない整数を入力してください。次に、[変換]をクリックして、同等のローマ数字を表示します。

アラビア語からローマ数字
変換

5,000以上の数にプログラムによる制限はありません。変換を管理するアルゴリズムはすべて同じように機能します。

大きな数字に相当するローマ数字を表示するために必要なスペースは、新しいものを明らかにするという追加の利点なしに、ますます大きくなります。

コード自体は、対話を容易にするためのインラインスタイルでコンテンツを記述するHTMLパーツと、機能のために追加されたJavaScriptで構成されています。

は、入力データを数値と2つのボタンに制限する「数値」タイプの入力要素です。「変換」ボタンは変換を行う機能に接続されており、「表示」ボタンは同等のローマ数字を出力します。

なぜボタン要素を介して出力するのですか?スタイリングは、両方のボタンに一緒に適用するとうまく機能しました。また、埋め込みの機能が制限されていることを考えると、時間の節約に思えました。

わかりやすくするために、これらの要素は変数に割り当てられています。

const inputField = document.querySelector('input'); // input element const convertButton = document.getElementById('convert'); // convert button const outputField = document.getElementById('display'); // output element

関数convertToRoman()にはロジックが含まれ、結果をレンダリングします。

function convertToRoman() { let arabic = document.getElementById('arabicNumeral').value; // input value let roman = ''; // variable that will hold the result }

入力要素からの数値は、さらにテストするために「アラビア語」と呼ばれる変数に保存されます。「roman」という名前の変数は、アラビア語の入力に相当するローマ字を表す文字列を保持します。

次に、同じ長さの2つの配列があり、1つはアラビア数字を保持し、もう1つはローマ数字を保持します。減算を単純化するために、両方とも降順です。

// descending order simplifies subtraction while looping const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] const romanArray = ['V̅', 'MV̅','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'] 

Unicodeテーブルは、1,000を超える記号の形成に役立ちます。

最後に、入力された数値をテストして変換するロジックがあります。

if (/^(0|[1-9]\d*)$/.test(arabic)) { // Regular expression tests if (arabic == 0) { // for decimal points and negative outputField.innerHTML = "Nulla"; // signs } else if (arabic != 0) { for (let i = 0; i < arabicArray.length; i++) { while (arabicArray[i] <= arabic) { roman += romanArray[i]; arabic -= arabicArray[i]; } } outputField.innerHTML = roman; } } else { outputField.innerHTML = "Please enter non negative integers only. No decimal points."; }

最初のテストでは、小数点と負の符号をチェックします。見つかった場合、メッセージは「負でない整数のみを入力してください」と要求します。

次のテストでは、入力された数値がゼロに等しいかどうかを確認します。このような場合、文字列「Nulla」が表示されます。

それ以外の場合、ループは、アラビア数字がwhileループの条件を満たすまで、アラビア数字を減算しながらローマ数字を連結し続けます。次に、ユーザー入力に相当するローマ字を表示します。

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.