100日後にエンジニアになるキミ - 20日目 - Javascript - JavaScriptの基礎3

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

100日後にエンジニアになるキミ - 19日目 - Javascript - JavaScriptの基礎2

定数

昨日は「変数」についてやりました。

変数はその名の通り「変わる数」なので
中身を上書きして変更したりできました。

定数は変数と同様に宣言して、値を代入まではできますが
その後、中身を変更できないものになります。

書き方は
constを頭につけて宣言します。
const SAMPLE_CONST;

代入まで行うと
const SAMPLE_CONST = 'abc';

const MY_FAV = 7;
MY_FAV = 20;

Uncaught TypeError:

const MY_FAV = 20;

// ここから下は全てエラー
const MY_FAV = 20;
var MY_FAV = 20;
let MY_FAV = 20;

Uncaught SyntaxError:

定数は再度代入をしようとしたり
変数として同じ名前を使用しようとするとエラーが発生します。

データ型

プログラミングにおいて「データの型」というものはすごく重要なポイントです。

プログラムのコード上では必ずデータを取り扱います。

変数や定数の中身もデータですが
プログラムのデータには「型」というものが存在します。

例えば
数値としてコードを打ち込んだ場合
123
これは数値の型になります。

文字として打ち込んだ場合
"ABC"
これは文字列の型になります。

JavaScriptでは様々なデータの型がありますが
基本のデータ型(プリムティブ型)で扱えるデータ型は以下の通りです。

データ型	意味
Boolean	論理型 true , false の2つの値のみ
Null	値はnullのみ 型も値も無い型
Undefined	値を代入していないとこの型になる
Number	整数もしくは小数点の数値型 最大値はNumber.MAX_VALUE
String	文字列型 テキストデータを現す型
Symbol	Symbol() で作成できる特殊な値の型
Object	Objectとして定義された型

自分がどのようなデータの型を扱っているかを確認するには
typeof データ値と書くと、そのデータ型を知ることができます。

console.log(値)を用いて、コンソールに表示させてみましょう。

console.log(typeof true);
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof 123);
console.log(typeof 'abc');
console.log(typeof Symbol());
console.log(typeof {});

boolean
object // なぜかnullはobject扱い
undefined
number
string
symbol
object

文字列型(string型)

データの形を見極めることはプログラミングでは重要です。
まず最初は文字列型から学んでいきましょう。

文字列型(string型)は文字として打ち込んだら文字列型になります。
文字列として打ち込むには文字を"や'で囲みます。

"ABC"
"123"

変数に格納する際も同様に定義します。

var aaa = 'abc';
let bbb = '123';

文字列型では「足し算」のみ行うことができ、他のデータ型を足した際には
文字として連結されます。

console.log('a' + null);
console.log('a' + 123);

anull
a123

プログラム上で他のデータ型を文字列型として定義し直したい場合は
「String関数」を用います。

console.log(typeof String(null));
console.log(typeof String(123));

string
string

HTMLで画面に文字を反映させたりする際は
文字列として出力するので最も多用されるデータ型です。

数値型(Number型)

数値型は「整数」もしくは「小数点」の値を取り扱うデータ型です。
他のプログラム言語では整数型と小数点型で別れていたりします。

数字をそのまま用いると基本的には数値型になります。

var a = 123;
let n2 = 123.45;

プログラム上では「進数」を取り扱うことができるため
書き方で取り扱われる進数を定義することができ
何も指定しない場合は10進数になります。

他にどんな進数が扱えるかというと

進数	書き方(前に付ける文字)	例	10進数の値
2進数	0b , 0B	0b11	3
8進数	0o , 0O	0o70	56
16進数	0x , 0X	0xff	255

console.log(0b11);
console.log(0o70);
console.log(0xff);

3
56
255

文字列から数値型に「Number関数」で変換することができます。

Number("123") ;
Number("123.45") ;

関数というのはそのデータ型の中で使うことのできる機能のことで
文字列型や、数値型などの、データ型によって
使える関数が決まっています。

数値型の関数として
数値型から3ケタ区切りで文字列へ変換する「toLocaleString関数」
というものがあります。

var num = 12500.45;
console.log(num.toLocaleString());

12,500.45

このように数値を文字列に直したり、表記を変更したりするのは
関数を用いていきますので、データ型と関数の概念を押さえておきましょう。

演算子

算術演算子の項でも取り扱いましたが
演算子というのはたくさんの種類があり
その中でも四則計算を取り扱うのが「算術演算子」になります。

算術演算子

加算 +
減算 -
乗算 *
除算 /
剰余 %
べき乗 **
三項演算子 ?
インクリメント ++
デクリメント --

などがあります。

前回の補足として「三項演算子」は
条件によって結果が変わってくる値を定義できます。

条件 ? 真の値 : 偽の値

2==2 ? 'a' : 'b'

a

2==3 ? 'a' : 'b'

b

「インクリメント」と「デクリメント」は書き方によって挙動が変化します。

var xがあったとして

//前置記法
var x = 3;
y = ++x; // x = 4, y = 4
console.log(x+' : '+y)

// 後置記法
var x = 3;
y = x++; // x = 4, y = 3
console.log(x+' : '+y)

4 : 4
4 : 3

x が 3 の場合：
++x は x に 4 を設定して 4 を返す
x++ は 3 を返したあと x に 4 を設定する
--x は x に 2 を設定して2を返す
x-- は 3を返したあとに x に 2 を設定する

という結果になります。

「インクリメント」は左側の変数に対して1加算した値を設定します。
「デクリメント」は左側の変数に対して1減算した値を設定します。

代入演算子

代入を行うための演算子で , 左辺に右辺を代入します。

代入演算子	意味
=	左辺に右辺を代入
*=	左辺の値に右辺の値をかけたものを左辺に代入
/=	左辺の値に右辺の値を割ったものを左辺に代入
%=	左辺の値に右辺の値の剰余を左辺に代入
+=	左辺の値に右辺の値を足したものを左辺に代入
-=	左辺の値に右辺の値を引いたものを左辺に代入
<<=	左シフトした値を代入
>>=	右シフトした値を代入
>>>=	符号なしの右シフトした値を代入
&=	ビット論理積(AND)の値を代入
^=	ビット排他的論理和(XOR)の値を代入
|=	ビット論理和(OR)の値を代入

中でもよく使うのは
+=などで、左辺の値に右辺の値を足したものを左辺に代入し直します。

var a = 3;
a += 2;
a;

5

変数aには3が代入されていますが、それに2を足した値で上書きされ
最終的な値は5になります。

他の代入演算子もどのような挙動になるかは
コードを書いて試してみましょう。

比較演算子

比較やその結果の結合、関係を現す演算子です。

これは代入をするのではなく
値同士がどうなのかを比較するための演算子です。

等値(比較)演算子	意味
==	等値の比較の結果を返す
!=	不等値の比較の結果を返す
===	同値の比較の結果を返す
!==	非同値の比較の結果を返す

2==2

true

結果はBoolean型というデータ型となりtrueかfalseという値になります。
この場合、左右が等しいのでtrueになります。

2==3

false

この場合、左右は等しくないのでfalseになります。
比較した結果を返すものになるので、値が等しいか、等しくないかを判定できます。

関係演算子

関係演算子	意味
in	左辺の値を右辺が持っているかを判定した値を返す
instanceof	objectが別のobjectのインスタンスかどうかを判別
<	左辺が右辺より小さいかどうかを判定した結果を返す
>	左辺が右辺より大きいかどうかを判定した結果を返す
<=	左辺が右辺以したかどうかを判定した結果を返す
>=	左辺が右辺以上かどうかを判定した結果を返す

関係演算子は右と左の値の関係性をみます。
例えば

2>=3;

false

この場合左側は右側よりも小さいので成り立ちません。
なので結果はfalseとなります。
成り立つ場合はtrueになります。

論理演算子

論理演算子は関係演算子などの結果を組み合わせた結果を返します。

論理演算子	意味
&&	論理積(AND) 左辺と右辺の結果を論理積を返す
||	論理和(OR) 左辺と右辺の結果を論理和を返す

2つの結果があるとします。

その場合結果の組み合わせは

結果１	結果2
true	true
true	false
false	true
false	false

と４通りあります。

この組み合わせた結果を返すのが
論理演算子です。

結果としては

論理演算	結果
true && true	true
true && false	false
false && true	false
false && false	false
true || true	true
true || false	true
false || true	true
false || false	false

というようになります。

2==2 && 3==3

true

2==3 || 3==3

true

まとめ

プログラム上には様々なデータがあり
コードの書き方でデータの取り扱い方が変わります。

演算子でデータ同士の比較をしたり、代入をしたりするのが
多用されるので、どう書いたら
どうなるのか、を把握しておきましょう。

特に論理演算の部分は明日のところでも
重要なポイントとなります。

君がエンジニアになるまであと80日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython