ホーム  >   ブログ  >   プログラミング   >   AngularJSでさくさく進数相互変換をつくる

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

  書いた人: たくち

たくちです。トレジャーデータでデータサイエンス・機械学習のプロダクト化および顧客への導入支援・コンサルティング、そして関連分野のエバンジェリズムを担っています。趣味は旅行、マラソン、登山。コーヒーとお酒とハンバーガーが好き。長野県出身、埼玉県在住。ブログへのご意見・ご感想、お仕事のご依頼など、@takuti または [email protected] までいつでもお気軽にご連絡ください。

※当サイト上での発言は個人の見解です

  過去の人気記事

2017-12-16
データサイエンスプロジェクトのディレクトリ構成どうするか問題
2017-06-10
Amazonの推薦システムの20年
2017-03-31
修士課程で機械学習が専門ではない指導教員の下で機械学習を学ぶために

  サポートする

  コーヒーを贈る

  ほしい物リスト

このエントリーをはてなブックマークに追加

  あわせて読みたい

2017-12-01
『Java本格入門』メモ
2017-09-10
Yahoo!の異常検知フレームワーク"EGADS"
2013-11-15
AngularJSでChromeExtension開発をするならCSPに気をつけよう
  もっと見る