『ハンズオンJavaScript』で基礎力アップ

1章 学び始める前に

• JavaScriptとは？
• Chrome Dev Toolsについて
• JavaScriptの文法を理解する

など概念やJavaScriptはどのようなものかが丁寧に記載されているのでとりあえず読んでおく。

2章 データを学ぶ　JavaScriptの型

JavaScriptには8つのデータ型が存在する。

• Null型
• Undefined型
• 真偽値型
• 数値型
• 調整数型
• 文字列型
• シンボル型
• オブジェクト型

その中のオブジェクト型以外の7つを非オブジェクト型、プリミティブ（Primitive）と呼ばれる。
プリミティブ型は内部構造を持つことができない代わりに演算子を用いた操作が可能。

2章 リテラル値

ソースコード上で直接記述できる値のこと

「リテラル値」この概念がどう必要かはまだ理解が浅い。
undefinedの扱い方と関連していそうやけど、一旦スルーして次に進みます。

2章 識別子（identifier)

任意で決める変数名に当たる部分。
使える文字に制限がある。

1文字目：「アルファベット」「$」「 _ 」が利用可能
2文字目以降：1文字目に利用できる文字種＋数字

JavaScriptの文法として意味のある単語は使用できない。
意味のある単語とは「const」「if」「for」などこれらをトークンと呼ぶ。
すでにトークンとして使用されている言葉や将来的にトークンとして利用される可能性があるものは識別子として使えない。

システムによってすでに予約され、開発者が使えないという意味で予約語（reserved word）とも呼ばれる。

トークン一覧（予約語一覧）

• await
• break
• case
• catch
• class
• const
• continue
• debugger
• default
• delete
• do
• else
• export
• extends
• finally
• for
• function
• if
• import
• in
• instanceof
• new
• return
• super
• switch
• this
• throw
• try
• typeof
• var
• void
• while
• with
• yield
• let
• static
• enum
• implements
• package
• protected
• interface
• private
• public

2章 変数

値を変更できる識別子のこと。
変数の名前はその値が果たすべき役割を名前にするとその後わかりやすい。

変数を利用するための処理

• 宣言
• 代入（or 初期化）

変数を宣言

初期化されていない変数のデフォルト値は「undefined」になる。

let hoge
console.log(hoge)

// 結果
undefined

値の代入

「識別子 = 値」これでOK。
「=」は代入演算子で、左辺の識別子を右辺の値とみなす。という意味になる。

変数に型の異なる値を代入して使い回すことはコードの可読性を下げるので気をつけたい。

自分自身を使用した指揮の結果を代入するのが一般的

hoge = 10
hoge = hoge + 5
console.log(hoge)

// 結果
15

2章 変数と定数の使い分け

定数つまりconstをできるだけ利用した方がいい。
関数プログラミングでは「参照透明性」を重視しているから

参照透明性の特徴を持つプログラムは人にとって理解が容易で不具合が混入しにくい。

2章 Undefinedと各種リテラル

Undefined

undefinedが表示される時

• 変数の初期化が終わっていないとき
• 不具合が発生しているとき
  何かの処理を行なって結果が無効な値であることを示したいときはnullを使うのが良い。

Null

無効であることをエラーではなく、「無効な値」nullで示すことで不具合を発生させる要因になる。
「無効な値」を返すとそのまま処理が継続されてしまい、予想外のところでエラーが発生してしまうことになるから

真偽値

ブーリアン（boolean）とも呼ばれている。
真（true）と偽（false）の2つの値で表現するための型

2章 論理演算子

JavaScriptで使用できる論理演算子は3つ。

• 論理AND演算子
• 論理OR演算子
• 論理NOT演算子

論理AND演算子

〇〇かつ〇〇、複数の条件が全てtrueのときにtrueになり、「&&」を使用して実現する。
「かつ」は論理積とも呼ばれている。
論理積は論理値の掛け算。
真を1、偽を0としたとき2つを掛け合わせて真（1）になるのは両者が真（1）の時。

hoge && hoge

論理OR演算子

〇〇または〇〇、複数の条件が全てfalseのときにfalseになり、「||」を使用して実現する。
「または」は論理和とも呼ばれている。
論理和は論理値の足し算。
真を1、偽を0としたとき2つを足し合わせて偽（0）になるのは両者が偽（0）の時。

hoge || hoge

論理NOT演算子

真と偽を反転させます。

hoge = false;
!hoge
console.log(hoge); // true

2章 論理演算

JavaScriptの値は全てtrueまたはfalseで表現できる。
falseとみなされる値

• false
• 0
• ""（空文字列）
• undefined

上記以外はtrueとみなされる。
trueとみなされる値をまとめてtruthy
falseとみなされる値をまとめてfalsy

2章 二項論理演算子

真偽値以外の型を持つオペランドを与えると実行結果が真偽値以外になる場合がある。

123 || true
→ 123

ショートサーキット評価（短絡評価）

二項論理演算子で覚えておきたいのはショートサーキット評価です。
ソースコードを実行したときに必要のない部分の実行を飛ばして結果を返すという特徴があります。

AND演算子（左辺 && 右辺）

• 左辺の値を求める
• 左辺の値がfalseとみなされた場合その値を返す
• 左辺の値がtrueだったら右辺の値を求めてその結果を返す

OR演算子（左辺 || 右辺）

• 左辺の値を求める
• 左辺の値がtrueだったら、その値を返す
• 左辺の値がfalseだったら、右辺の値を求めてその結果を返す

AND演算子は良いのですが、OR演算子の場合は注意が必要です。
左辺と右辺両方で評価するのではなく、片方ずつ評価して一致すればその時点で値を返します。

123 || true
→ 123

true || 123
→ true

この辺りはJavaScriptを始めた初学者が処理を記述する際に気をつけたいポイント。

2章 デフォルト値の設定に論理演算子を利用する

let name = promot('名前を入力してください') || '未入力';

ユーザーが入力すれば論理OR演算子の右辺は無視されて入力値がnameに代入される。
ユーザーが何も入力しなければ、論理OR演算子の右側が実行されて未入力がnameに代入される。

「0」はfalsyに分類される値、つまり左辺がfalseと判別されるので、nameに未入力が代入される。
ショートサーキット評価をデフォルト値の設定に使用すると不具合が発生する可能性がある。

なのでショートサーキット評価を利用したデフォルト値の設定にはNull合体演算子「??」を使用する。
Null合体演算子は左辺がnullまたはundefinedの時だけに右辺を実行する。

let name = promot('名前を入力してください') ?? '未入力';

2章 等価演算子

等価演算子は4種類

基本的には等価演算子だけを使用することが良い。
抽象的な等価演算子を使用すると意図しない結果になる可能性があるので注意。

厳密な等価演算子

1 === 1 → true
1 === 2 → false
1 === "1" → false
1 === true → false

厳密な不等価演算子

1 !== 1 → false
1 !== 2 → true
1 !== "1" → true
1 !=== true → true

抽象的な等価演算子

等価演算子（==）は等価性を確認する前にオペランドを抽象化する。
可能な場合オペランド（文字列や真偽値）を事前に数値に変化し、その後で比較する。

1 == 1 → true
1 == 2 → false
1 == "1" →  true
1 == "2" → false
1 == true → true
1 == false → false

抽象的な不等価演算子

1 != 1 → false
1 != 2 → true
1 != "1" → false
1 != "2" → true
1 != true → false
1 != false → true

先ほど基本的には厳密な等価演算子の方を利用するけれど、
抽象的な等価演算子が有効な時もあります。
「null」または「undefined」であることを確認したい場合に有効です。

null === undefined → false
null == undefines → true

ある変数がunllかundefinedのときにデフォルト値を設定する時に有効。
厳密な等価演算子を使用して

val === null || val === undefined

と記述するより

val == null

とした方が簡潔に記述できる。

2章 数値・指数表現

数値はコンソールに入力すると以下のようになります。

42 → 42
-10911 → -10911
.142857 → 0.142857
8848. → 8848

指数表現

小さな値をコンソールで入力すると下記のように変換されます。

0.000000056704 → 5.6704e-8

<仮数>e<指数> = <仮数> x 10²（²が左辺の指数にあたります）
逆に大きな数値を入力した場合はマイナスがプラスになります。

5670400000000 → 5.6704e+8

2章 数値演算

足し算

6 + 36 

引き算

30 - 6

掛け算

8 * 8

割り算

8 / 8

剰余演算子

左辺を右辺で割った余りを算出します。

601 % 43 → 42

べき乗演算子

2 ** 3 

剰余計算の結果は割られている符号と同じになります。

-601 % 43 → -42
-601 % -43 → -42

インクリメント演算子（-- , ++）というのもあります。
インクリメント演算子は単項負値演算子（-）、単項加算演算子（+）と違いスペースを挟むとエラーになります。

2章 演算子の合成記法

2章 関係演算子

演算子の優先順位

べき乗演算子が連続すると右から順番に結合されていく

2 ** 3 ** 2 
>512

2 ** (3 ** 2)
>512

(2 ** 3) ** 2
>64

エスケープシーケンス

キャリッジリターンってどんな時使うんだろうか。

\nの改行ぐらいは覚えておいて良さそう

スプレット演算子

スプレット演算子を文字列に対して実行するときってどんなときだろう…

[... 'the next']
(8) ["t", "h", "e", " ", "n", "e", "x", "t"]

値がない時はundefinedを設定するべき

[,,]
(2) [empty × 2]

上記みたいなパターンが出るとemptyになる
[empty, empty, empty]ではなく[empty, empty]が略されたものと解釈されるので注意

分割代入

君の名をJavaScriptで表すとこうなるのか

> let taki = "僕たち", mitsuha = "私たち"
undefined
> [taki, mitsuha] = [mitsuha, taki]
(2) ["私たち", "僕たち"]
> taki
"私たち"
> mitsuha
"僕たち"

consoleでの実行結果。

2章 オブジェクト

const a = 'hello';
a = 'hoge';
> Uncaught TypeError: Assignment to constant variable.

constで宣言した変数に代入しようとするともちろんエラー

const a = {
  props: 'hello'
}

a = {}
> Uncaught TypeError: Assignment to constant variable.

Objectも同じでエラーになる
ただ、プロパティは際代入可能

const a = {
  props: 'hello'
}
a.props = 'hoge';

> a
> {props: "hoge"}

理解してないとハマりそうなポイントの可能性大