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

カテゴリ

プログラミング

書いた人: たくち

Takuya Kitazawa（たくち）です。長野県出身、カナダ・バンクーバー在住のソフトウェアエンジニア。これまでB2B/B2Cの各領域で、Web技術・データサイエンス・機械学習のプロダクト化および顧客への導入支援・コンサルティング、そして関連分野の啓蒙活動に携わってきました。現在は主に北米（カナダ）、アジア（日本）、アフリカ（マラウイ）の個人および企業を対象にフリーランスとして活動中。詳しい経歴はレジュメを参照ください。いろいろなまちを走って、時に自然と戯れながら、その時間その場所の「日常」を生きています。ご意見・ご感想およびお仕事のご相談は [email protected] まで。

近況一杯のコーヒーを贈る

免責事項

Amazonのアソシエイトとして、当サイトは amazon.co.jp 上の適格販売により収入を得ています。
当サイトおよび関連するメディア上での発言はすべて私個人の見解であり、所属する（あるいは過去に所属した）組織のいかなる見解を代表するものでもありません。
当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、個人ブログという性質上、誤情報や客観性を欠いた意見が入り込んでいることもございます。いかなる場合でも、当サイトおよびリンク先に掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
その他、記事の内容や掲載画像などに問題がございましたら、直接メールでご連絡ください。確認の後、対応させていただきます。