デイトラ中級Day2：JavaScriptの基本文法②

chapter1 : 配列

配列とは複数のデータを管理する時の考え方です。

例えば複数の点数を管理する時にはこのような書き方をします。

const scores = [89, 56, 72, 91, 90]

・ひとつひとつの点数のことを「要素」という。
・左から順にインデックスという番号が振られている。
89→0, 56→1, 72→2, 91→3, 90→4
※1からスタートではなく、0からスタートすることに注意

この中からある要素を取り出したいときは、console.logを使います。
scoresの中のインデックス番号0を取り出したいときは

console.log(scores[0])

[result]
89

このように書きます。
他にもいくつか用途ごとの書き方があるのでご紹介。

◼︎要素を変更する

const scores = [89, 56, 72, 91, 90]

scores[1] = 0
console.log(scores)

[result]
const scores = [89, 0, 72, 91, 90]

◼︎要素を追加する

const scores = [89, 56, 72, 91, 90]

scores.push(100)
console.log(scores)

[result]
[89, 56, 72, 91,90, 100]

◼︎配列内のデータ数をカウントする

const scores = [89, 56, 72, 91, 90]

scores.length

[result]
5

◼︎最後の要素を削除

const scores = [89, 56, 72, 91, 90]

scores.pop()

[result]
[89, 56, 72, 91]

◼︎最初の要素を削除

const scores = [89, 56, 72, 91, 90]

scores.shift()

[result]
[56, 72, 91,90]

chapter2 : オブジェクト

オブジェクトも配列と同じように複数のデータを管理する際の考え方です。ただ、配列の考え方と違うところが、オブジェクトはキー(プロパティ)で管理するところです。

どういうことかというと、インデックスで管理する配列は
const scores = [89, 56, 72, 91, 90]
このような書き方をするので何が何点なのかわかりませんよね。

でもオブジェクトで管理するとなると以下のような書き方をします。

const scores{
  math: 87,
  science: 78,
  english: 91
}

何が何点なのか分かるので、より詳細なデータ管理をしやすくなります。
では、オブジェクトでデータを扱う方法をご紹介。

◼︎値を取り出す

const scores{
  math: 87,
  science: 78,
  english: 91
}

scores.english
または
scores[`english`]

[result]
91

◼︎値を書き換える

const scores{
  math: 87,
  science: 78,
  english: 91
}

scores.english = 50
console.log(scores)

[result]
const scores{
  math: 87,
  science: 78,
  english: 50
}

◼︎配列の中にオブジェクトを入れる

const allScores = [
  {math: 67, science: 78, english: 85},
  {math: 78, science: 86, english: 92},
]

allScores[1].english

[result]
92

◼︎オブジェクト内にfunctionを定義

const scores = {
 math:20,
 message: function(){
  console.log("メッセージだよ")
  }
}

scores.message

[result]
メッセージだよ

オブジェクト内で定義されているfunctionのことを「メッソド」と呼ぶ。

◼︎「this」を使うことでオブジェクトのプロパティにアクセスできる

const user = {
 firstName: "Taro",
 lastName: "Yamada",
 fullName: function(){
  return `${this.lastName} ${this.firstName}`
 }
}

user.fullName()

[result]
Yamada Taro

初見ではちょっと複雑なので解説
①firstNameとlastNameをそれぞれ定義する
②fullNameとしてfunctionを定義する
③functionの中身はlastNameとfirstNameが返り値になるようにする
④定数userのfullNameを呼び出す
⑤fullNameはfunction内で、lastNameとfirstNameが返り値になるように記述されているのでYamada Taroが呼び出される
こんな感じです。

chapter3 : for文

for文は繰り返し表現をしたい時に使用します。

const scores = [1,2,5,10,11]
for (let score of scores){
 console.log(score)
}

[result]
1
2
5
10
11

scores[1,2,5,10,11]の中から、scoreを1つずつ取り出してねという意味です。

他にもこんなことができます。

for (let count = 0; count < 5; count++){
  console.log(count)
}

[result]
0
1
2
3
4

count = 0 → 0からスタートして
count < 5 → 5より小さい数字になるまで
count++ → 1ずつカウントアップしてね
という意味になります。

for文とは違うんですけど「for each文」というものもあり、for eachは引数の中でfunctionを定義できます。

const scores = [1,2,5,10,11]

scores. for each(function (score){
 console.log(score)
})

[result]
1
2
5
10
11

考え方としては
①scoresの値を1つ取り出したものが、functionあとのscoreに入る
②scoreを呼び出す
③「①〜②」が順番に繰り返し実行される

今日学んだことはこんな感じです。
初学者の方であれば記事を見てるだけだと難しく感じる人もいるかもしれませんが、実際にコードを書いてみれば意外とすんなり理解できるかもしれないので手を動かしてみることをお勧めします。

jsconsole

それでは今回はこの辺で終わりにします。
ありがとうございました。
けけ丸