浮動小数点数を可視化できる無料アプリを公開【使い方つき】

前回の記事で、浮動小数点数のしくみを解説しました。

「説明は分かったけど、実際に自分で確かめながら練習したい」という人向けに、数値を入力するとビット列がその場で見える「浮動小数点数ビジュアライザ」を作りました。

この記事では、アプリの使い方を一つずつ丁寧に説明します。

アプリはこちら

※ うまく表示されない場合は、こちらのページから開いてください。

画面上のほうにある入力欄に、確かめたい数値を入力してみましょう。

0.1 や -12.375 のように、10進数の数を入力するだけでOKです。ボタンを押さなくても、入力した瞬間にビットが自動で並び替わります。

うまく反映されない場合は、Enter キーを押すか、いったん別の場所をタップしてみてください。

入力した数値は、32個の四角(ビット)に分解されて表示されます。

色ごとに役割が決まっています。

色が塗られている(濃い色になっている)四角が「1」、白っぽい四角が「0」を表しています。

このビットは実際にクリックして反転させることもできます。 気になるビットを押してみると、数値がどう変わるか確認できます。「指数部の1つのビットを変えるだけで、こんなに数が変わるんだ」という感覚をつかむのにおすすめです。

ビットストリップの下には、符号・指数・仮数それぞれの内訳が表示されています。

それぞれのカードには「💡なぜ？」というリンクがあります。タップすると、「なぜ127を引くのか」「なぜ先頭に1を付けるのか」といった理由がその場で読めるようになっています。解説記事とあわせて読むと、より理解が深まると思います。

一番下には、今表示されている数がどんな式で計算されているかが表示されます。

$(-1)^{符号} \times 1.仮数部 \times 2^{(指数-127)}$

の形に、実際の数字がそのまま当てはめられて表示されるので、「公式に自分で数字を当てはめる」練習としても使えます。

「自分で問題を作るのが大変」という人は、入力欄の横にある 「🔀 ランダム」 ボタンを使ってみてください。

押すたびに、きれいに2進数で表せる数値がランダムに表示されます。表示された数を見て、まずは自分でビット列を予想してから、実際のビットストリップで答え合わせをする、という使い方がおすすめです。

ビットを自由にクリックできるぶん、思わぬビット列を作ってしまうこともあります。ここでは代表的な2つのケースについて触れておきます。

指数部の8bitをすべて1にしてみると、画面上部に「NaN」や「∞(無限大)」と表示されることがあります。

これは壊れているわけではなく、IEEE754で決められた特別な意味を持つビットパターンです。

普段の計算問題ではあまり出てこないパターンですが、「指数部が全部1のときは特別な意味になるんだな」ということだけ覚えておけば大丈夫です。詳しくは解説記事でも触れています。

0.1 のような数を入力すると、下に「丸め誤差」についての説明が表示されることがあります。

これはアプリの不具合ではありません。0.1は2進数では割り切れない数のため、コンピュータの中では本当にわずかに違う値として保存されてしまう、という浮動小数点数の性質そのものです。詳しい理由は解説記事の中でも説明しているので、気になった人はあわせて読んでみてください。

分からないところがあれば、遠慮なく質問してください。手を動かしながら覚えると、意外とすぐに慣れてきますよ。