IT知識の秘伝書

値や文字列を入れる「変数」を解説2

X(Twitter) facebook はてなブックマーク LINE
OgImage

前の記事の値や文字列を入れる「変数」を解説の続きだ。

プログラムで使うデータの事をリテラルと呼ぶ。簡単に言うと変数に代入できる値の種類と理解しておけばよい。
例えば前の記事のlet x = 100;で100は整数リテラル
let x = 'あいうえお'としたら文字列リテラルと呼んだりする。

僕も何となくで理解していたが記事にしてようやく分かった。リテラルにはプリミティブ型というデータの種類がある。リテラルは値の種類で、プリミティブ型はリテラルの種類。難しいな!

JavaScriptで使うリテラルをまとめてみた。

リテラル プリミティブ型 説明
100 number 整数。数値
1.23 number 小数。数値
-1 number 小数。数値
”Hello” string ダブルクォーテーション(")で囲むと文字列となる
'JavaScript' string シングルクォーテーション(')で囲むと文字列となる
`Programming` string バッククォート(`)で囲むと文字列となる
true boolean 論理値と呼ばれる正しいを意味する値。真やtrue(トゥルー)と呼ぶ
false boolean 論理値と呼ばれる正しくないを意味する値。偽やfalse(フォルス)と呼ぶ
null null 何もない事を意味する。空という意味ではない
undefined undefined 値が未定義。空という意味ではない

ちなみにプリミティブ型を調べるには下記のようにするとよい。

let i = 1; alert(typeof i);

typeofを付けるとプリミティブ型に変換してくれる。iは1なので整数リテラルだからプリミティブ型はnumberと表示される。

nullとundefinedの違い

nullとundefinedがよく分からないのですが、違いはありますか?
nullはプログラマが意図して値が存在していない事を強調する時に使う。undefinedは変数の初期化のし忘れなので、あってはならない

nullとundefinedと空のサンプル

例えば今はどの値が入るか分からないが、とりあえず今はnullで何もないという事を明示的に示しておく必要がある場合や値を存在させたくない時にnullを代入する。高度なプログラミングをする際に結構よく使うのでいつかは慣れよう。

let n = null;

下記のようにuという変数を定義しているのに初期化せずにalertなどで参照(使おうと)するとundefinedになる。これのせいでよくエラーになるので出くわしたら値が初期化されていないんだなってまずは考えよう。

let u; alert(u);

空という意味を持たせる文字を空文字と言う。nullと同じで「明示的に」値が空、特に文字列が入る予定の変数で空という事を表したい時にダブルクォーテーションやシングルクォーテーションの記号を2回続けて記述する。すると文字が空というコードになるぞ。typeofで調べると空文字はstringとなった。

let k = ""; alert(k);

式の左辺と右辺

下記のコードを見てほしい。

var x = 100; x = 200;

いつものコードだが、プログラミング用語でよく使う言葉がある。イコールの左のxを左辺、イコールの右の200を右辺と言ったりする。代入される値を受け取る側が左辺。代入する値を渡す側が右辺だな。ただし、主に式がある場合に使う言葉だ。

これ以降は左辺と右辺の単語を使うので覚えておいてほしい。

JavaScriptで変数を使う際に注意が必要なところ

JavaScriptだけでなくインタプリタ型のスクリプト言語、例えばPHPもそうだったと思うが動的にリテラルが変換される。

var x = '100'; var y = x + 200;

上記コードはxが数値ではなく文字列の'100'となっている。2行目でそのxの文字列リテラルの100と整数リテラルである200を足してyに代入している。さて、yは何になるだろうか?

恐らくだがブラウザによって変わる。古いブラウザだと300になるし、最近のものだと100200となるはずだ。

これはリテラルを自動で変換してエラーが出ないようにしているからだろう。300となったら"100"の文字列リテラルを整数リテラルに自動で変換して300になるし、100200となったら凄い桁の数値に見えそうだがこれは文字列だ。200の整数を文字列リテラルにして文字列100と文字列200をくっ付けているにすぎない。この100200というyを整数と思って使うとバグになる。

これらのリテラルが自動で変換される事は融通が利くと言えばそうかもしれないが、バグの原因になるので変数を使う際は代入するリテラルを常に意識するべきだし、基本的に右辺の式はリテラルを合わせる事が大切だ。文字列なら文字列、整数なら整数と計算。小数なら小数と計算。のように。

変数名で使えない単語(予約語)

プログラミング言語には予約語という予め用意された意味を持つ単語がある。これらの予約語はこれから説明するプログラミングの文法で出てくる単語だが、それは変数名として使う事は出来ない。

変数名とは何でしたっけ?

変数名とは下記のコードでいうとxとyの事だ。

let x = 100; let y = 200;

プログラミングの文法でif文やfor文というのがあるが、このifやforの単語が予約語だ。JavaScriptのエンジンがコードを実行する際に変数名が予約語だとどっちがどっちか分からなくなるからエラーを出すのも想像できるな。

下記のコードはダメだ!
let if = 100; let for = 200;
予約語ってなんかたくさんありそうですが、全部覚えないとダメですよね。。
100個もないと思うし、プログラミングをやっていたら自然と何が予約語か身に付く。もし、それでも自信がないならVSCodeが文法エラーを出すから、その時に気付くよ

変数のインクリメントとデクリメント

整数の変数に1を増加させたい場合、下記のコードがある。

let i = 0; i = i + 1;

iを1増やしたい為にiに1を足しているが、下記のように少ないコードでより見やすく書ける。上と下のサンプルは同じ結果となる。処理速度はインクリメントが速いはず。

インクリメント

let i = 0; i++;

この++をインクリメントと呼び、1増やすというコードだ。

デクリメント

1だけ減らすコードもあるぞ

let i =10; i--;

--はデクリメントと呼び、1減らすコードだ。上記の結果は10から1減って9となる。