icon

2013-08-02

AngularJSでさくさく進数相互変換をつくる


AngularJSそのものに関する説明は他に譲りますが、バリデーションが特に簡単で嬉しかった印象です。

<p>【2進数】 <span class="error" ng-show="num_form.binary.$error.pattern">2進数は0と1だけだよ</span><br />
  <input type="text" name="binary" placeholder="ここに2進数を入力" ng-model="num.binary" ng-pattern="binary_pattern" ng-change="binary()" /></p>

見づらいですが、各進数あたり2行でバリデーションも含めて必要なことのほとんどが書けてしまいます。

進数の変換処理も、ng-changeからコントローラーの関数を適当に呼んであげればリアルタイムにできちゃったり。

$scope.binary = function(){
    if($scope.num.binary){
        $scope.num.decimal = parseInt($scope.num.binary,2);
        $scope.num.hex = parseInt($scope.num.binary,2).toString(16);
    } else {
        $scope.num.decimal = undefined;
        $scope.num.hex = undefined;
    }
}

というわけで、AngularJSでした。開発はさくさく進んで、できるものはさくさく動いて、2さくさくですね。

ちなみに今回作ったさくさく進数相互変換、無駄に入力スペース広いですが特に何も考えずにparseIntを使って変換しているだけなので、大きすぎる数だとおかしくなったりします。ま、まぁいいよね。

追記(2013.08.02)

大きすぎて対応できない数の場合には変換処理を行わないように修正しました。
【参考】JavaScript (ECMAScript) の整数の精度と乱数の精度について / LiosK-free Blog


amazonSupport

search See also

» more
user Takuya Kitazawa (a.k.a. takuti) is a data science engineer at Arm Treasure Data and committer of Apache Hivemall.