Zenn
🗂

電卓（ionic,Angular）

2023/08/18に公開
Angular
Ionic
tech

今回のお題

  • 「ElementRef」を使用して作成
  • 「document」は使用不可
  • 計算・合計・消去として表示

作成コード

色々触ったけど、必要なコード記載場所は下記の三箇所です。
home.page.html、home.page.scss、home.page.ts
gitHub

難しかったこと

  • 「ElementRef」に関する情報が少なかったので、使用方法を調べるのに手間取った。
ElemenRef

DOM要素[1]への参照を保持し、それを使用してDOMを操作できます。
HTML要素を取得するために「ViewChild」とともに使用されます。

【html】
ElementRefで表示をしたい箇所に「#◯◯（ここでは#total）」をつけます。

<ion-input class="display" id="display" #total></ion-input>

【ts】
HTML要素を取得するためにViewChildで#totalを指定し、DOMを取得します。
(el = ElemenRef)

export class HomePage implements OnInit {
@ViewChild('total') public total: {
    el: IonInput
  };

【ts】
こちらを使用することで、例えば''のみでdisplayの表示を白紙に出来ます。

 erase() {
    this.total.el.value = '';
  }
  • 「計算・合計・消去として表示」という課題に、文章を短くして作成できないかと考え試行錯誤したが、結果的に+,-,*,/と４つに分けて計算をしなければならなかった。

作成をしてみて思ったこと

  • 他の人が作成したものを参考にしようと思ったら、前回のJSに比べて情報量が少ない！
  • GitHubで「電卓」「JavaScript」「ionic」を計算してもそれぞれ違ったアイディアで作成しているので、ヒントになるものが見当たらなかった。他の言語での検索はしなかったので、参考として他の言語も見ればよかったと反省です。
脚注

  1. DOM(Document Object Model)とはHTMLやXML文書を取り扱うためのAPIです。HTMLタグ(<html>,<form>,<table>など)のことを「要素」と呼びます。 ↩︎

Discussion