電卓 アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/電卓/ ちょっとしたことを調べているよ Fri, 15 Nov 2024 08:54:46 +0000 ja hourly 1 https://wordpress.org/?v=6.7 https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png 電卓 アーカイブ - nyanblog ~にゃんぶろぐ~ https://nyanblog2222.com/tag/電卓/ 32 32 【初心者】簡単！vue.jsで電卓の作り方【サンプル】 https://nyanblog2222.com/programming/javascript/4571/ https://nyanblog2222.com/programming/javascript/4571/#respond Thu, 10 Mar 2022 12:40:12 +0000 https://nyanblog2222.com/?p=4571 前回はJavaScriptで電卓を作成しました。今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。 前回の記事はこちらから！ 目次 はじめに電卓の機能HTMLvue.jsの設定 → CDNでの設定電卓の各 […]

投稿 【初心者】簡単！vue.jsで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

前回はJavaScriptで電卓を作成しました。
今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。

前回の記事はこちらから！

【初心者】簡単！JavaScriptで電卓の作り方【サンプル】
JSで四則演算や小数点の計算ができる簡易的な電卓を作成。持たせる機能から作り方の考え方までHTML,CSSソースやデモページ付きで解説しているので、プログラミングの勉強や参考に！デモページあり。
nyanblog2222.com
2022.03.06
【初心者向け】JavaScriptでカレンダー作成【サンプル】
JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！
nyanblog2222.com
2021.01.07

はじめに

まずはじめに前回でも説明しましたが、電卓の機能を説明します。
その後、vue.jsに書き換える手順を説明します。

また、CSSに関しては前回の記事より変更がありませんので今回は割愛させていただきます。

電卓の機能

作る電卓の機能は次のとおりです。

  • 四則演算ができる
  • Cキーで初期化
  • ＝で計算した後
    数字の場合、初期化したあと数字入力
    演算子の場合、結果はそのまま使用
  • 最初のキーが”0”、”.”、”+-×/”の場合、
    あらかじめ0が入力されている前提で式に入力

完成イメージはこちらです。

HTML

HTMLコードです。

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="icon" href="https://nyanblog2222.com/wp-content/themes/blogtemplate/images/favicon.ico">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div id="app">
    <h1 id="header">電卓</h1>
    <div id="calc">
      <div>
        <input readonly v-model="result" type="text"><button v-on:click="c_click">C</button>
      </div>
      <div v-for="row in dataArrays">
        <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
      </div>
    </div>
  </div>
</body>

vue.jsの設定 → CDNでの設定

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

今回vueを使用するため、6行目にheadタグにCDN設定を追加しました。

注意する点として、他のJavaScriptファイルを読み込む前にCDN設定するようにしてください。

また、vue.jsのインストールや最新環境のCDNの情報はこちらから確認してください♪

電卓の各ボタンをv-forで自動作成

<div v-for="row in dataArrays">
  <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
</div>

// 電卓のボタン
dataArrays: [
  ["7", "8", "9", "÷"],
  ["4", "5", "6", "×"],
  ["1", "2", "3", "-"],
  ["0", ".", "=", "+"],
],

Cボタン以外はvueで自動生成させます。
ボタンの順番やデータはJavaScript側で記述します。

divタグはデータ1行単位でforを回し、buttonタグは1項目（1データ）単位で回しています。

みみねこ
みみねこ

dataArrayと完成イメージ図を見比べると分かりやすいと思います！

クリックイベント書き換え

クリックイベント「onclick」を「v-on:click」に置換します。

vue使用のためv-model、idの設定

inputタグのidを設定していましたが、v-modelでの設定に変更。
divのid=”app”を設定。

JavaScript

こちらがJavaScriptのコードです。

scriptファイルを分けているので、「window.onload」でhtmlの読み込みが終わってから実行するようにしています。

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      result: "0",
      is_calc: false,
      dataArrays: [
        ["7", "8", "9", "÷"],
        ["4", "5", "6", "×"],
        ["1", "2", "3", "-"],
        ["0", ".", "=", "+"],
      ],
      operators_list: ["÷", "×", "-", "+"  ],
    },
    methods: {
      c_click: function () {
        this.result = "0";
        this.is_calc = false;
      },
      btn_Click: function (val) {
        if (this.operators_list.includes(val)) {
          this.ope_click(val);
        } else if (val === "=") {
          this.equal_click();
        } else {
          this.num_click(val);
        }
      },
      num_click: function (val) {
        if (this.is_calc) this.result = "0";
        this.is_calc = false;

        if (this.result == "0" && val == "0") {
          this.result = "0";
        } else if (this.result == "0" && val == ".") {
          this.result = "0.";
        } else if (this.result == "0") {
          this.result = val;
        } else {
          this.result += val;
        }
      },
      ope_click: function (val) {
        if (this.is_calc) this.is_calc = false;

        if (this.is_ope_last()) {
          this.result = this.result.slice(0, -1) + val;
        } else {
          this.result += val;
        }
      },
      equal_click: function () {
        if (this.is_ope_last()) this.result = this.result.slice(0, -1);

        var temp = new Function("return " + this.result.replaceAll("×", "*").replaceAll("÷", "/"))();
        if (temp == Infinity || Number.isNaN(temp)) {
          this.result = "Error";
        } else {
          this.result = temp;
          this.is_calc = true;
        }
      },
      is_ope_last: function () {
        return this.operators_list.includes(this.result.toString().slice(-1));
      },
    },
  });
};

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。vue.jsも主流になっていますので使いこなしていきたいですね！

良ければ別のサンプルページも見てみてくださいね♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】
JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！
nyanblog2222.com
2021.01.07

投稿 【初心者】簡単！vue.jsで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/javascript/4571/feed/ 0 【初心者】簡単！JavaScriptで電卓の作り方【サンプル】 https://nyanblog2222.com/programming/4496/ https://nyanblog2222.com/programming/4496/#respond Sun, 06 Mar 2022 14:50:45 +0000 https://nyanblog2222.com/?p=4496 今回はJavaScriptで電卓を作成しました。初心者の方が勉強しやすいシンプルな機能で作ってみました。 まずは簡単なものを完成することを目的にして、そのあとで機能を追加していくことが勉強するにはおすすめですよ♪ 別記事 […]

投稿 【初心者】簡単！JavaScriptで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]>

今回はJavaScriptで電卓を作成しました。
初心者の方が勉強しやすいシンプルな機能で作ってみました。

まずは簡単なものを完成することを目的にして、
そのあとで機能を追加していくことが勉強するにはおすすめですよ♪

みみねこ
みみねこ

初めから難しいものを作ろうとしても時間がかかって、その内やる気がなくなるのは勿体ないですよね…。（よくある）

別記事でVue.jsを使った記述も紹介しますので、合わせて読んでみてください！

【初心者】簡単！vue.jsで電卓の作り方【サンプル】
JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。
nyanblog2222.com
2022.03.10

はじめに

まずは今回作成する電卓の機能を決定します。

みみねこ
みみねこ

コーディングする前に機能を決定しておくことは、手戻りを防ぐためにも大事ですね♪

今回は次の機能を持たせました。

  • 四則演算ができる
  • Cキーで初期化
  • ＝で計算した後
    数字の場合、初期化したあと数字入力
    演算子の場合、結果はそのまま使用
  • 最初のキーが”0”、”.”、”+-×/”の場合、
    あらかじめ0が入力されている前提で式に入力
みみねこ
みみねこ

今回はこのまま進みますが、機会があればアップデートしていきたいですね♪

完成イメージ図はこちらです。デモページもありますので見てみてください。

HTML

まずはHTMLを作成していきます。
作成しているのは、次の3つです。

  • ヘッダー
    「電卓」の文字
  • 計算の表示枠
  • 数字や演算子 ボタン

コード

<div class="wrapper">
  <h1 id="header">電卓</h1>
  <div id="calc">
    <div>
      <input readonly id="result" type="text" value="0">
      <button onclick="c_click()">C</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">7</button>
      <button onclick="num_click(this.innerHTML)">8</button>
      <button onclick="num_click(this.innerHTML)">9</button>
      <button onclick="ope_click(this.innerHTML)">÷</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">4</button>
      <button onclick="num_click(this.innerHTML)">5</button>
      <button onclick="num_click(this.innerHTML)">6</button>
      <button onclick="ope_click(this.innerHTML)">×</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">1</button>
      <button onclick="num_click(this.innerHTML)">2</button>
      <button onclick="num_click(this.innerHTML)">3</button>
      <button onclick="ope_click(this.innerHTML)">-</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">0</button>
      <button onclick="num_click(this.innerHTML)">.</button>
      <button onclick="equal_click()">=</button>
      <button onclick="ope_click(this.innerHTML)">+</button>
    </div>
  </div>
</div>
みみねこ
みみねこ

input後のbuttonや、button後のbuttonについて
分かりやすいように改行を入れていますが、実際のコードでは改行していないので注意してください。

HTMLファイルを見てみると画像のように表示されます。

HTML解説

  • 5行目　input要素
    ・readonly属性にして直接入力不可
    ・計算式や結果を表示するためid=”result”を設定
    ・valueを0にして初期表示
  • 6行目　Cボタン
    onclick属性で”c_click()”を設定
  • 数字ボタン
    onclick属性で”num_click(this.innerHTML)”を設定
    this.innerHTMLはHTMLの中身を表しています。
    例）9行目であれば”7″が入ります。
  • 演算子ボタン
    onclick属性で”ope_click(this.innerHTML)”を設定
  • 29行目　イコールボタン
    onclick属性で”equal_click()”を設定

CSS

次にCSSでスタイルを決定します。
”reset.css”も使っているので、この辺りは好きなようにカスタマイズをしてください。

@charset "utf-8";
/*全体*/
.wrapper{
  max-width: 350px;
  margin: 0 auto;
  color: #666;
}
#header,#calc{
  box-sizing: border-box;
  text-align: center;
}
/*ヘッダー*/
#header {
  font-size: 24px;
  padding: 1rem;
}
/*テキスト*/
input{
  box-sizing: border-box;
  width: 75%;
  height: 3.5rem;
  font-size: 1.6rem;
  text-align: right;
  padding: 0 0.75rem;
}
/*ボタン関係*/
button{
  font-size: 18px;
  width: 25%;
  height: 3.5rem;
  color: #333;
  vertical-align: middle;
  border-color: #fff;
}
button:hover{
  background-color: #ddd;
}

設定が終わると、このように表示されるようになります。

JavaScript

コード

次項で詳しく解説していますが、コメントでも多少記述しています。

みみねこ
みみねこ

最初はコピペして自分で理解しながらカスタマイズする方法も勉強するのに向いていますよ！

// データ
var result = "";
// =で計算したかどうか
var is_calc = false;

// 初期表示
window.onload = function () {
  result = document.getElementById('result');
};

// Cキー押下
function c_click(){
  result.value = "0";
  is_calc = false;
}

// 数字キー押下
function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

// 演算子キー押下
function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

// =キークリック
function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();
  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

// 入力されている値が演算子かどうか
function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

解説

先述したコードに対して細かく解説していきます！

・グローバル変数の定義

2つの変数を定義、初期化しています。
result変数はhtmlのid=”ressult”と紐づけします。

// 表示させるデータ
var data = "";
// =で計算したかどうか
var is_calc = false;

・HTML読み込み後

HTML読み込み後、id”result”と変数のresultを紐づけしています。

window.onload = function () {
  result = document.getElementById('result');
};

・Cボタンクリック

Cボタンクリック時のイベントを記述しています。
ここでは変数の初期化を行っています。

function c_click(){
  result.value = "0";
  is_calc = false;
}

・数字ボタンクリック

数字ボタンクリック時のイベントを記述しています。

function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}
  • 2、3行目
    1度”＝”で計算済みの場合、数字ボタンを押したらresultを初期化します。
    is_calcはfalseにします。
  • 5～13行目
    入力した数字によってresultの処理を行います。
    ・1つ目の条件は初期化後、”0″が入力された場合、resultに”0″を設定
    ・2つ目の条件は初期化後、”.”が入力された場合、resultに”0.”を設定
    ・3つ目の条件は初期化後、上記以外の数字が入力された場合、resultに入力値を設定
    ・それ以外は直接resultに入力値を追加

・演算子ボタンクリック

演算子ボタンクリック時のイベントを記述しています。

function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}
  • 2行目
    is_calcがtrueの場合があるのでfalseにします
  • 4～8行目
    条件によって計算式の処理を変えています。
    1つ目の条件では、直前のボタンが演算子の場合、演算子を切り替えます。
    それ以外では、計算式に入力した演算子を付け加えます。
// 1つ目の条件：例
// 直前の計算式
9×6+
// 押したボタン
-
// 演算子切り替え後
9×6-

・＝ボタンクリック

＝ボタンクリック時のイベントを記述しています。

function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();

  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}
  • 2行目
    計算式の最後が演算子の場合、演算子を取り除きます。
  • 4行目
    変数tempに計算式の計算結果を設定します。
  • 7～9行目
    計算結果がInfinity（無限大）かNaN（数字出ない）場合、resultにErrorを設定します。
  • 8～11行目
    tempの値をresultに設定し、計算済み（is_calc）フラグをtrueにします。

・is_ope_last() 関数

計算式の最後が演算子か判定する関数です。
「result.value.toString().slice(-1)」は計算式の最後の文字を取得し、
「[“+”,”-“,”×”,”÷”].includes(…」で4つの演算子と一致するかどうかbool型で返しています。

function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。
次回はvue.jsに書き換えしてみます！

良ければ別のサンプルページも見てみてくださいね♪

【初心者】簡単！vue.jsで電卓の作り方【サンプル】
JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。
nyanblog2222.com
2022.03.10
【サンプル】JavaScriptのコードまとめリンク集
本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪
nyanblog2222.com
2022.09.01

投稿 【初心者】簡単！JavaScriptで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

]]> https://nyanblog2222.com/programming/4496/feed/ 0