ひらがな・カタカナ・英字に対応したモールス信号変換ツールをJavaScriptで作成する方法

モールス信号を変換するツールを作ってみよう。

モールス信号は、通信や暗号などで利用される独自の符号化システムです。

文字や数字を点（・）と線（－）で表現し、電波や光などを使って送信されます。

今回、ひらがな、カタカナ、英字に対応したモールス信号変換ツールをJavaScriptで実装し、双方向の変換をリアルタイムで行えるWebページを作成していきます。

モールス信号とは？
今回作成するモールス信号変換ツールの概要
必要なモールス信号辞書
双方向変換機能の追加
画面構成のデザイン
最終的なコード
モールス信号の表
まとめ

モールス信号とは？

モールス信号は19世紀に発明された通信手段で、世界中で標準的に使用されてきました。各文字や数字は、短い信号（点）と長い信号（線）によって表現され、無線通信や緊急時の連絡手段として今でも使われることがあります。

今回作成するモールス信号変換ツールの概要

今回、次の機能を備えたJavaScriptツールを作成します。

テキストをモールス信号に変換：ひらがな、カタカナ、英字を対応するモールス信号に変換します。
モールス信号をテキストに変換：入力されたモールス信号を対応する文字に変換します。
双方向変換：テキストエリアを2つ配置し、片方にテキストを入力するともう片方にモールス信号が表示され、その逆も可能にします。

必要なモールス信号辞書

モールス信号の辞書には、英字とカタカナ、そしてひらがなに対応した符号を設定する必要があります。以下が、英字と日本語に対応するモールス信号の一部です。

const morseCodeDict = {
    'A': '.-', 'B': '-...', 'C': '-.-.', // 英字対応
    'ア': '.-', 'イ': '..', 'ウ': '...-', // カタカナ対応
    'あ': '.-', 'い': '..', 'う': '...-'  // ひらがな対応
};

双方向変換機能の追加

JavaScriptでの双方向変換はシンプルです。モールス信号に変換する関数と、モールス信号から文字に変換する関数を用意し、ユーザーが入力した際に動作するようにします。

テキストからモールス信号への変換

入力されたテキストをモールス信号に変換するには、次のように各文字をモールス信号辞書で対応させます。

function textToMorse(text) {
    return text.split('').map(char => morseCodeDict[char] || '').join(' ');
}

モールス信号からテキストへの変換

逆に、モールス信号を文字に戻す場合は、モールス信号の辞書を逆引きして変換を行います。

function morseToText(morse) {
    return morse.split(' ').map(code => reverseMorseCodeDict[code] || '').join('');
}

画面構成のデザイン

今回のツールは、左右にテキスト入力エリアを配置します。左側にテキストを入力すると右側にモールス信号が表示され、右側にモールス信号を入力すると左側に対応するテキストが表示されます。

HTMLとCSSでこのレイアウトを実装します。

HTMLとCSSの例

<div class="container">
    <!-- 入力エリア (テキスト) -->
    <textarea id="textInput" class="input-area" placeholder="テキストを入力してください"></textarea>
    <!-- 出力エリア (モールス信号) -->
    <textarea id="morseOutput" class="output-area" placeholder="モールス信号を入力してください"></textarea>
</div>

<style>
    .container { display: flex; }
    .input-area, .output-area {
        width: 50%;
        height: 100%;
        padding: 10px;
    }
</style>

最終的なコード

ひらがな、カタカナ、英字に対応したモールス信号変換ツールの全体コードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モールス信号変換ツール</title>
    <style>
        .container { display: flex; width: 80%; }
        textarea { width: 50%; height: 300px; padding: 10px; }
    </style>
</head>
<body>

<div class="container">
    <textarea id="textInput" class="input-area" placeholder="テキストを入力"></textarea>
    <textarea id="morseOutput" class="output-area" placeholder="モールス信号を入力"></textarea>
</div>

<script>
    const morseCodeDict = {
        'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.', 'F': '..-.',
        'G': '--.', 'H': '....', 'I': '..', 'J': '.---', 'K': '-.-', 'L': '.-..',
        'M': '--', 'N': '-.', 'O': '---', 'P': '.--.', 'Q': '--.-', 'R': '.-.',
        'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',
        'Y': '-.--', 'Z': '--..', '1': '.----', '2': '..---', '3': '...--',
        '4': '....-', '5': '.....', '6': '-....', '7': '--...', '8': '---..',
        '9': '----.', '0': '-----', ',': '--..--', '.': '.-.-.-', '?': '..--..',
        '/': '-..-.', '-': '-....-', '(': '-.--.', ')': '-.--.-', ' ': '/',
        'ア': '.-', 'イ': '..', 'ウ': '...-', 'エ': '-...', 'オ': '.---',
        'カ': '-.-.', 'キ': '-.-', 'ク': '...-', 'ケ': '-.-.-', 'コ': '.--.',
        'サ': '--.-', 'シ': '--.-.', 'ス': '----', 'セ': '---.', 'ソ': '---..',
        'タ': '-', 'チ': '..-', 'ツ': '-...', 'テ': '.-..-', 'ト': '.--..',
        'ナ': '-..-', 'ニ': '.-.', 'ヌ': '--..-', 'ネ': '.---.', 'ノ': '--.',
        'ハ': '-.', 'ヒ': '--..', 'フ': '....-', 'ヘ': '.....', 'ホ': '--.-..',
        'マ': '-..', 'ミ': '..--', 'ム': '-....', 'メ': '-.-.--', 'モ': '-.-..',
        'ヤ': '-.--', 'ユ': '..--', 'ヨ': '-.--..', 'ラ': '.--', 'リ': '.-.--',
        'ル': '...--', 'レ': '-.---', 'ロ': '.-.-', 'ワ': '-..--', 'ヲ': '.--.-',
        'ン': '-.-.-',
        'あ': '.-', 'い': '..', 'う': '...-', 'え': '-...', 'お': '.---',
        'か': '-.-.', 'き': '-.-', 'く': '...-', 'け': '-.-.-', 'こ': '.--.',
        'さ': '--.-', 'し': '--.-.', 'す': '----', 'せ': '---.', 'そ': '---..',
        'た': '-', 'ち': '..-', 'つ': '-...', 'て': '.-..-', 'と': '.--..',
        'な': '-..-', 'に': '.-.', 'ぬ': '--..-', 'ね': '.---.', 'の': '--.',
        'は': '-.', 'ひ': '--..', 'ふ': '....-', 'へ': '.....', 'ほ': '--.-..',
        'ま': '-..', 'み': '..--', 'む': '-....', 'め': '-.-.--', 'も': '-.-..',
        'や': '-.--', 'ゆ': '..--', 'よ': '-.--..', 'ら': '.--', 'り': '.-.--',
        'る': '...--', 'れ': '-.---', 'ろ': '.-.-', 'わ': '-..--', 'を': '.--.-',
        'ん': '-.-.-'
    };

    const reverseMorseCodeDict = Object.fromEntries(
        Object.entries(morseCodeDict).map(([char, morse]) => [morse, char])
    );

    function textToMorse(text) {
        return text.split('').map(char => morseCodeDict[char] || '').join(' ');
    }

    function morseToText(morse) {
        return morse.split(' ').map(code => reverseMorseCodeDict[code] || '').join('');
    }

    document.getElementById('textInput').addEventListener('input', function() {
        document.getElementById('morseOutput').value = textToMorse(this.value);
    });

    document.getElementById('morseOutput').addEventListener('input', function() {
        document.getElementById('textInput').value = morseToText(this.value);
    });
</script>

</body>
</html>

モールス信号の表

以下に、ひらがな・カタカナ・英字に対応したモールス信号の一覧表を作成しました。各文字に対して対応するモールス信号を表示しています。

ひらがな・カタカナ・英字に対応したモールス信号の表

文字	モールス信号	文字	モールス信号
あ / ア	.-	か / カ	-.-.
い / イ	..	き / キ	-.-
う / ウ	…-	く / ク	…-
え / エ	-…	け / ケ	-.-.-
お / オ	.—	こ / コ	.–.
さ / サ	–.-	し / シ	–.-.
す / ス	—-	せ / セ	—
そ / ソ	—..	た / タ	–
ち / チ	..-	つ / ツ	-…
て / テ	.-..-	と / ト	.–..
な / ナ	-..-	に / ニ	.-.
ぬ / ヌ	–..-	ね / ネ	.—.
の / ノ	–.	は / ハ	-.
ひ / ヒ	–..	ふ / フ	….-
へ / ヘ	…..	ほ / ホ	–.-..
ま / マ	-..	み / ミ	..–
む / ム	-….	め / メ	-.-.–
も / モ	-.-..	や / ヤ	-.–
ゆ / ユ	..–	よ / ヨ	-.–..
ら / ラ	.–	り / リ	.-.–
る / ル	…–	れ / レ	-.—
ろ / ロ	.-.-	わ / ワ	-..–
を / ヲ	.–.-	ん / ン	-.-.-

英字に対応したモールス信号の表

文字	モールス信号
A	.-
B	-…
C	-.-.
D	-..
E	.
F	..-.
G	–.
H	….
I	..
J	.—
K	-.-
L	.-..
M	—
N	-.
O	—
P	.–.
Q	–.-
R	.-.
S	…
T	–
U	..-
V	…-
W	.–
X	-..-
Y	-.–
Z	–..

数字に対応したモールス信号の表

数字	モールス信号
1	.—-
2	..—
3	…–
4	….-
5	…..
6	-….
7	–…
8	—..
9	—-.
0	—–

これらの表を参照しながら、ひらがな、カタカナ、英字のテキストをモールス信号に変換したり、逆にモールス信号をテキストに変換したりすることができます。

まとめ

今回の記事では、JavaScriptを使用してひらがな、カタカナ、英字に対応したモールス信号変換ツールを作成しました。

テキストをモールス信号に変換するだけでなく、逆にモールス信号をテキストに変換することも可能です。

双方向で動作するこのツールをぜひ活用してみてください。