NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay15 「JavaScript」の基本文法を学ぼう3日目!(学習用)

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

今までJavaScriptの基本の型を学んできました。関数や条件分岐など理解が深まってきたかと思いますが、今回も基本の型を学んでいきます。

JavaScriptについて基礎から学びたい人はこちらの記事を参考にしてください。

それでは今回は、JavaScriptの「配列」から学んでいきましょう。

【デイトラWeb制作】JavaScriptの配列について


JavaScriptの配列は、複数の値を1つの変数に格納するためのデータ構造です。これらの値は、順序付けされており、0から始まるインデックスによってアクセスされます

配列の簡単なコードを書いたので参考にしてください。

js
const numbers = [1, 2, 3, 4, 5]; // 数値の配列
const fruits = ['apple', 'banana', 'cherry']; // 文字列の配列
const mixed = [1, 'apple', true]; // 異なるデータ型の配列

console.log(numbers[0]); // 1
console.log(fruits[1]); // 'banana'
console.log(mixed[2]); // true

また、配列にはさまざまな便利なメソッドが組み込まれており、要素の追加、削除、整列、検索などを行うための操作が可能です。

上記は最初からindex(インデックス)で出力しましたがとても大事になるので説明します。

indexは配列された番号に割り振りされた番号です。

もう少し補足すると[10,20,30]とあった場合、左側の数字に割り振らている番号は「0」になります。

真ん中はというと「1」で、右端が「2」となります。このindex番号はよく使われるので覚えておきましょう。

配列のいくつかのパターンを紹介

配列された要素は追加したり、削除したりが可能と説明しましたが、ここでいくつかのパターンを紹介しますね。

JavaScript配列 数値の配列

出力→(3) [89, 56, 78]となり(3)は要素の個数で [ ] 内の数字は配列された番号です。

js

// 角カッコの中身の1つ1つを「要素」と呼ぶ 出力→(3) [89, 56, 78]
const scores = [89, 56, 78];
console.log(scores);

JavaScript配列 length(要素の数を出力)

console.logの定数名のあとにlengthを付けると要素の数が出力されます。

js
const scores = [89, 56, 78];

// lengthは要素の数を表す時に使う。※よくつかうので覚える 出力→3
console.log(scores.length);

JavaScript配列 個別に要素の取り出す

要素を取り出す場合はindex番号を使います。

タック
タック

index番号は要素の左側から[0]でしたよね

左端の数字を呼び出したい時はconsole.log(scores[0]);とすると[89]の数字が出力されます。

js

const scores = [89, 56, 78];

// 個別に要素を取り出す
// [89, 56, 78]の数字の左端が[0]となるので覚えておこう。 出力→1段落目は89 次は56 最後は78
console.log(scores[0]);
console.log(scores[1]);
console.log(scores[2]);

JavaScript 配列 の中身(要素)を削除する

scores.pop();を使うことで要素の中身の最後の部分を削除できます。

js
const scores = [89, 56, 78,100];

// 配列の中身を削除する(要素の最後の文字や値) 出力→(3) [10, 56, 78]
scores.pop();
console.log(scores);
Baby panda
Baby panda

scores.pop();は要素の一番後ろの数字・文字を削除できるよ

JavaScript配列 pushで要素を追加する

数字が並んでいる要素の中に別の要素を挿入する方法です。

pushを使うことで数字、文字の一番後ろに別の数字や文字を挿入できる

js

const scores = [89, 56, 78];

// 要素を追加したい場合はpushを使うと要素の最後に文字や数字が挿入される 出力→(4) [10, 56, 78, 100]
scores.push(100);
console.log(scores);

定数って変更出来ないんじゃなかったけ??

**`const`**は再代入を防ぐために使用されますが、オブジェクトや配列の要素については、**`const`**で宣言しても中身の変更ができます。

つまり、**`const`**を使って配列を宣言すると、その配列そのものは再代入できなくなりますが、配列の中身(つまり、要素の値)は変更可能です。
タック
タック

const(定数)って中身は変更できるんだ!

配列の種類もいくつか紹介しましたが、調べてみると他にもたくさんの種類がありました。

ここでは紹介しきれないので使いたい場面で各個人「調べて使う」をしてみてください。

【Web制作】JavaScript オブジェクトの配列方法

オブジェクト→「物体」や「目的」を意味する言葉です。PCでは画面上の操作対象を指します

配列と良く似ていて覚えやすいと思いますので一緒に見ていきましょう。

基本の形はキー{プロパティ}で表す事ができます。

js
// 各教科の成績情報を表すオブジェクト
const scores1 = {
    japanese: 87,
    history: 92,
    geography: 78
};
console.log(scores1);

const scores2 = {
    physics: 75,
    chemistry: 84,
    biology: 91
};
console.log(scores2);

const scores3 = {
    music: 80,
    art: 88,
    physical_education: 95
};
console.log(scores3);

/出力された値
{ japanese: 87, history: 92, geography: 78 }
{ physics: 75, chemistry: 84, biology: 91 }
{ music: 80, art: 88, physical_education: 95 }

それぞれのオブジェクトは、異なる教科名とその成績を持っています。これらのオブジェクトはscores1scores2scores3という名前で定義され、それぞれのオブジェクトの内容がconsole.log()で出力されます。

他にも応用的な出力方法があります。

スコアの変更と単体出力の方法

先ほど定義したプロパティの数字を変更して単体で出力します。

js
scores1.japanese = 10;

console.log(scores1); 出力→{ japanese: 10, history: 92, geography: 78 }
console.log(scores1.jajpanese); 出力→10

オブジェクトに関数を使う方法

次はオブジェクト内で関数を使う方法を紹介します。

js
const scores = {
    math:87,
    english:98,
    science:65,
   englishMessage:function(){
    console.log(`英語の点数は${this.english}点です`);
   }
    };
scores.englishMessage();   出力→英語の点数は98点です

ここで少しおさらいですが、「${``}」についても書いておきます。

${this.english}は、変数の値を埋め込むための構文です。JavaScriptでは、()で囲まれた文字列内で${}`を使うことで、その中にJavaScriptの式を埋め込むことができます。

例えば、次のように使われます。

js
const englishScore = 85;
console.log(`英語の成績は ${englishScore} 点です。`);


${this.english}
は、テンプレートリテラル内で変数の値を埋め込むための構文です。JavaScriptでは、バッククォート()で囲まれた文字列内で${}`を使うことで、その中にJavaScriptの式を埋め込むことができます。

例えば、次のように使われます。

javascriptCopy codeconst englishScore = 85;
console.log(`英語の成績は ${englishScore} 点です。`);

${}内の式が評価され、その結果が文字列に挿入されます。例では、englishScoreの値が85なので、${englishScore}は85に置き換えられ、最終的な出力は「英語の成績は 85 点です。」となります。

したがって、${this.english}は、オブジェクト内の english プロパティの値を埋め込むことを意味します。thisは現在のオブジェクトを指し、this.englishはそのオブジェクトの english プロパティの値を参照します。

【Web制作】JavaScript for文


JavaScriptのfor文は、ある処理を繰り返し実行するための制御構造です。for文は、特定の条件が満たされる間、または特定の回数だけコードブロックを繰り返し実行します。

タック
タック

for文は大事なところなので必ず理解しましょう。

定数や変数の値が多い場合consol.log()で一つづつ取り出すのは時間がかかる作業になります。

そこで繰り返し処理してくるのがfor文となります。一つ例文を紹介します。

タック
タック

文字が多すぎて見にくいですが…

js
 
const fruits = ["りんご", "みかん", "バナナ", "ぶどう", "いちご", "メロン", "すいか", "さくらんぼ", "パイナップル", "マンゴー", "キウイ", "ブルーベリー", "レモン", "ライチ", "キウイフルーツ", "パッションフルーツ", "カキ", "アボカド", "パパイヤ", "グアバ", "スターフルーツ", "ドラゴンフルーツ", "パーシモン", "デュリアン", "キャンテロープ", "ハスカップ", "カスタードアップル", "ユズ", "ミカン", "レンブ", "サトザクラ", "ナシ", "ブドウ", "マンゴスチン", "フェイジョア", "クラウンメロン", "サラカウド", "ベリー", "ナスタチウム", "オクラ", "チェリモヤ", "イチジク", "ホワイトパインベリー", "ブルーバヤ", "トマト", "トウガン", "カシス"]; 

for (let fruit of fruits) { 
      console.log(fruit);
 }

このコードでは、for...ofループを使用してfruits 配列の各要素を順番に処理し、要素の最後になるまで順に出力する書き方となります。

これだけの要素をひとつひとつ書くと、入力忘れや誤記といった間違いが発生しやすいのでfor...ofを使うとそういったミスが大幅に軽減します。

配列の名前を単数形と複数形にするとわかりやすいよ!

for文 カウントを使った方法

index(インデックス)を使ってループして値を表示する方法も紹介します。

js
for (初期化式; 条件式; 更新式) {
    // 繰り返し実行したいコードブロック
}
  • 初期化式: 繰り返し処理の前に初期化を行うための式。通常はカウンタ変数を初期化します。
  • 条件式: 各繰り返しの前に評価される式。条件が真である場合、繰り返し処理が続行されます。条件が偽である場合、forループから抜けます。
  • 更新式: 各繰り返しの後に実行される式。通常はカウンタ変数を更新します。

例えば、1から10までの整数をコンソールに出力するforループは次のようになります。

js
for (let i = 1; i <= 10; i++) {
    console.log(i);
}

このコードは、変数iを1から初めて、10以下の間、iを1ずつ増やしながら繰り返し処理を行います。iが10になった時点で、ループから抜けます。

forループは、繰り返し処理が一定の回数で終了する場合や、配列の要素を処理する際など、さまざまな場面で使用されます。

indexで表すこともできます。例文はこちらです。

js
 
const fruits = ["りんご", "みかん", "バナナ", "ぶどう", "いちご", "メロン", "すいか", "さくらんぼ", "パイナップル", "マンゴー", "キウイ", "ブルーベリー", "レモン", "ライチ", "キウイフルーツ", "パッションフルーツ", "カキ", "アボカド", "パパイヤ", "グアバ", "スターフルーツ", "ドラゴンフルーツ", "パーシモン", "デュリアン", "キャンテロープ", "ハスカップ", "カスタードアップル", "ユズ", "ミカン", "レンブ", "サトザクラ", "ナシ", "ブドウ", "マンゴスチン", "フェイジョア", "クラウンメロン", "サラカウド", "ベリー", "ナスタチウム", "オクラ", "チェリモヤ", "イチジク", "ホワイトパインベリー", "ブルーバヤ", "トマト", "トウガン", "カシス"]; 

for (let i = 1; i <=  fruits.lenght ; i++) {
    console.log(i);
}

こちらのindexwを使った文も出てくるそうなのでしっかり覚えておきましょう。

forEachを使った繰り返し処理

forEachメソッドを使用して、配列内の要素を1つずつ取り出す際にfunctionを使用した場合、コードは次のようになります。

js
const fruits = ["りんご", "みかん", "バナナ", "ぶどう", "いちご", "メロン", "すいか", "さくらんぼ", "パイナップル", "マンゴー", "キウイ", "ブルーベリー", "レモン", "ライチ", "キウイフルーツ", "パッションフルーツ", "カキ", "アボカド", "パパイヤ", "グアバ", "スターフルーツ", "ドラゴンフルーツ", "パーシモン", "デュリアン", "キャンテロープ", "ハスカップ", "カスタードアップル", "ユズ", "ミカン", "レンブ", "サトザクラ", "ナシ", "ブドウ", "マンゴスチン", "フェイジョア", "クラウンメロン", "サラカウド", "ベリー", "ナスタチウム", "オクラ", "チェリモヤ", "イチジク", "ホワイトパインベリー", "ブルーバヤ", "トマト", "トウガン", "カシス"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

このコードは、forEachメソッドを使用して配列内の各要素を処理する方法を示しています。

具体的には、次の手順で動作します。

  1. fruitsという配列が定義されます。この配列にはさまざまな果物名が含まれています。
  2. forEachメソッドがfruits配列に対して呼び出されます。forEachメソッドは、配列内の各要素に対して指定された処理を実行します。
  3. forEachメソッドの引数には、コールバック関数が渡されます。このコールバック関数は、配列内の各要素に対して実行されます。この関数は、function(fruit)という形式で定義されています。fruitは、コールバック関数内で現在の要素を参照するための名前です。
  4. コールバック関数の本体では、console.log(fruit)が実行されます。これにより、配列内の各要素がコンソールに出力されます。

このようにして、forEachメソッドを使用することで、配列内の各要素を1つずつ取り出し、特定の処理を行うことができます。

タック
タック

for文ではなくforEachを使う理由は何なんだろう?

forEachメソッドを使うメリット2つ取り上げておきます。

  1. 簡潔なコード: forループを使用するよりも簡潔なコードを書くことができます。
  2. 読みやすさ: forEachメソッドは、配列の要素を処理する際の意図が明確になり、コードがより読みやすくなります。

【デイトラWeb制作】JavaScriptの配列についてのまとめ

今回でJavaScriptの基本の勉強は最後になります。今回の内容をまとめると、

  • 配列のパターン
  • オブジェクトの配列方法
  • for文を使った繰り返し処理の方法

これらコーディングしていく上でとても大事になってくる内容を学びました。

僕自身まだまだ不安なところがありますが、先の講義を進めて躓いた時にこういった内容を見直そうかなと思います。

デイトラは1度購入すれば永遠に教材を閲覧することだできるので、本当に僕みたいな初心者には助かります。

こうしてブログは書いているものの、講義の取りこぼしは必ずあると思うのでこのブログはあくまでアウトプットの場として活用し、デイトラの講義をマスターする気持ちで取り組んでいきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA