【プロゲート】JavaScript ES6（最新版） JavaScript Iの学習内容まとめ

JavaScript I

1.JavaScript（ES6）を学ぼう

JavaScript(ES6)とは
・JavaScript（以下、JS）はWeb開発において必須の存在
・現在では、ほぼ全てのWebサイトでJSが使用されている
・今回学習するES2015（ES6）は、JSの新しい仕様（バージョン）で、従来のJSより効率的にコードが書けることから近年注目を浴びている

プログラムを実行してみよう
・まずは、ES6のコードを実行してみる
・コンソールという画面に文字を出力（表示）する
・「console.log("○○");」というコードを書くと、()の中の○○という文字がコンソールに出力される

2.console.log()

console.log()
・console.log() は丸括弧 () 内に入力された文字をコンソールに出力する
・また「Hello World」のような文字のことを文字列と呼ぶ
・文字列は、左の図のようにシングルクォーテーション（ ' ）かダブルクォーテーション（ " ）で囲む必要があるので注意

セミコロン
・文の最後はセミコロン（;）で終わる
・セミコロンはなくても正常に動作する場合が多いが、思わぬ不具合が生じる可能性があるので忘れずにつける

コメントアウト
・文頭に「//」を書くと、その行はコメントとみなされる
・そのため、プログラムとしては無視され、実行されない
・コメントは、どのような意味のコードであるかを記すメモとして使われる

3.計算してみよう

数値と計算
・プログラミングでは、数値（数字）を扱うこともできる
・数値は文字列と違いクォーテーションで囲まない
・数値は足し算や引き算といった計算もすることができる
・足し算には「+」、引き算には「-」の記号を用いる
・数値と記号はすべて半角で記述することに注意

文字列と数値
・console.log(5 + 2);は足し算の結果である7が出力される
・一方「5 + 2」にクォーテーションをつけると、文字列と解釈されそのまま出力される
・文字列と数値は明確に違うものであることを意識する

4.計算してみよう(2)

掛け算「*」、割り算「/」
・かけ算は「*」（アスタリスク）、割り算は「/」（スラッシュ）という記号を用いて計算することができる
・これらの記号は一般的な算数で用いるものと少し違うのでしっかり覚える

余りの計算「%」
・「%」記号を使うと、割ったときの余りを求めることができる
・プログラミングでは余りの計算を使う機会がよくある

5.文字列の連結

文字列の連結
・「+」記号を用いると、文字列同士を連結することができる
・「"にんじゃ" + "わんこ"」とすると、「"にんじゃわんこ"」という1つの文字列になる

文字列と数値の違い
・"3" + "5" は「"35"」という文字列になるが、3 + 5 は「8」になる
・「文字列と数値は別物」ということをしっかり意識する

6.変数とは

変数とは
・変数は、データ（値）の入れ物（箱）
・箱についている名前が「変数名」であり、箱の中に実際の値（文字列や数値など）が入っている

変数の定義
・変数は「let 変数名 = 値」として定義する
・プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味
・「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入する

変数の使い方
・変数の使い方は簡単で「"John"」という値が代入された変数nameを出力すると、「"John"」という値が出力される
・変数を使うと変数の部分は代入した値に置き換わる

変数と文字列
・これまで見てきたように、変数はクォーテーションで囲まない
・「console.log("name");」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまう

7.変数の役割

変数の特徴
・変数は、これまでに学習してきた「文字列」や「数値」とまったく同じように扱える
・代入されている値が、文字列の場合は他の文字列と連結することができ、数値の場合は計算に用いることができる

なぜ変数を使うのか
・実際のプログラムの中には多くの値が登場する
・プログラムを書く時は、それらの値を間違いのないように、そして値の変更に対応しやすいようにすることが求められる
・それを助けるための1つの仕組みが変数
・変数には以下のようなメリットがある
1.同じ値を繰り返し使える
2.変更に対応しやすい
3.値の意味が分かりやすい

変数のメリット
・「同じ値を繰り返し使える」「変更に対応しやすい」という具体例
・似た文章を何度も書くのは面倒ですが、変数を使えば同じ値を繰り返し使え、楽にコードを書くことが出来る
・また文章が後ほど変更されても、変数を用いていれば、代入する値を変更するだけで全ての変更に対応できる

変数の命名ルール
・変数名（変数の名前）は自由に決めることができるが、できるだけ分かりやすい名前をつけるようにする
・また、ES6では変数の名前にいくつかのルールがある
・適切な変数名を付けるように意識する
・◎英単語、2語以上の場合は大文字で区切る
・×数字開始
・△ローマ字、日本語

8.変数の値の更新（1）

変数の更新
・変数は、一度代入した値を変更することもできる
・一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされる
・定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更される

変数の更新のイメージ
・プログラムは上から順に実行されるので、後で代入された値で変数の中身が更新される

9.変数の値の更新（2）

変数自身を更新する
・すでに定義している変数numberの値に3を足したいという時はnumberに3を足して、再びnumberに代入することで実現できる
・「=」の右側のnumberは値に置き換わり、計算された結果が、左のnumberに代入される

省略した書き方
・「number = number + 10」といった書き方には省略した書き方もあり、よく使うので覚える
・【基本形】X ＝ X+10　【省略形】X+＝10（-、*、/、％も同様）

10.定数とは

定数とは
・変数とよく似たものに、定数がある
・定数はletの代わりにconstを用いて定義する

定数と変数の違い
・変数は1度代入した値を更新することができたが、定数は値を更新することはできない
・定数の値を更新しようとすると、コードを実行した際にエラーが発生してしまう

定数を使うメリット
・定数のメリットは、「後から値を更新できない」ところにある
・これは一見不便に感じるかもしれませんが、予期せぬ更新を防ぐことができ、より安全なコードを書くことができる
・これはコードの量が増えるにつれて徐々にメリットとして感じる
・今後のProgateの演習では、基本的に変数ではなく定数を使っていく

11.テンプレートリテラル

テンプレートリテラル
・これまで文字列や定数の連結には、「+」記号を用いてきたが、ES6では、それ以外の方法として「テンプレートリテラル」という連結方法がある
・テンプレートリテラルを用いると文字列の中に定数（変数）を埋め込むことができる

テンプレートリテラルの書き方
・文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができる
・この時、文字列全体をバッククォーテーション（`）で囲む必要がある
・また、複数の変数や定数を埋め込むことも可能

バッククォーテーションの書き方（PCの場合）
・バッククォーテーションはUSキー（アメリカなどで使用されているキーボード）とJISキー（日本のキーボード）によって入力方法が異なるので注意

12.if文

条件分岐
・プログラミングを学んでいると「ある条件が成り立つときだけある処理を行う」という場面が出てくる
・このようなプログラムを条件分岐と言う

if文の書き方
・if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になる
・ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }の中に書く

if文のコード
・実際のコード、まず条件式の一例
「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件になる
・定数numberには12が代入されているので、この条件は成り立ち、処理が実行されている

if文を書くときのポイント
・if文を書くときは、インデントをする
・インデントとは日本語で「字下げ」を意味する
・きれいにインデントするとコードが見やすくなる
・インデントを入れることでifの処理がどこからか一目でわかる
・tabキーを押すと、インデントすることができる

13.真偽値と比較演算子（1）

条件式の出力
・先ほどのif文の条件式の部分を出力してみると、「true」が出力されている
・このtrueとは一体なにか

真偽値
・「true」は真偽値と呼ばれるもの
・真偽値にはtrueとfalseという2つの値しか存在しない
・条件式は、成り立つと「true」、成り立たなければ「false」という真偽値に置き換わる

if文と真偽値
・if文は条件式がtrueであれば処理が実行され、falseであれば実行されない

大小を比べる演算子
・条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号
・「a < b」は、aの方がbより小さいときtrue, 大きいときfalseになる
・また「a <= b」とすると、aの方がbより小さいまたは等しい（つまりb以下）のときtrueになる
・これは数学で用いる「≦」という記号と似ている

14.真偽値と比較演算子（2）

比較演算子
・比較演算子には、左と右の値が等しいかを調べるものもある
・「a === b」はaとbが等しければtrue、等しくなければfalseになる
・「a !== b」はその逆
・この記号は数値だけでなく、文字列同士の比較にも使える

15.else

条件が成り立たない場合の処理
・if文の条件式が成り立たない場合に、別の処理を行いたい場合がある
・例えばnumberの値が10より大きくない場合には「10以下です」と出力する方法を学ぶ

elseの書き方
・if文に「else」を組み合わせると「もし○○なら●●を行う、そうでなければ■■を行う」という処理ができるようになる
・if文の条件がfalseの場合、elseの処理が実行される

elseのコード
・numberの値が10より大きいかどうかで処理を分けたい場合にif文のみを使用した場合、2つのif文を作成する必要がある
・一方、else文を用いると、1つの条件分岐で同じことを実現できる

16.else if

条件を追加する
・ifとelseだけでなく、さらに条件を追加したい場合の方法
・例えば「10より大きい」という条件を満たさない中で、「5より大きい」という条件で処理を分岐する方法を学ぶ

else ifの書き方
・ifとelseの間に「else if (条件)」を追加することで、if文に条件分岐を追加することができる

else ifのコード
・「else if」を使った実際のコード
・条件式2がtrueなので「else if」の中の処理が実行され、コンソールに表示される

17.複数の条件式

かつ
・複数の条件を組み合わせる方法を学ぶ
・まずは「かつ」について
・「かつ」は「&&」で表す
・「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになる
・「10より大きいかつ30より小さい」は、「10 < x < 30」と書くことは出来ないのでこのようなときは「&&」を使う

または
・「または」は「||」で表す
・「条件1 || 条件2」は「条件1または条件2」という意味
・この場合は、複数の条件のうち1つでもtrueならtrueになる

組み合わせの具体例
・if文を使った「かつ」の具体例
・「number >= 10」も「number < 100」もともにtrueなので、処理が実行されている

18.switch文（1）

switch文とは
・if文以外の条件分岐の方法として、switch文を学ぶ
・信号機の色を表す定数colorの値によって処理を分岐したい例
・このように、ある値によって処理を分岐する場合にswitch文を用いることができる

switch文の書き方（1）
・「switch(条件の値){ 処理 }」とすることでswitch文を書くことができる
・定数colorを定義したうえで、switch文を使ってcolorの値によって処理を分岐させていく例

switch文の書き方（2）
・switch文の中にcaseを追加することで処理を分けることができる
・定数colorの値が「赤」であるときに「ストップ！」という文字列が出力されるようになっている

switch文の書き方（3）
・switch文では分岐の数だけcaseを追加していく
・2つ目のcaseの値に「黄」が指定されており、定数colorの値が「黄」である場合には「要注意」と出力されるようになっている

switch文の注意点
・また、switch文ではbreakが非常に重要
・breakとはswitch文を終了する命令
・breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまう
・switch文を使うときにはbreakを忘れない

19.switch文（2）

switch文 - default
・先ほど学習したように、switchの条件の値がcaseの値と一致したとき、その部分の処理が実行される
・caseのどれにも一致しなかった時、defaultのブロックが実行される
・defaultはif文のelseに似たようなもの
・このようなswitch文の性質を利用すると、if, elseifによる分岐が多く複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできる