JavaScript II

1.変数の復習

ES6の基礎を固めよう
・このレッスンでは、「繰り返し処理」「配列」といった、プログラミングで必須の知識を学んでいく
・最初は難しく感じるかもしれませんが、焦らず着実に学んでいきましょう

「学習コース Ⅰ」の復習
・まずは「学習コース Ⅰ」で学習した、変数の使い方を復習
・コンソールに1から5までの数字を順番に出力してみる

変数の復習
1から順番にconsole.logで出力していくことでもできるが、今回は「変数」の復習も兼ねて、変数numberを用意し1回ずつ自分自身に1を足していく

2.while文

繰り返し処理とは
・次に、1から100までの数字を出力する場合を考えてみる
・前のページと同じように、100回書けばできるが、それはさすがに大変すぎる
・このような場合には「繰り返し処理」というものを用いると便利

while文
・繰り返し処理を行うためにはwhile文というものを用いる
・whileとは「～の間」という意味の英語
・while文は下の図のように書き、「条件式がtrueの間、{ }内の処理を繰り返す」ことができる
・{}の後にセミコロンは不要

while文の使い方（1）
・1から100まで数字を出力する例で、while文の書き方を見ていく
・まず、繰り返す部分の処理をwhileの「{ }」の中に書いていく

while文の使い方（2）
・次に、「いつまで繰り返すか」を指定するための条件式を追加する
・今回は「変数numberが100以下」の間に処理を繰り返す条件式を書く
・まず条件式の判定が行われ、trueの時のみ{}の中で処理が1度実行される
・その後、再び条件式がtrueかどうかチェックされ、trueであればもう一度処理が実行される

while文の注意点
・while文を用いる場合には、条件式の部分がいつかはfalseになり、繰り返し処理が終わる必要があることに注意
・変数numberの値を更新するコードを書き忘れると、いつまでも条件がtrueのままで、永遠に繰り返し処理が続いてしまう
（これを無限ループと呼ぶ）

3.for文

for文
・繰り返し処理を行う方法として、while文以外にもfor文というものもある
・できることはwhile文と同じだが、while文に比べてシンプルに書くことができるのが特徴

for文の書き方
・for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書き、それぞれをセミコロン（;）で区切る

計算式の省略
・「number += 1」は「number ++」のように省略して書くことができる
・また、引き算の場合にも、「number -= 1」を「number --」と省略することができる
・while文やfor文では、この省略した書き方を使ってコードを短くすることができるので、覚えておく

4.繰り返し処理のまとめ

繰り返し処理の応用
・最後に、for文を用いて繰り返し処理の応用問題に挑戦する
・1から100の数字を出力する
・ただし、3の倍数の時は「3の倍数です」と出力する

5.配列とは

複数の値をまとめて扱おう
・複数の値をまとめて扱う方法について学ぶ
・例えば、果物の名前についての値がいくつもあるとき、それぞれを定数(変数)として定義するより、「果物の名前一覧」といったように関連する値をまとめて管理すると便利

配列とは
・複数の値をまとめて管理するには、配列というものを用いる
・配列は、[値1, 値2, 値3] のように作ります。配列に入っているそれぞれの値のことを要素と呼ぶ
・配列を使うと、複数の文字列や数値をまとめて書くことができる

配列を定数に代入する
・配列も1つの値なので、定数に代入することができる
・このとき、配列を代入する定数名は慣習上、複数形にすることが多いので覚えておく
・「console.log(定数名)」とすると、配列がコンソールに出力される

6.配列の要素の取得

インデックス番号
・配列の要素にはそれぞれインデックス番号という番号がついている
・インデックス番号は、0から始まることに注意

配列の要素を取得する
・インデックス番号を用いて配列の要素を取得する
・配列[インデックス番号]とすることで配列の要素を取得することができる
・例えば「apple」の取得は、左の図のように、appleのインデックス番号である0を用いてfruits[0]とすることで可能

7.配列の要素の更新

配列の要素を更新する
・配列は要素に値を代入することでその要素を上書きすることができる

値の再代入と更新の違い
・配列の要素を更新することと定数に配列を再代入することの違い
・一度定義した定数には、配列自体を再度代入することはできないが、配列の要素を更新することはできる

8.配列と繰り返し（1）

配列と繰り返し
・配列に対して繰り返し処理を行うことがしばしばある
・ここでは、for文を使って配列の要素を順に取り出す

配列とfor文
・配列fruitsの要素数が3の場合にすべての要素を出力する書き方
変数の値は0から始めることに注意

9.配列と繰り返し（2）

length
・配列.lengthとすることで、配列の要素数を取得できる
・また、lengthを用いて前の演習のfor文の条件式を書き換えることができる
・配列の要素数が変わっても問題なく繰り返すことができるので便利
・これは配列の繰り返し処理でよく使う書き方なので覚えておく

10.オブジェクトとは

オブジェクトとは
・オブジェクトは配列と同じく複数のデータをまとめて管理するのに用いられる
・配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理する

オブジェクトのつくり方
・配列を作るときは[]で囲みましたが、オブジェクトは{}で囲む
・プロパティ名と値の間はコロン（ : ）で繋ぐ
・また、プロパティ間はコンマ（,）で区切る

オブジェクトを定数に代入する
・オブジェクトも定数に代入することができる
・また、「console.log(定数名)」とすると、オブジェクトがコンソールに出力される

11.オブジェクトの値の取得・更新

オブジェクトの値を取り出す
・オブジェクトの値を取り出すには、対応するプロパティ名を用いて 、
「オブジェクト.プロパティ名」のようにする

オブジェクトの値を更新する
・「オブジェクト.プロパティ名 = 新しい値」とすることでオブジェクトの値を更新することができる

12.オブジェクトを要素に持つ配列（1）

オブジェクトを要素に持つ配列
・配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができる
・その際、コードが横に長くなることを防ぐために、要素ごとに改行することがよくあるので、覚えておく

配列の中のオブジェクトを取り出す
・配列の要素には、先頭からインデックス番号が割り振られている
・配列の値がオブジェクトなら、配列[インデックス番号]で対応するオブジェクトを取得することができる

配列の中のオブジェクトの値を取り出す
・さらに、配列の中のオブジェクトのプロパティの値を取り出すには、
「配列[インデックス番号].プロパティ名」と書く
・やや複雑になってきましたが、これまでの知識の組み合わせですので、わからない箇所はこれまでのスライドで復習する

13.オブジェクトを要素に持つ配列（2）

配列と繰り返し処理
・これまでに学習した「オブジェクトを要素に持つ配列」と「繰り返し処理」を、演習問題を通して復習する
・キャラクターの情報（名前・年齢）を順に出力する

14.undefinedとは

存在しない要素を取得する
・要素を取得する際に、配列に対して存在しないインデックス番号を指定したり、オブジェクトに対して存在しないプロパティを指定するとどうなるのか？

undefined
・配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、undefined と出力される
・undefined は特別な値で、値が定義されていないことを意味する

15.undefinedの対応

undefinedを避ける
・先程の演習では、図のように値が存在しない時に「undefined歳です」と出力されてしまったが、代わりに「年齢は秘密です」と出力する方法を学ぶ

undefinedとif文
・undefined をif文の条件式に使ってみる
・「character.age」の値が「undefined」と等しいかどうかで処理を分岐する

16.総合演習(1)

総合演習
・このレッスンで学んだことを活用して、カフェの情報をコンソールに出力する
・演習に入る前に、演習で登場するオブジェクトの応用を学習する

複雑なオブジェクトを扱う
・オブジェクトの値の部分には、文字列や数値だけでなく、オブジェクトを用いることができる
・「character」というオブジェクトの「favorite」プロパティに対応する値に、オブジェクトを用いている

オブジェクトを呼び出す
・このようなオブジェクトは、「オブジェクト名.プロパティ.プロパティ」のように呼び出す
・定数characterというオブジェクトの中のfoodの値を呼び出すには、「character.favorite.food」と指定する

17.総合演習(2)

総合演習(2)
・最後に、カフェにオススメのメニュー情報を追加する
・オブジェクトの値には配列を用いることもできる