【受講記録】デイトラWeb制作コース初級編DAY15

2024-11-012024-12-04

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

この記事はこんな人に参考になるかも？

これからデイトラWEB制作コースの受講を考えている方
　実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！

現在進行形でWEB制作コース受講中の方
　一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！

卒業生の先輩方
　懐かしんでいただければ・・・笑　
　　自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。

初級編DAY15の押さえておきたいポイント

配列

複数のデータを管理する。
入れ物（大括弧[]）の中にいれた複数の値のことを要素という。

要素はindexによって管理されるが、indexは0からふられている。
そのため、1番目は0、2番目は1、3番目は2・・・となっており要素数とは異なるので注意が必要。

lengthとは、配列の中の要素数のこと。
console log でlengthを表示させたい場合は、.lengthをつけてあげる

console.log(scores.length);

console log で配列の要素を表示させたい場合は、[]要素のindexを指定すれば良い。

const scores = [89, 56, 2];
console.log(scores [1]);
// 出力値　56

配列の要素を書き換えるのは、indexを指定して書き換えを指示する。
↓これで、89が10に書き変わる

const scores = [89, 56, 2];
scores [0] = 10;
console.log(scores);
// 出力値 [10, 56, 2]

要素を追加するには、.pushで追加する
数値だけでなく文字列やBooleanも追加可能。

const scores = [89, 56, 2];
scores.push(100);
scores.push("おはよう")
console.log(scores);
//出力値　[89, 56, 2, 100, "おはよう"]

要素を削除するには、.pop、.shiftを利用する。
.popで配列の一番最後を削除する。
.shiftで配列の一番最初を削除する。

const scores = [89, 56, 2];
scores.pop();
console.log(scores);

オプジェクト

複数のデータを管理するが、
配列はindexで値を管理していたのに対して、オブジェクトはキー（プロパティ）で値を管理する。
オブジェクトを使うことでキーによって具体的にわかりやすくデータを管理できる。

取り出したい時は、オブジェクト名[“キー”]またはオプジェクト名.キーで指定も可能。

const scores = {
    math: 86,
    english: 90,
    science: 66,
}
console.log(scores["english"]);
console.log(scores.science);

書き換えは、キーを指定して指示する。

const scores = {
    math: 86,
    english: 90,
    science: 66,
}
console.log(scores["english"]);
console.log(scores.science);
scores.english = 100;
console.log(scores);

配列の中でオブジェクトを管理することもできる。

配列とオブジェクトのハイブリット！

const allScores = [
    {math: 89 , english: 50 , science: 65},
    {math: 34 , english: 100 , science: 25},
    {math: 40 , english: 88 , science: 67},
]
console.log(allScores);
console.log(allScores[0].english);

オプジェクト内の関数

オプジェクト内の値には数字以外にも文字列やBoolean、関数を定義することも可能。
また、「this.キー」とすることで関数の中のオブジェクト内の値を使うことができる。

const scores = {
    math: 40,
    english:60,
    science: 80,
    englishMessage: function () {
        console.log(`英語の点数は${this.english}点です`);
    },
}
scores.englishMessage();
//出力値　英語の点数は60点です

繰り返し処理（for文）

配列で学習したように、インデックスを指定して取り出すこともできるが、要素の量が多い場合に非効率。
そんなときに繰り返し処理を使う。
for文の中で指定する変数名は任意だが、配列名を複数形にしてその単数形にするとわかりやすい。

const prefectures = ["北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"];
//for (let 変数 of 配列)
for (let prefecture of prefectures) {
  console.log(prefecture);
}

カウントを使ったfor文

変数i を0で定義（indexの最初は0だから）し、iがprefecturesのlengthよりも小さかったら処理を実行し、そのうえでiをひとつカウントアップする、という定義で繰り返し処理を行う。

const prefectures = ["北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"];

for (let i = 0; i < prefectures.length; i++) {
  console.log(prefectures[i]);
}

forEach

配列から順番に値を取り出して繰り返し処理を実行するイメージ。

const prefectures = ["北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"];
//配列.forEach(function (変数)
prefectures.forEach(function (prefecture) {
  console.log(prefecture);
});