【3日目】データ型と二進法について

三日目は、データ型と二進法について解説していきます。

前日の資料はこちら +JavaScript道場：二日目 / 変数について

用語集

• データ型
• 静的型付け言語
• 動的型付け言語
• JavaScriptとJavaは違うもの
• 二進法、十六進法
• 8bit = 1Byte
• typeof演算子
• 文字コード
• プリミティブ型
• オブジェクト

二進法について

「型」とは？の説明の前に・・・二進法について コンピュータが扱うデータは全て二進法で表現できます。0と1だけであらゆる「情報」を表現できるのです。数値は勿論、画像や文字も0と1の二進法で表現できます。(すごくないですか！？)

もう一度言います、0と1だけであらゆる「情報」を表現できるのです！！ 数字は勿論、ゲームで使われる画像も、Youtube動画も、あいみょんの楽曲も！！

全て！！ 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 になります。

Copycopy code to clipboard
1// 例
20, 1, 2 .. d, e, f, 10, 11, 12 … 1d, 1e, 1f, 20, 21, 22 ... 2d, 2e, 2f, 30

実際に例を見ていきましょう。

数値

二進数で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)

補足：データの単位について

少し話題が逸れますが、データを表す単位について触れておきます。0と1の塊を8つで1Byteと表現します。二進法で10桁ごとに単位が上がっていきます。

8bit＝1Byte (バイト) 1024Byte=1KB (キロ・バイト) 1024KB=1MB (メガ・バイト) 1024MB=1GB (ギガ・バイト) 1024GB=1TB (テラ・バイト)

よく使われる単位は上記のようになっています。1MBの画像だと、0と1が 8*1024*1024 = 8388608 個も並んでいる訳ですね。想像すると目眩がします！

色

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

二進数表記だと見辛いため、CSSなどでは 16進数 で表記されることが多いです、見たことありますよね？

Copycopy code to clipboard
1#00ff00 // 00000000 11111111 00000000
2#ffffff // 11111111 11111111 11111111

試してみよう

Copycopy code to clipboard
1// ブラウザで好きなサイトを開いてコンソールタブで下記のコードを実行してみよう
2document.getElementsByTagName("body")[0].style.backgroundColor = "rgb(199,129,35)"

Copycopy code to clipboard
1// ブラウザで好きなサイトを開いてコンソールタブで下記のコードを実行してみよう
2document.getElementsByTagName("body")[0].style.backgroundColor = "#2fdd3c"

文字

Unicode、ASCIIコード、Shift-JIS、UTF-8 世界中の文字を集めたデータがあり、文字ひとつひとつにコードが割り当てられています。（すごい！！）

• 参考：UTF-8とは

課題1. UTF-8とは何か、調べてみましょう

下記のコードをデベロッパー・ツールのコンソールタブで実行してみましょう

Copycopy code to clipboard
1// A-Zのアルファベットが出力される
2// 65 には アルファベットの「A」が割り当てられている
3for (let i=0; i < 26; i++) {
4    console.log(String.fromCodePoint(65+i));
5}

Copycopy code to clipboard
1// あ〜ゖの平仮名が出力される
2// 12354 には 平仮名の「あ」が割り当てられている
3for (let i=0; i < 85; i++) {
4    console.log(String.fromCodePoint(12354+i));
5}

全部01だと、何のデータか分からない

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

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

JavaScript は動的型付け言語です

プログラミング言語には大きく分けて静的型付け言語と、動的型付け言語の二種類があります。では「型付け」「型」とはなんでしょうか？なぜ動的と静的があるのでしょうか？

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

JavaScriptとJavaで変数を宣言するコードを比較してみましょう。(念のためですが、JavaScriptとJavaは全く別の言語です。名前が似ているだけで何の関係もありません。ハムとハムスターくらい違います。)

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

Copycopy code to clipboard
1var str = "Hello" // string型
2var i = 1 // number型
3var f = 1.1 // number型
4var bool = true // boolean型

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

Copycopy code to clipboard
1String str = "Hello"; // String型
2int i = 1; // int型
3float f = 1e-1f; // 1×10^-1 float型
4double d = 1.0; // double型
5boolean b = true; // boolean型

動的型付け言語では、プログラマは型を意識しないで変数を使用できます。 一方、静的型付け言語の場合、変数にどんな値が入るかプログラマが指定する必要があります。 静的型付け言語の場合、は指定した型と違うデータが入ってくると、エラーが発生します。 動的型付け言語の場合は、エラーが発生しません。

まとめ：型とは

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

課題2. 動的型付け言語のメリットとデメリット

動的型付け言語は一見便利ですが、デメリットもあります。どんな問題があるか調べてみましょう。そして、疑問点があれば是非slackで質問してください！

JavaScriptで使えるデータ型一覧

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

プリミティブ型

• Boolean
  • 真偽値。true または false 。
• Number
  • 数値。整数または浮動小数点数。例えば 42 や 3.14159 。
• BigInt
  • 長整数。精度が自由な整数値。例えば 9007199254740992n など。
  • ちょっと特殊なので道場では取りあげません。詳しくはMDN BigIntを参照してください。
• String
  • 文字列。テキストの値を表す連続した文字。"Howdy" など。
• Symbol
  • シンボル。インスタンスが固有で不変となるデータ型。
• null
  • null 値を意味する特殊なキーワード。JavaScript は大文字・小文字を区別するため、null は Null や NULL などとは異なる。
• undefined
  • 未定義。値が未定義の最上位プロパティです。

オブジェクト方

• Object
  • オブジェクト。次回以降に詳しく取りあげます。

typeof演算子

宣言した変数がどんな型なのか確認してみましょう。 何度も言いますが、コードが出てきたら、必ずコンソールタブで確認する癖を付けて下さい！

Copycopy code to clipboard
1var a
2typeof a
3// "undefined"
4　　
5var hoge = true
6typeof hoge
7// "boolean"
8　　
9var fuga = 100
10typeof fuga
11// "number"
12　　
13var hage = 100000000000000n
14typeof hage
15// "bigint"
16　　
17var obj = {}
18typeof obj
19// "object"

今日の内容は以上です！

変数については、もう少し踏み込んで説明する予定です。

プリミティブ型とは？

オブジェクトでなく、メソッドを持たないデータのことです。オブジェクトを説明するまでは理解できなくても問題ありません。ひとまずは、オブジェクト型と、プリミティブ型の二種類があると覚えておいてください。

補講

変数・関数の命名について +変数名、関数名の名前の付け方について

明日は、オブジェクトについてです。

次回はこちら JavaScript道場：4日目 / オブジェクトについて