【勉強ノート】Progate③ JavaScript学習コースⅡ（有料コース）学習で、できる事、調べた事　まとめ

レッスン内容

繰り返し処理

変数の復習

while文、for文

繰り返し処理のまとめ

配列

配列の要素の取得、更新

配列と繰り返し（１）、（２）

オブジェクト

オブジェクトとは

オブジェクトの値の取得、更新

オブジェクトを要素の持つ配列（１）、（２）

undefined

undefinedとは

undefinedの対応

総合演習

総合演習（１）、（２）

Progate　JavaScript学習コースⅡ　より

身につくスキル（これが出来る）

• 配列、オブジェクトの理解
• 配列、オブジェクトの組み合わせ
• 繰り返し処理を用いた配列要素、オブジェクト要素への処理

勉強になったこと

① 配列の表記

② 変数に配列を代入

const fruits = [ "リンゴ", "バナナ", "みかん" ];
console.log(fruits);

// コンソール出力：[ "リンゴ", "バナナ", "みかん" ];

③ 配列のインデックス番号

インデックス番号はゼロから始まる。

配列を [ "リンゴ", "バナナ", "みかん" ] とした場合、

④ インデックス番号を使った配列要素の取り扱い

// インデックス番号を用いたコンソール出力
console.log(fruits[0]);

// インデックス番号を用いた配列要素の値の更新
fruits[0] = "ぶどう";

// 配列の要素ごとに繰り返し処理
for ( let i = 0; i < 3; i++ ){
  console.log(fruits[i]);
}

// 配列の要素数の取得
console.log(fruits.length);

// 配列の要素数に対して処理を行う場合、「処理条件を配列の要素数の固定数字」を入れると要素数が変更になった場合に総素数を書き換えなければならないため、「変数としてlengthで取得」すると良い。
for ( let i = 0; i < fruits.length; i++ ){
  console.log(fruits[i]);
}

⑤ オブジェクト

配列の要素にプロパティと呼ばれる名前を付けられる。

// オブジェクトの値の取り出し、更新
const list = { name:"John", age:24}
console.log(list.name);
console.log(list.age);

list.age = 36;
console.log(list.age);

// オブジェクトを配列として扱う
const lists = [
  {name:"John", age:24},
  {name:"Anna", age:18}
];

console.log(lists[1].age);

存在しない要素を取り出そうとした場合、「undefined」が出力される。

オブジェクトの値の部分には、さらにオブジェクトを指定することもできる。

レッスン文法：これだけ覚えよう

① while文

while ( number <= 100 ){
  console.log(number);
  number += 1;
}

② for文

for ( let number = 1; number <= 100; number++ ){
  console.log(number);
}

③ 配列とオブジェクト、undefinedに対する処理

const characters = [
  {name:"John",age:24},
  {name:"Anna",age:18},
  {name:"Tom",age:30},
  {name:"Nancy"}
];

for ( let i = 0; i < characters.length; i++ ){
  console.log("--------------------");
  const character = characters[i];
  console.log(`名前は${character.name}です`);

if( character.age === undefined ){
    console.log("年齢は秘密です");
  } else {
    console.log(`${character.age}歳です`);
  }
}
  

④ 配列とオブジェクトの組み合わせ

const skillUp = {
  name:"プログラミングスキル",
  learningSite:{progate:"プロゲート",dotinstall:"ドットインストール"},
  language:["HTML/CSS","JavaScript","Java"]
},

console.log(`勉強中：${skillUp.name}`);
console.log(`学習サイト:${skillUp.learningSite.progate}と${skillUp.learningSite.dotinstall}`);
console.log(`----------------------------`);

console.log("習得言語はこちら");
for ( let i = 0; i < skillUp.language.length; i++) {
  console.log(skillUp.language[i]);
}

勉強不足だと思ったこと、調べたこと

補足で調べたことは特になし。

レッスン項目は多いけれど纏めてみると内容はそこまで多くないので、しっかり整理して次のレッスンを進めていこう。