みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

JavaScriptの勉強04【数値と演算子】

勉強シリーズ。
基礎の基礎を知る。

前回の記事 micche-labo.hatenablog.com

初めに宣言しておきます。

わたしは算数が大の苦手です。

特に繰り上がり・繰り下がりの計算がまるでできません

胸を張っていうようなことではないんですが、算数できない私でもプログラミングに手をつける理由は簡単です。

機械が計算を正しく素早く行ってくれるから。

暗算できる人が羨ましいですが、まあ今の時代なんでも機械が計算してくれますから、私のような算数ができない人間にとっては良い時代になりました。

というわけで、JavaScriptの演算について学んでいきたいと思います。

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう!というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう!
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法:Chromeデベロッパーツールでコンソールを開いて実行。

数値について

  • 整数 ( integer ) …1とか100とか-5とか。
  • 浮動小数点数 ( float ) …0.1とか1.02とか。

JavaScriptはどっちもデータ型Numberで表す。

あと

っていうのもあるけどよくわからなかったので一旦スルーする。

数値の例

MDNのサイトを元に、コンソールにて実行。

//変数に数を宣言する

var myInt = 5; //整数
var myFloat = 3.14; //小数点

//どっちも数であることをtypeof演算子で確認

typeof myInt; //numberと返される
typeof myFloat; //numberと返される

数値の便利なメソッド

数値操作のための便利メソッドがいろいろとあるらしい。
例えば数値を固定の桁数に丸める、toFixed()メソッド。
(イメージとしては小数点以下を任意の桁で四捨五入する…といったところ?)

//まずは宣言

let lotsofDecimal = 3.14159265359;

//メソッド使用

let twoDecimalPlaces = lotsofDecimal.toFixed(2);

f:id:micche-labo:20210924170830p:plain
toFixed()メソッド使用結果

ちなみに0〜3までの結果は以下。

f:id:micche-labo:20210924171334p:plain
toFixed()メソッド使用結果その2

toFixed(1)のときは3.1toFixed(0)のときは3、そしてtoFixed(3)の時は3.142となった。

数値データ型へ変換

数値として計算したいのに、

let myNumber = '28';

と引用符でくくり、文字列(string)と認識されてしまった場合。

`myNumber + 2;'

とした結果が、282とされてしまう。
引用符があるため、28が文字として定義されてしまい、単純に282をくっつけただけの結果が返ってきてしまうため。

これを修正する。

Number(myNumber) + 2;

とすると数値として計算された結果が返る。(以下画像参照)

f:id:micche-labo:20210924172655p:plain
修正後の結果は30と正しく計算されている

計算の優先順位

多分学校で習った。

計算には優先順位があり、かけ・わりが最優先、そのあとたしひきを計算。 ブラウザも同じように計算するらしい。

なので、もし足し引きしたあとに割ったりかけたりしたければカッコ()でくくってやる必要がある。

f:id:micche-labo:20210924174344p:plain
変数に数を格納

f:id:micche-labo:20210924174259p:plain
数値計算結果

インクリメント演算子とデクリメント演算子

心の声。そろそろ「なんじゃそりゃ?」ってなってきた。

インクリメント?デクリメント?

初耳な名前がついてるだけでようは

++

--

のことらしい。

繰り返し処理で使う

この二つは、繰り返し処理でよく使われる。

数値に対して直接使用はできない。
(変数に対して新しい値を代入するから、エラーになるらしい。)

ということで使い方は、

let num1 = 4;
num1++;

と書く。

しかしこれだけでは4と返される。

再度

num1;とすることで5が返される。

f:id:micche-labo:20210924175121p:plain
インクリメント演算子の使用後。num1の数値に1足されている。

--演算子についても同様。

f:id:micche-labo:20210924175443p:plain
デクリメント演算子の使用後。num2の数値6から1が引かれている。

先に演算子を書くことですぐに結果が返る。

f:id:micche-labo:20210924175955p:plain
変数の前に演算子を置いた場合

休憩

数値についてはなんだか長くなりそうなのでここらへんで一旦区切ります。

次は代入演算子について学ぼうと思います。

勉強サイト

developer.mozilla.org