はじめに
最近、ブラウザ上で使える日本語の変換ツール集を個人開発しています。
その中で最初に作ったのが、16進数・2進数・10進数・8進数を相互変換できるツールです。
一見すると単純な変換ツールに見えますが、実際に開発してみると、入力形式の扱い、大きな数値の処理、スマホでの使いやすさなど、意外と考慮すべき点が多くありました。
この記事では、JavaScriptだけで16進数変換ツールを作る際に考えたことや、実装時に気を付けたポイントをまとめます。
作ったもの
今回作成したツールでは、以下のような変換に対応しています。
- 16進数から10進数への変換
- 10進数から16進数への変換
- 2進数・8進数・10進数・16進数の相互変換
-
0x付き入力への対応 - 大文字・小文字の表示切り替え
- 桁区切り表示
- ブラウザ上でのリアルタイム変換
実際に動作するツールは以下で公開しています。
NumberではなくBigIntを使った理由
最初はJavaScriptのNumberだけで十分だと思っていました。
しかし、Numberには安全に扱える整数の範囲という制限があります。
Number.MAX_SAFE_INTEGER
この範囲を超えると、見た目上は問題なく扱えているように見えても、内部的には正確な整数として保持できない場合があります。
16進数変換ツールでは、大きな値を入力するユーザーも想定されます。
そのため、整数変換にはBigIntを利用することにしました。
const value = BigInt("0x" + hexString);
BigIntを使うことで、通常のNumberでは扱いにくい大きな整数も安全に処理できます。
入力チェックで気をつけたこと
変換ツールでは、ユーザーが常に正しい形式で入力するとは限りません。
たとえば、16進数では次のような入力が考えられます。
FF0xFFffFF FFff-ff- 空白を含む入力
そのまま処理するとエラーになったり、意図しない結果になる可能性があります。
そこで、入力値を正規化するために以下のような処理を実装しました。
const normalized = input
.trim()
.replace(/^0x/i, "")
.replace(/\s+/g, "");
ただし、すべての記号を無条件に削除してしまうと、ユーザーの入力ミスに気付きにくくなるという問題もあります。
そのため、どこまで自動補正し、どこからエラーとして扱うかについては慎重に検討しました。
リアルタイム変換の注意点
リアルタイム変換は便利な機能ですが、入力途中では不完全な値になることがあります。
たとえば、ユーザーが0xまで入力した段階では、まだ有効な16進数として変換できません。
そのため、入力中でも画面が崩れたり不要なエラーが表示されたりしないよう、エラー処理と未入力状態の扱いを分けて実装しました。
スマホで使いやすくする
変換ツールはPCだけでなく、スマートフォンから利用されることも少なくありません。
そこで、以下の点を意識してUIを調整しました。
- 入力欄を大きめにする
- コピーボタンを押しやすくする
- 結果を見やすく配置する
- 画面幅が狭い場合は縦並びにする
- 説明文が操作の邪魔にならないようにする
変換ロジックだけでなく、実際に使う際の快適さも重要だと感じました。
まとめ
16進数変換ツールは、一見するとシンプルなツールに見えます。
しかし実際に作ってみると、次のような点を考慮する必要がありました。
- 大きな整数の扱い
- 入力形式の正規化
- エラー表示の設計
- リアルタイム変換への対応
- スマホ向けUIの最適化
- コピー機能の実装
小さなツールでも、使いやすく仕上げるためには意外と多くの工夫が必要だと実感しました。
今後は、Base64、ASCII、Unicode、2の補数など、関連する変換ツールも少しずつ追加していく予定です。