takuti.me ABOUT

2013-08-02

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

AngularJSを使ってみました。MVCな雰囲気を取り入れたJavaScriptのフレームワークです。あんぎゅらーらしいです、あんぐらーじゃないです。

この子、とんでもなく簡単で気持ちがいいですね。ng-app, ng-model, {{}}を追加するだけであっという間にさくさく!

公式にある一番基本のアプリが以下。

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

せっかくなので先日作った進数変換のできるChrome拡張を流用して、入力したらすぐ進数変換されるものを作りました。よかったら使ってあげて下さい。

さくさく進数相互変換
Screen Shot 2013-08-01 at 11.38.37 PM

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