フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
昨日JavaScriptの本格入門を再度読み始め変数や定数までたどり着きました。
ふと思ったことが
だったので昨日の復習と、データ型からの内容をまとめていきます。
目次
変数
値（データ）の入れ物である変数について復習していく前の準備体操！
変数は
- let（推奨：【理由】変数のスコープがブロックに限定）
- var
を使う！
そして書き方は
let 変数名 = 値
「=」は右辺を左辺に代入するという意味で、「””」：があると文字列になることがルールです。
では変数でできることとメリットについてまとめていきます。
変数でできること
まず変数でできることは、
- 記憶
- 演算（計算）
です。
商品の消費税の計算などに変数は使えそうです！
変数の3つのメリット
変数を使うメリットです。
- 同じ値を使える
- 変更しやすい
- 値の意味がわかりやすい
また、数の合計に向いていることや文章の一部を格納もできます。
定数
定数はconstを使います。
また変数と定数の違いは、「定数は値を変更することができない」こと。
定数でできること
値が変更しない点に着目するとすぐには変わることのない、消費税などに使われるようです。
定数のメリット
変数との違いであることがメリットになります。
- 値を変更できないこと
- 予期せぬ更新を防げる
違いがメリットになるようですね！
次のデータ型から今日学んだJavaScriptです。
データ型
データ型はデータの種類のこと。
- xyz：文字列
- 1,2,3：数値
- true/false：論理値
などのデータを用います。
このデータ型を意識してJavaScriptはする必要があるようです。
JavaScriptは入れ物である変数が値に対して大きさや形を変えてくれます。
例.コップが飲み物によって形や大きさを変えていく
変数とデータ型は常に1セット
JavaScriptが扱えるデータ型
JavaScriptが扱えるデータ型は大きく分けて2つ。
- 基本型（プリミティブ型、ラッパーオブジェクトと呼ばれる）：値が直接格納される
一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性 - 参照型（オブジェクト型）：値を実際に格納しているメモリ上のアドレスに格納する
一度作成した後もその値自体を変更できるためミュータブル（mutable）の特性
基本型と参照型の違いは「値を変数に格納する方法」にあります。
基本型
- 数値型
- 文字列型：0以上の文字
- 真偽値型
- シンボル型
- 特殊型：値が空か未定義であることを指す
参照型
- 配列：データの集合
- オブジェクト：データの集合
- 関数：一連の処理
- 正規表現：
- Date
リテラル
プリミティブ型の値や一部のオブジェクトはリテラルを使うことで簡単に定義できるようになっている。
リテラルはデータ型に格納できる値のことで、値の表現方法のことです。
リテラルには以下があるようです。
- 数値リテラル
- 文字列リテラル
- 配列リテラル
- オブジェクトリテラル
- 関数リテラル
- 未定義値
- null
- テンプレートリテラル
- 正規表現リテラル
それぞれわけてまとめていきます。
①数値リテラル
数値リテラルには
- 整数リテラル
- 浮動小数点リテラル
があるようです。
整数リテラルには10進数、2進数、8進数、16進数があります。
- 10進数
- 2進数：ビットを表現するときに使う「b」はbinaryで2進数を表す
- 8進数：ファイルのパーミッションなど
- 16進数：文字のコードポイントやRGB値の表現などに利用されている
②文字列リテラル
文字列リテラルの特徴は以下のとおりです。
- 「”」と「’」で囲む必要がある
- 「\＋文字」（エスケープシーケンスという）を使う
「\」はmacの場合文字の環境設定で「¥」のキーを「\」に変更することができます。
③配列リテラル
配列リテラルはデータの集合のこと。
配列は複数の値を管理可能な仕切りのある入れ物で[ ]を使う。
④オブジェクトリテラル
オブジェクトリテラルは基礎で配列内のデータを「要素」とします。
オブジェクト内の個々のデータを「プロパティ」と呼びます。
⑤関数リテラル
関数はなにかしらの入力値を与えられることによってあらかじめ決められた処理を行うその結果の戻り値を返す仕組み。
⑥未定義値
未定義値はある定数の値が定義されていないことを表す値のこと。
以下のケースで返されるようです。
- 変数が宣言済であるものの値を与えられていない
- 未定義のプロパティを参照しようとした
- 関数で値が返されなかった
null（ヌル）
null（ヌル）は該当する値がないことを意味します。
空である状態のこと。
undefined（未定義）とは別物なので注意。
⑧テンプレートリテラル
テンプレートリテラルは「`」を使います。
「`」は（shift＋@）ででます！
⑨正規表現リテラル
「\」や「+」からはじまることがあります。
コーディング
1日1回はコーディングしておいたほうが良いと思い、模写をしました。
cssがまだですが以前よりスピードは上がった気がする…！
でもまだ綺麗にできていないし、ブロック分けがもう少し早く理解出来るようになりたい…
JSの勉強をしていて最初に
- じゃんけんゲームのコードを写経
- JSの本を読む
だけど一旦今データ型まで読み終わったので、データ型がじゃんけんゲームでどのように活用されているのかを見ていこうと思います！
おわりに
JavaScriptの勉強をしていて解釈の違いなどがあってこれであっているのかな…ということがあります…
とはいってもまだ入り口に立ったばかりなので、調べて実際にコードを打って合っているものと合っていないものなどを判断していこう…！
feedlyにもITニュースを入れているからJavaScriptのことがあれば、保存して何度も読むようにどんどんアップデートしていく！
もりけん塾（@terrace_tech）
Thanks：もりけんさん