JavaScriptについて考える静的型付け言語と、動的型付け言語について

主題

本記事は、JavaScriptについて考える静的型付け言語と、動的型付け言語についてまとめたみたものです。

まずそれぞれの型についてまとめる前に、
「二進数」
「16進数」
について簡単にまとめました。

二進法について

コンピュータが扱うデータは全て二進数で表現できます。0と1だけであらゆる「情報」を表現できるのです。数値は勿論、画像や文字も0と1の二進数で表現できます。

16進数について

2進数には 0と1の2種類の数字で表現しましたが、16進数には 16種類の数字があります。 文字としての数字は 0 から 9 までの 10種類しかないので、 アルファベットの A ～ F を 「数字」 として借用します。
16進数は 0 から F までの 16種類の数字を使って数を表し、 数が 0 から 1、2、3… と順に増えていくとき、7、8、9 の次は A、B、C と続き、 D、E、F までは 1桁ですが、 次に桁上がりして 10 になります。

// 例の記載
0, 1, 2 .. d, e, f, 10, 11, 12 … 1d, 1e, 1f, 20, 21, 22 ... 2d, 2e, 2f, 30

コンピュータ等の内部では 2進数が使われていますが、その内部の状態などを表示する
際に 2 進数は余り使われていません。これは、2 進数で表示すると桁数が多くなる上、0 と
1 だけが繰り返される 2 進数の列は専門家でも読みにくいものとなってしまいます。このた
め、一般的には 16 進数というものが使われています。

数値

二進数で1桁の場合、0 1 の 2通り(2^1 )
二進数で2桁の場合、00 01 10 11 の 4通り(2^2)
二進数で3桁の場合、000 001 010 011 100 101 110 111 の 8通り(2^3)
…
二進数で8桁の場合、00000000 00000001 ... 11111110 11111111 の (256通り 2^8)

かなり桁数が多くなってしまいます。

色

光の三原色 RGB(red、green、blue) の光の強さを それぞれ 0-255 で表現することで1677万色 を表現できます (256 x 256 x 256 = 16777216)

二進数表記だと見辛いため、CSSなどでは 16進数 で表記されることが多いです。

#00ff00 //　２進数だと 00000000 11111111 00000000　となる
#ffffff //  ２進数だと　11111111 11111111 11111111　となる

文字

例えば、
Unicode、ASCIIコード、Shift-JIS、UTF-8

これら世界中の文字を集めたデータがあり、文字ひとつひとつにコードが割り当てられています。
https://wa3.i-3-i.info/word1812.html

以上の事をふまえて・・・

このように全部01などの数値でデータにするとコンピューターが何のデータか分からないという事が発生します。

例えば 0011010100100111 という並びのデータがあるとき、このデータが数値を表すのか、色を表すのか、文字コードを表すのか分かりません。もしデータに対する型があればコンピュータがその数値をどのように解釈すれば良いか分かります。

なのでどんな型なのかをコンピュータへ伝えることは大事ということになります。

JavaScriptにおけるデータ型について

結論として、JavaScript は動的型付け言語です。

プログラミング言語には大きく分けて静的型付け言語と、動的型付け言語の二種類があります。
「型付け」「型」とは？動的と静的の違いは？

動的型付け言語は型(=変数に入るデータの種類)を指定しないで変数を使用できます

JavaScriptとJavaで変数を宣言するコードを比較してみましょう。
(JavaScriptとJavaは全く別の言語です。食べ物のハムとハムスターくらい違います。)

JavaScript(動的型付け言語)の変数宣言

var str = "Hello" // string型
var i = 1 // number型
var f = 1.1 // number型
var bool = true // boolean型

Java(静的型付け言語)の変数宣言

String str = "Hello"; // String型
int i = 1; // int型
float f = 1e-1f; // 1×10^-1 float型
double d = 1.0; // double型
boolean b = true; // boolean型

動的型付け言語では、プログラマは型を意識しないで変数を使用できます。一方、静的型付け言語の場合、変数にどんな値が入るかプログラマが指定する必要があります。

静的型付け言語の場合、は指定した型と違うデータが入ってくると、エラーが発生します。
動的型付け言語の場合は、エラーが発生しません。

デメリットについて

上記のように書くと、動的型にはメリットしかないと思ってしまいますが、そうでもありません。

プログラムを実行しないとバグがわからない

事前に分からないため、リリースしたあとに結構気がついたりすることが起きます。

無駄なメモリが発生する

必要なメモリ数が把握できないので、余分に多くメモリ領域を取っておく等しておかないといけません。

型とは

変数に入るデータの種類(文字列なのか、数値なのか、真偽値なのか…etc)を表す。

JavaScriptで使えるデータ型一覧

JavaScriptにはプリミティブ型のデータ型7つ+オブジェクトというデータ型があります。

プリミティブ型

Boolean
- 真偽値。true または false 。
Number
- 数値。整数または浮動小数点数。例えば 42 や 3.14 。
BigInt
- 長整数。精度が自由な整数値。例えば 9007199254740992n など。
String
- 文字列。テキストの値を表す連続した文字。"Hello" など。
Symbol
- シンボル。インスタンスが固有で不変となるデータ型。
null
- null 値を意味する特殊なキーワード。JavaScript では大文字・小文字を区別するので、null は Null や NULL などとは異なる。
undefined
- 未定義。値が未定義の最上位プロパティです。

オブジェクト型

Object
名前と値をもつプロパティを格納する入れ物

typeof演算子

宣言した変数がどんな型なのか確認できます。

var a
typeof a
// "undefined"

var hoge = true
typeof hoge
// "boolean"

var fuga = 100
typeof fuga
// "number"

var hage = 100000000000000n
typeof hage
// "bigint"

var obj = {}
typeof obj
// "object"

まとめ

• JavaScriptは動的型付け言語
• JavaScriptにはプリミティブ型のデータ型7つ+オブジェクトというデータ型がある