モールス信号アプリ開発記 - 二分木ビジュアライザーとフレーズ再生機能の実装

きっかけ

国際モールス符号の文字割り当てが二分木で表現できることを知り、それをインタラクティブに操作できる学習アプリをNuxt 3で作ることにした。元はReactで書かれた実装があり、それをVueに移植する形で開発を進めた。

モールス符号の全文字は、一本の二分木に収まる。STARTノードから左に進むとダッシュ(-)、右に進むとドット(・)を追加していく。各文字の符号がそのまま木の中の位置を決める。

           START
          /     \
       -(dash)  ・(dot)
        /         \
       T           E
      / \         / \
     M   N       A   I

サミュエル・モールスは、英語で最もよく使われる文字に短い符号を割り当てた。E(・)とT(-)は1符号で済む。この2文字だけで英文の約22%を占める。シャノンの情報理論（1948年）より100年以上前の直感的な最適化だった。

日本語の和文モールスでは「む」(-)と「へ」(・)が最短の1符号。「む」と「へ」が日本語で最頻出というわけではなく、英語版とは異なる設計思想で作られている。

実務では和文モールスはほぼ使われず、日本語もローマ字（欧文モールス）で打つのが主流。

数字(0-9)は全て5符号で統一されている。二分木でいうと最も深い階層に位置する。アルファベットのツリーに数字を統合するため、ツリーのmaxDepthを5に拡張した。

アプリの中心となる機能。SVGで二分木を描画し、英語(A-Z + 0-9)と日本語(ひらがな)の2つのツリーを切り替えて表示できる。

描画の設計:

文字を選択すると、音声が再生されると同時にツリー上のパスが順番にハイライトされる。

動作の流れ:

CSS transitionを使ったハイライトアニメーションで、符号の進行を目で追える。

単一文字だけでなく、定型フレーズをまとめて再生できる。

プリセットフレーズ:

父がアマチュア無線家で、コールサインはJA6OLU。子供の頃、無線機の前で「CQ CQ」と繰り返し呼びかけている姿をよく見ていた。このアプリでCQ CQのフレーズを再生すると、あの頃の光景を思い出す。

再生の仕組み:

デスクトップ表示では情報を効率よく配置した。

操作パネルとビジュアライゼーションを横に並べることで、ボタンを押してすぐにツリーの変化を確認できる。