MENU
プログラミングを学んで自由な働き方を手に入れよう！Webエンジニアとして活躍するためのプログラミング学習方法・スクール情報メディア
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScript初心者向けガイド！基礎を学習してReact/Vue.jsを使えるようになろう

JavaScript初心者向けガイド！基礎を学習してReact/Vue.jsを使えるようになろう

JavaScript
当サイトでは一部リンクに広告が含まれています
アイキャッチ

本教材は、プログラミング初心者の方々を対象に、JavaScriptの基礎を学ぶためのコンプリートガイドです。

まず、本教材の特徴をご紹介します。

  • 対象となる読者：

    • プログラミング初心者の方
    • JavaScriptの基礎を学びたい方
    • 実践的な JavaScript の知識を身につけたい方
    • React/Vue.js にチャレンジしたけど挫折して JavaScript を学び直したい方

  • 学べる内容：

    • JavaScriptの基礎知識や構文についての解説
    • 条件分岐や繰り返しの制御などの制御構造の学習
    • 配列やオブジェクトの扱い方についての解説
    • 関数やクラスの概念と使い方の学習
    • モジュールや例外処理など、実践的なトピックの解説
    • 演習問題を通して学んだ内容の理解度を確認

  • 学習終了後の成果：

    • JavaScriptの基礎的な概念と構文を理解し、実際のプロジェクトでJavaScriptを使用する能力を獲得できます。
    • 条件分岐や繰り返しの制御、配列やオブジェクトの操作、関数の定義と呼び出し、非同期処理など、JavaScriptの主要な要素を自在に扱えるようになります。
    • 実践的なトピックの理解により、モジュールの作成や例外処理など、より高度なJavaScriptプログラミングのスキルを身につけることができます。

本教材ではわかりやすい解説と豊富なソースコードの例を通じて、プログラミング初心者の方々がJavaScriptの世界に興味を持ち、学びたくなるような教材です。 JavaScriptは現代のプログラミングにおいて欠かせないスキルであり、本教材を通じて学んだ後は、より高度なWebアプリケーションの開発やプログラミングの世界への一歩を踏み出すことができます。

本教材では、体系的に JavaScript を「本当に使えるスキル」になるまで学べるよう、体系的・網羅的に知識を習得することを重視しています。 その分、ボリュームが大きいため要点だけを知りたいと言う方には向いていない教材かもしれません。しかし、本教材で学べる JavaScript は現場のフロントエンド開発では必要なスキルばかりがギュッと詰まっています。 ぜひ、最後まで粘り強くチャレンジし、JavaScript 開発に自信を付けましょう！
目次

はじめに

JavaScriptとは？

JavaScriptとは、ウェブサイトに動的な要素を加えることができるプログラミング言語の一つです。通常、ウェブブラウザ上で実行され、ユーザーとウェブサイトの間のインタラクション、つまり、ユーザーがウェブサイトとどのように対話するかを管理します。 では、JavaScriptの動作の一例を見てみましょう。

JavaScriptの基本的なコード

まず最初に、とても基本的なJavaScriptプログラムを見てみましょう。こちらのコードは、ウェブブラウザのコンソールに”Hello World”というメッセージを出力します。 
console.log("Hello World");
コードが意味する内容は非常に簡単です。console.logは、引数として渡された値をコンソールに出力する関数です。ここでは文字列”Hello World”を渡していますので、コンソールには「Hello World」と表示されます。

JavaScriptが持つ特徴

JavaScriptには特徴がいくつかあります。その中から、以下にいくつかを紹介します。

動的な言語

JavaScriptでは、変数の型を明示的に宣言する必要がありません。これにより、柔軟なコーディングが可能となります。 具体例を見てみましょう。以下のコードは、変数xに数値1を代入しています。 
let x = 1;
このコードを実行すると、変数xの型は数値となります。しかし、以下のコードを実行すると、変数xの型は文字列となります。 
let x = "Hello";
このように、JavaScriptでは変数の型を宣言する必要がないため、変数の型を柔軟に変更することができます。

イベント駆動

ユーザーの行動に反応してプログラムが動作します。例えば、ボタンがクリックされたとき、フォームが送信されたときなどのイベントに対して処理を行うことができます。

クライアントサイドで実行

JavaScriptはクライアントサイド、つまりユーザーのウェブブラウザ上で直接実行されます。 これにより、サーバーとの通信を軽減し、ページの動作を高速化することが可能となります。

JavaScriptの主な用途

JavaScriptは主に以下のような場面で使用されます。
  • ウェブページに動的な要素を追加する
  • フロントエンドの開発（ユーザーインターフェースの作成）
  • ウェブアプリケーション全体の開発（Node.jsなどを使用）

JavaScriptのバージョンについて

JavaScriptの標準仕様は、ECMAScriptという名前で知られています。ECMAScriptの各バージョンは、新しい機能や改善点を取り入れています。現在の主流なバージョンはECMAScript 2015（ES6）ですが、本書では最新のECMAScript 2021（ES12）について扱います。

JavaScriptを実行するための環境

JavaScriptのコードを実行するためには、JavaScriptが解釈・実行できる環境が必要です。それはウェブブラウザやNode.jsなどが該当します。ウェブブラウザにはJavaScriptエンジンが内蔵されており、ウェブページに埋め込まれたJavaScriptを実行することができます。また、Node.jsはサーバーサイドでJavaScriptを実行するための環境で、JavaScriptでサーバーサイドのアプリケーションを作ることも可能です。

ブラウザでJavaScriptを実行する方法

JavaScriptのコードはHTMLの中に<script>タグを用いて記述することができます。以下にその例を示します。 
<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptの例</title>
</head>
<body>
  <script>
    console.log("Hello, World");
  </script>
</body>
</html>
上記のHTMLをブラウザで開くと、「Hello, World」というメッセージがブラウザの開発者ツールのコンソールに表示されます。

Node.jsでJavaScriptを実行する方法

Node.jsを使用すると、ターミナル（またはコマンドプロンプト）からJavaScriptのコードを直接実行することができます。以下にその一例を示します。 
console.log("Hello World");
このコードをhello.jsという名前のファイルに保存し、ターミナルでnode hello.jsと入力して実行します。そうすると、「Hello World」というメッセージがターミナルに表示されます。

JavaScriptの基本（変数など）

出力の方法

JavaScriptの出力は、基本的には console.log() という関数を使用します。この関数はコンソールに指定した情報を表示します。 例： 文字列 “出力の例” を出力 
console.log("出力の例");
上記のコードを実行すると、コンソール上に “出力の例” と表示されます。この console.log() はデバッグ（プログラムの誤りを探すこと）時に非常に便利です。

コメントの書き方

コメント はコードに付け加えることで、自分自身や他の開発者に対する説明を提供します。JavaScriptでは、コメントは // で開始します。 
// これは一行のコメントです
さらに、複数行のコメントを作成するには、 /* と */ を使用します。 
/*
これは
複数行の
コメントです
*/
これらのコメントはコードの実行には影響しません。

変数とその扱い

変数 は値を保持するコンテナと考えることができます。JavaScriptでは、let キーワードを使用して変数を作成します。 
let message = "こんにちは、世界";
上記のコードでは、 message という名前の変数を作成し、それに文字列 “こんにちは、世界” を割り当てています。 また、JavaScriptでは変数名の最初の文字はアルファベット、アンダースコア (_)、またはドル記号 ($) でなければなりません。また、変数名は予約語（let、if など）と一致してはなりません。

定数の宣言

値を一度設定した後で変更することができない変数を 定数 と呼びます。JavaScriptでは、const キーワードを使用して定数を作成します。 
const myName = "John";
上記のコードでは、 myName という名前の定数を作成し、それに文字列 “John” を割り当てています。

リテラルとは

リテラル はプログラムのソースコード内で直接使用される値のことを指します。JavaScriptのリテラルには主に数値リテラルと文字列リテラルがあります。 
let myString = "これは文字列リテラルです"; // 文字列リテラル
let myNumber = 123; // 数値リテラル
上記のコードでは、文字列リテラル “これは文字列リテラルです” を myString 変数に、数値リテラル 123 を myNumber 変数に割り当てています。

数値の操作

JavaScriptでは、整数や小数、負の数など、様々な数値を扱うことができます。 
let myAge = 25; // 整数
let myHeight = 175.5; // 小数
上記のコードでは、整数 25 を myAge に、小数 175.5 を myHeight に割り当てています。また、JavaScriptでは四則演算（加算、減算、乗算、除算）を行うことができます。 
let sum = 10 + 5; // 15
let product = sum * 2; // 30
上記のコードでは、加算演算子 + と乗算演算子 * を使用して計算を行っています。

文字列とその操作

JavaScriptの 文字列 は、1つ以上の文字で構成されます。文字列はシングルクォート (') またはダブルクォート (") で囲みます。 
let greeting = "こんにちは";
let name = 'John';
上記のコードでは、文字列 “こんにちは” を greeting に、文字列 ‘John’ を name に割り当てています。また、JavaScriptでは + 演算子を使用して文字列を連結することができます。 
let fullName = "John" + " " + "Doe"; // "John Doe"
上記のコードでは、3つの文字列 “John”、” “、”Doe” を連結して、結果として “John Doe” を作成しています。

タイプの概念

JavaScriptには、文字列、数値、真偽値など、いくつかの異なるデータ型があります。データ型は値の「種類」を決定します。 以下に、JavaScriptで頻繁に使用されるデータ型のいくつかを示します。
  • string: 文字列型。文字の列を表します。例: "hello"
  • number: 数値型。整数または浮動小数点数を表します。例: 123, 12.3
  • boolean: 真偽値型。trueまたはfalseの値を持つ型です。
これらの型は、以下のように使われます。 
let name = "John"; // string
let age = 25; // number
let isAdult = true; // boolean

型の確認

ある変数の型を調べるためには、typeof演算子を使用します。 
let name = "John";
console.log(typeof name); // "string"

let age = 25;
console.log(typeof age); // "number"

let isAdult = true;
console.log(typeof isAdult); // "boolean"
これにより、ある変数がどの型の値を保持しているかを確認することができます。

型の変換

JavaScriptでは、データ型を別の型に変換することができます。このような操作を型変換と呼びます。 
let value = "123";
console.log(typeof value); // "string"

value = Number(value);
console.log(typeof value); // "number"
この例では、文字列を数値に変換しています。同様に、String(value)やBoolean(value)を使って、数値を文字列に、または任意の値を真偽値に変換することも可能です。

制御構造

制御構造は、プログラムの実行フローを制御するために使用されます。 例えば、if文は、特定の条件が真である場合にだけ、一部のコードを実行します。 
let age = 15;

if (age >= 20) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}
このコードでは、ageが20以上である場合には「You are an adult.」と出力し、それ以外の場合には「You are not an adult.」と出力します。 また、for文を使って、一定の回数だけ処理を繰り返すこともできます。 
for (let i = 1; i <= 5; i++) {
  console.log(i); // 1, 2, 3, 4, 5
}
このコードでは、iの値を1から5まで順に出力します。

条件分岐

JavaScriptに限らずプログラミングで重要な要素の一つが、条件分岐です。 これは、コードが特定の条件に基づいて異なる動作をするように制御するためのものです。JavaScriptでは、主にif、else if、switch、および三項演算子を使用して条件分岐を作成します。

if 文

JavaScriptのif文は、指定した条件が真である場合にのみ、特定のコードブロックを実行します。 基本的な構文は次のようになります。 
if (条件) {
  // 条件が真の場合に実行される処理
}
ここで条件は、評価結果が真または偽となる任意の式を指定します。条件が真（つまり、評価結果がtrue）である場合、{}内のコードが実行されます。 例えば、次のコードではageが18以上の場合に「成人です」というメッセージをコンソールに出力します。 
let age = 20;

if (age >= 18) {
  console.log("成人です");
}
この例では、age >= 18という条件式が評価され、その結果がtrueである場合（つまり、ageが18以上の場合）にconsole.log("成人です");というコードが実行されます。

else if 文

一方、if文だけでは、単一の条件のみを評価することしかできません。しかし、実際のプログラムでは、複数の条件を評価し、それぞれに異なる動作をさせる必要がしばしばあります。そこで登場するのがelse if文です。 
if (条件1) {
  // 条件1が真の場合に実行される処理
} else if (条件2) {
  // 条件1が偽で条件2が真の場合に実行される処理
} else {
  // 条件1と条件2が偽の場合に実行される処理
}
この構文では、最初に条件1が評価され、その結果がtrueであれば条件1が真の場合に実行される処理が実行されます。条件1の結果がfalseであった場合には次に条件2が評価され、その結果がtrueであれば条件1が偽で条件2が真の場合に実行される処理が実行されます。そして、条件1と条件2の両方がfalseであった場合には、elseブロックの処理が実行されます。 次の例では、テストスコアに基づいて異なるメッセージを出力しています。 
let score = 80;

if (score >= 90) {
  console.log("優秀です");
} else if (score >= 70) {
  console.log("合格です");
} else {
  console.log("不合格です");
}
ここでは、scoreが90以上ならば「優秀です」、70以上ならば「合格です」、それ以外（すなわち、scoreが70未満）ならば「不合格です」というメッセージを出力します。

switch 文

switch文は、値が何であるかに基づいて処理を分岐させるために使用します。これは、同じ値に対して複数のif文を書く代わりに使用できます。 
switch (値) {
  case 値1:
    // 値が値1と一致する場合に実行される処理
    break;
  case 値2:
    // 値が値2と一致する場合に実行される処理
    break;
  default:
    // 値がどのcaseにも一致しない場合に実行される処理
    break;
}
ここでは、値と各caseに指定された値とが比較され、一致するものがあればそのcaseに続くコードブロックが実行されます。なお、各caseの終わりにはbreakが必要です。これにより、そのcaseの処理が終わった後、次のcaseに進まないようにします。defaultは、どのcaseにも一致しない場合の処理を指定します。 次のコードでは、dayの値によって曜日を出力します。 
let day = "月";

switch (day) {
  case "月":
    console.log("月曜日です");
    break;
  case "火":
    console.log("火曜日です");
    break;
  case "水":
    console.log("水曜日です");
    break;
  default:
    console.log("その他の曜日です");
    break;
}
この例では、dayが「月」なら「月曜日です」、「火」なら「火曜日です」、「水」なら「水曜日です」、それ以外なら「その他の曜日です」と出力します。

三項演算子

三項演算子は、条件式に基づいて二つの異なる値から一つを選択します。構文は次のようになります。 
条件 ? 値1 : 値2
ここでは、条件が真（true）であれば値1が、偽（false）であれば値2が選択されます。 例えば、以下のコードでは、isMemberがtrueならdiscountPriceを、そうでなければregularPriceを選択しています。 
let isMember = true;
let discountPrice = 80;
let regularPrice = 100;

let price = isMember ? discountPrice : regularPrice;

console.log(price);  // 80
この例では、isMemberがtrueなのでdiscountPriceがpriceに代入され、最終的にpriceは80と出力されます。

演習問題(条件分岐)

演習課題1：if文を使用した条件分岐

次のJavaScriptコードは、変数ageに格納されている値を元に、年齢が18以上かどうかを確認するものです。ただし、if文の条件式部分が不完全な状態です。変数ageが18以上であることを確認する条件式を完成させてください。 
let age = 20;

if (/* ここに条件式を書く */) {
  console.log("You are an adult.");
}

解答

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

解説

この問題では、変数ageの値が18以上であることを確認する必要があります。したがって、if文の条件式部分にage >= 18を入力します。この条件式は、「ageが18以上である」を意味します。もしageの値が18以上であれば、if文の中のコードconsole.log("You are an adult.");が実行され、コンソールに”You are an adult.”と出力されます。

演習課題2：else if文を使用した条件分岐

次のJavaScriptコードは、テストの得点に基づいて、「優秀」「合格」「不合格」のいずれかをコンソールに出力します。ただし、if文とelse if文の条件式部分が不完全な状態です。テストの得点が90以上であれば「優秀」、70以上であれば「合格」、それ以外の場合は「不合格」と出力するように、条件式を完成させてください。 
let score = 80;

if (/* ここに条件式を書く */) {
  console.log("Excellent");
} else if (/* ここに条件式を書く */) {
  console.log("Pass");
} else {
  console.log("Fail");
}

解答

let score = 80;

if (score >= 90) {
  console.log("Excellent");
} else if (score >= 70) {
  console.log("Pass");
} else {
  console.log("Fail");
}

解説

この問題では、テストの得点が90以上であれば「優秀」、70以上であれば「合格」、それ以外の場合は「不合格」と出力する必要があります。したがって、if文の条件式部分にscore >= 90を、else if文の条件式部分にscore >= 70をそれぞれ入力します。if文の条件式がfalseである場合にはelse if文の条件式が評価され、その結果もfalseである場合にはelseブロックの処理が実行されます。

演習課題3：switch文を使用した条件分岐

次のJavaScriptコードは、dayの値によって、その日が何曜日かをコンソールに出力します。ただし、switch文の中身が不完全な状態です。dayの値が「月」なら「月曜日」、「火」なら「火曜日」、「水」なら「水曜日」、それ以外なら「その他の曜日」と出力するように、コードを完成させてください。 
let day = "火";

switch (day) {
  // ここにコードを書く
}

解答

let day = "火";

switch (day) {
  case "月":
    console.log("It's Monday");
    break;
  case "火":
    console.log("It's Tuesday");
    break;
  case "水":
    console.log("It's Wednesday");
    break;
  default:
    console.log("It's another day");
    break;
}

解説

この問題では、dayの値が「月」なら「月曜日」、「火」なら「火曜日」、「水」なら「水曜日」、それ以外なら「その他の曜日」と出力する必要があります。したがって、switch文の中にそれぞれの条件を記述します。ここで、breakを使うことにより、一致したcaseの処理が終わった後、次のcaseを評価することなくswitch文から抜け出すことができます。

演習課題4：三項演算子を使用した条件分岐

次のJavaScriptコードは、isMemberの値がtrueならdiscountPriceを、falseならregularPriceをpriceに代入します。ただし、三項演算子部分が不完全な状態です。三項演算子を完成させてください。 
let isMember = true;
let discountPrice = 80;
let regularPrice = 100;

let price = isMember ? /* ここにコードを書く */ ;

console.log(price);

解答

let isMember = true;
let discountPrice = 80;
let regularPrice = 100;

let price = isMember ? discountPrice : regularPrice;

console.log(price);  // 80

解説

この問題では、isMemberの値がtrueならdiscountPriceを、falseならregularPriceをpriceに代入する必要があります。 したがって、三項演算子の条件式部分にisMemberを、trueの場合に評価される式部分にdiscountPriceを、falseの場合に評価される式部分にregularPriceをそれぞれ入力します。 このように、三項演算子は、if文を簡潔に記述するために使われます。

配列の基礎

配列の基本概念

配列はJavaScriptの中で最も基本的なデータ構造の一つです。 配列は、異なる値を同じ場所にまとめて保存し、それぞれに一意の識別子（インデックス）を割り当てることができるコレクション型です。 JavaScriptの配列を作成するためには、[]（角括弧）を使用します。これにより、個々の要素が一意のインデックスに関連付けられます。 
let fruits = ['apple', 'banana', 'orange'];
上記の例では、fruitsという名前の配列を作成しており、それぞれのフルーツ名が一意のインデックス（0, 1, 2）に割り当てられています。

配列とインデックス

配列の要素を取得したり操作したりするためには、その要素のインデックスを使用します。 インデックスは、配列の要素が保存されている位置を表し、0から始まる整数です。 次の例では、fruits配列から各要素を取得しています。 
let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'orange'
上記の例では、fruits配列の要素をインデックスを使用して取得しています。インデックス0は'apple'を、インデックス1は'banana'を、インデックス2は'orange'を参照しています。

配列の要素を変更する

配列の要素は、インデックスを使用して直接変更（代入）することができます。 
let numbers = [1, 2, 3, 4, 5];

numbers[0] = 10;
console.log(numbers); // [10, 2, 3, 4, 5]
上記の例では、numbers配列の0番目の要素を10に変更しています。

配列に要素を追加する

配列に新しい要素を追加するためには、push()メソッドを使用します。これは、新しい要素を配列の末尾に追加します。 
let fruits = ['apple', 'banana', 'orange'];

fruits.push('grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']
上記の例では、fruits配列に新しい要素'grape'を追加しています。

配列から要素を削除する

配列から特定の要素を削除するためには、splice()メソッドを使用します。このメソッドは、指定した位置から指定した数の要素を配列から削除します。 
let numbers = [1, 2, 3, 4, 5];

numbers.splice(2, 1);
console.log(numbers); // [1, 2, 4, 5]
上記の例では、numbers配列の2番目の要素（3）を削除しています。

配列から特定の要素を探す

配列から特定の要素を検索するためには、indexOf()メソッドやfind()メソッドを使用します。 indexOf()メソッドは、指定した要素が配列内で最初に見つかった位置のインデックスを返します。 find()メソッドは、配列内の各要素に対して提供された関数を実行し、その関数が真（true）を返す最初の要素を返します。 
let fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // 1
console.log(fruits.find(fruit => fruit === 'orange')); // 'orange'
上記の例では、fruits配列から'banana'という要素を検索し、その位置（インデックス）を取得しています。また、find()メソッドを使用して、配列から'orange'という要素を検索しています。

配列の要素数を知る

配列の要素数（長さ）を取得するためには、lengthプロパティを使用します。 
let numbers = [1, 2, 3, 4, 5];

console.log(numbers.length); // 5
上記の例では、numbers配列の長さ（要素数）を取得しています。

配列の要素をソートする

配列の要素を特定の順序でソート（並び替え）するには、sort()メソッドを使用します。 
let fruits = ['orange', 'apple', 'banana'];

fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']
上記の例では、fruits配列の要素をアルファベット順にソートしています。

配列の要素を結合する

配列の要素を結合し、一つの文字列を作成するには、join()メソッドを使用します。join()メソッドは、配列の全ての要素を一つの文字列に連結します。 
let fruits = ['apple', 'banana', 'orange'];

let result = fruits.join(', ');
console.log(result); // 'apple, banana, orange'
上記の例では、fruits配列の要素を, （カンマとスペース）を使

演習課題(配列の基礎)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: 配列を作成する

“apple”, “banana”, “cherry”という文字列を要素に持つ配列を作成し、その配列をコンソールに出力してください。

回答

let fruits = ["apple", "banana", "cherry"];
console.log(fruits);

解説

配列を作成するには、[]を使用し、その中に要素を,で区切って記述します。 console.log()を使用することで配列の内容を出力できます。

課題2: 配列から要素を取り出す

数字の配列を作成し、配列の2番目の要素をコンソールに出力してください。

回答

let numbers = [10, 20, 30];
console.log(numbers[1]);

解説

配列の要素にアクセスするには、配列名[インデックス]を使用します。インデックスは0から始まるため、2番目の要素にアクセスするにはインデックスに1を指定します。

課題3: 配列の要素を変更する

数字の配列を作成し、配列の最初の要素を10に変更し、その結果をコンソールに出力してください。

回答

let numbers = [1, 2, 3];
numbers[0] = 10;
console.log(numbers);

解説

配列の要素を変更するには、配列名[インデックス] = 値を使用します。この場合、配列の最初の要素を変更したいので、インデックスに0を指定します。

課題4: 配列に要素を追加する

フルーツの名前の配列を作成し、その配列に新しいフルーツの名前を追加し、その結果をコンソールに出力してください。

回答

let fruits = ["apple", "banana", "cherry"];
fruits.push("orange");
console.log(fruits);

解説

配列に新たな要素を追加するには、push()メソッドを使用します。push()メソッドは新たな要素を配列の末尾に追加します。

課題5: 配列から要素を削除する

数字の配列を作成し、その配列から2番目の要素を削除し、その結果をコンソールに出力してください。

回答

let numbers = [10, 20, 30];
numbers.splice(1, 1);
console.log(numbers);

解説

配列から要素を削除するには、splice()メソッドを使用します。splice()メソッドは指定した位置から指定した数の要素を削除します。この場合、2番目（インデックス1）の要素を削除するために、splice(1, 1)を使用します。

課題6: 配列から特定の要素を探す

フルーツの名前の配列を作成し、その配列から特定のフルーツの名前を探し、その結果をコンソールに出力してください。

回答

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.indexOf("banana"));

解説

配列から特定の要素を探すには、indexOf()メソッドを使用します。indexOf()メソッドは配列中の指定した要素の最初のインデックスを返します。この場合、「banana」のインデックス（位置）を取得します。要素が存在しない場合は-1を返します。

配列の操作・メソッド

配列は、JavaScriptでよく使われるデータ構造です。 一連の要素を保存し、その要素を操作するための便利なメソッドがたくさんあります。 これらのメソッドを使うことで、コードの可読性を上げ、効率的にプログラムを作成することができます。今回は、いくつかの重要な配列メソッドについて学びます。

map

使い方 map()メソッドは、配列のすべての要素に対して指定した関数を適用し、その結果から新しい配列を作成します。 具体例 
let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
解説 上記の例では、numbers配列の各要素を取り出し、その要素（number）に2を掛ける関数を適用しています。 その結果を元に新しい配列（doubledNumbers）を作成し、出力しています。

filter

使い方 filter()メソッドは、配列の要素をフィルタリングし、指定した条件を満たす要素から新しい配列を作成します。 具体例 
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
解説 上記の例では、numbers配列の各要素に対して、その要素（number）が偶数であるかどうかを判定する関数を適用しています。 偶数である要素だけを元に新しい配列（evenNumbers）を作成し、出力しています。

reduce

使い方 reduce()メソッドは、配列の全ての要素を処理して単一の出力値を作るために使用されます。 具体例 
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
解説 上記の例では、numbers配列の各要素に対して、前回の関数の実行結果（accumulator）とその要素（currentValue）を加算する関数を適用しています。 最初のaccumulatorの値は0です（reduceメソッドの第二引数）。 最終的に、全ての要素を加算した結果を出力しています。

find

使い方 find()メソッドは、配列の要素を調べて、指定した条件を満たす最初の要素を返します。条件を満たす要素がない場合はundefinedを返します。 具体例 
let numbers = [1, 2, 3, 4, 5];

let evenNumber = numbers.find(number => number % 2 === 0);
console.log(evenNumber); // 2
解説 上記の例では、numbers配列の各要素に対して、その要素（number）が偶数であるかどうかを判定する関数を適用しています。 最初に条件を満たす要素を出力しています。

sort

使い方 sort()メソッドは、配列の要素を並べ替えるメソッドです。デフォルトでは、要素は文字列として昇順にソートされます。 具体例 
let fruits = ["orange", "apple", "banana"];

fruits.sort();
console.log(fruits); // ["apple", "banana", "orange"]
解説 上記の例では、fruits配列の要素をアルファベット順に並べ替え、その結果を出力しています。

reverse

使い方 reverse()メソッドは、配列の要素を逆順に並び替えるメソッドです。 具体例 
let numbers = [1, 2, 3, 4, 5];

numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
解説 上記の例では、numbers配列の要素を逆順に並び替え、その結果を出力しています。

some

使い方 some()メソッドは、配列のいずれかの要素が指定した条件を満たすかどうかを判定するメソッドです。 具体例 
let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
解説 上記の例では、numbers配列の各要素に対して、その要素（number）が偶数であるかどうかを判定する関数を適用しています。 少なくとも1つの要素が偶数であればtrueを、そうでなければfalseを出力しています。

every

使い方 every()メソッドは、配列の全ての要素が指定した条件を満たすかどうかを判定するメソッドです。 具体例 
let numbers = [2, 4, 6, 8, 10];

let areAllEvenNumbers = numbers.every(number => number % 2 === 0);
console.log(areAllEvenNumbers); // true
解説 上記の例では、numbers配列の各要素に対して、その要素（number）が偶数であるかどうかを判定する関数を適用しています。 全ての要素が偶数であればtrueを、そうでなければfalseを出力しています。 これらのメソッドは、配列を操作する際に非常に便利です。 一つ一つのメソッドを理解し、効率的にコードを書くことができるようになりましょう。

演習課題(配列の操作・メソッド)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: 配列の要素を2倍にする

“1”, “2”, “3”, “4”, “5”という数字を要素に持つ配列を作成し、その配列の要素すべてを2倍にした新しい配列をコンソールに出力してください。 回答 
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers);
解説 配列のmap()メソッドを使って、各要素を2倍にした新しい配列を作成します。 そして、console.log()でその結果を出力します。

課題2: 配列から偶数を抽出する

“1”, “2”, “3”, “4”, “5”という数字を要素に持つ配列を作成し、その配列から偶数だけを抽出した新しい配列をコンソールに出力してください。 回答 
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
解説 配列のfilter()メソッドを使って、各要素が偶数であるかどうかを判定し、偶数だけを抽出した新しい配列を作成します。 そして、console.log()でその結果を出力します。

課題3: 配列の要素を逆順にする

“1”, “2”, “3”, “4”, “5”という数字を要素に持つ配列を作成し、その配列の要素を逆順にした新しい配列をコンソールに出力してください。 回答 
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);
解説 配列のreverse()メソッドを使って、配列の要素を逆順にします。 そして、console.log()でその結果を出力します。

課題4: 配列の要素が全て偶数かを判定する

“2”, “4”, “6”, “8”, “10”という数字を要素に持つ配列を作成し、その配列の要素が全て偶数であるかどうかを判定し、結果をコンソールに出力してください。 回答 
let numbers = [2, 4, 6, 8, 10];
let areAllEvenNumbers = numbers.every(number => number % 2 === 0);
console.log(areAllEvenNumbers);
解説 配列のevery()メソッドを使って、配列の全ての要素が偶数であるかどうかを判定します。 そして、console.log()でその結果を出力します。

課題5: 配列の要素をソートして逆順にする

“orange”, “apple”, “banana”という文字列を要素に持つ配列を作成し、その配列の要素をアルファベット順にソートした後、逆順にしてコンソールに出力してください。 回答 
let fruits = ["orange", "apple", "banana"];
fruits.sort();
fruits.reverse();
console.log(fruits);
解説 配列のsort()メソッドを使って、配列の要素をアルファベット順にソートします。 その後、reverse()メソッドを使って配列の要素を逆順にします。 そして、console.log()でその結果を出力します。

課題6: 配列の要素を全て足し合わせて偶数かを判定する

“1”, “2”, “3”, “4”, “5”という数字を要素に持つ配列を作成し、その配列の要素を全て足し合わせた結果が偶数であるかどうかを判定し、結果をコンソールに出力してください。 回答 
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
let isSumEven = sum % 2 === 0;
console.log(isSumEven);
解説 配列のreduce()メソッドを使って、配列の要素を全て足し合わせます。 その結果が偶数であるかどうかを判定し、その結果をconsole.log()で出力します。

オブジェクト

JavaScriptにおけるオブジェクトは、キーと値の組み合わせを持つデータ構造の一つです。各値はプロパティと呼ばれ、それぞれのキーはプロパティ名で識別されます。オブジェクトは、データとそのデータに対する操作を一緒に保持することができ、リアルワールドのエンティティをモデリングするのに役立ちます。例えば、人を表すオブジェクトを考えてみましょう。人は名前、年齢、性別などのプロパティを持つことができます。 また、オブジェクトの各プロパティには、文字列や数値、関数、さらに別のオブジェクトなど、任意のJavaScriptの値を格納することができます。関数を格納したプロパティはメソッドと呼ばれ、オブジェクトの動作を定義します。

オブジェクトの作成

オブジェクトは{}（波括弧）を使って作成します。オブジェクトを作成する際には、{}内にプロパティ名と値のペアを列挙します。各ペアは:（コロン）で区切られ、複数のペアは,（カンマ）で区切ります。 
let person = {
  name: "John",
  age: 25,
  gender: "male"
};
上記のpersonオブジェクトには、name、age、genderという3つのプロパティがあり、それぞれに”John”、25、”male”という値が設定されています。

オブジェクトのプロパティへのアクセス

オブジェクトのプロパティへのアクセスには、ドット演算子（.）とブラケット記法（[]）の2つの方法があります。どちらの方法でも値を取得できますが、ブラケット記法はプロパティ名が動的な場合や、変数名として使用できない文字列をキーとする場合に役立ちます。 
console.log(person.name);   // "John"
console.log(person["age"]); // 25
ここで、person.nameはpersonオブジェクトのnameプロパティの値を取得し、person["age"]はpersonオブジェクトのageプロパティの値を取得します。

オブジェクトのプロパティの変更

オブジェクトのプロパティを変更するには、プロパティへのアクセス方法と同じく、ドット演算子またはブラケット記法を使用して、新しい値を代入します。 
person.name = "Jane";
console.log(person.name); // "Jane"
このコードは、personオブジェクトのnameプロパティの値を”John”から”Jane”に変更しています。

オブジェクトのプロパティの追加

オブジェクトに新しいプロパティを追加するには、まだ存在しないプロパティ名を指定して値を代入します。 
person.address = "Tokyo";
console.log(person.address); // "Tokyo"
ここで、person.addressは新たにpersonオブジェクトに追加されたaddressプロパティに”Tokyo”という値を設定しています。

オブジェクトのプロパティの削除

オブジェクトからプロパティを削除するには、delete演算子を使用します。 
delete person.age;
console.log(person.age); // undefined
このコードはpersonオブジェクトからageプロパティを削除しています。

オブジェクトのプロパティの列挙

オブジェクトのプロパティを列挙するには、for...inループを使用します。これにより、オブジェクトのすべての列挙可能なプロパティのキーを通過し、その各値にアクセスすることができます。 
for (let key in person) {
  console.log(key + ": " + person[key]);
}
ここでは、personオブジェクトのすべてのプロパティ名とその値を表示しています。

オブジェクトのメソッド

オブジェクトはただのデータの集まりだけでなく、機能（関数）を含むこともできます。これらの関数をオブジェクトのメソッドと呼びます。

メソッドの作成

オブジェクトのプロパティとして関数を設定することでメソッドを作成できます。 
let person = {
  name: "John",
  age: 25,
  gender: "male",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // "Hello, my name is John"
上記の例では、greetというメソッドをpersonオブジェクトに追加しています。thisキーワードを使用することで、同じオブジェクト内の他のプロパティにアクセスすることができます。

オブジェクトの入れ子

オブジェクトの中に別のオブジェクトを含めることができます。これをオブジェクトの入れ子と言います。

オブジェクトの入れ子の作成

let person = {
  name: "John",
  age: 25,
  gender: "male",
  address: {
    city: "Tokyo",
    country: "Japan"
  }
};

console.log(person.address.city); // "Tokyo"
上記の例では、addressというプロパティに別のオブジェクトを割り当て、cityとcountryというプロパティを設定しています。このように、関連する情報をまとめるためにオブジェクトの入れ子を使用します。

オブジェクトの入れ子の取得

入れ子になったオブジェクトからデータを取得するには、ドット演算子を連続して使用します。 
let person = {
  name: "John",
  age: 25,
  gender: "male",
  address: {
    city: "Tokyo",
    country: "Japan"
  }
};

console.log(person.address.country); // "Japan"
上記の例では、addressプロパティの中のcountryプロパティを取得しています。 これらのトピックは、オブジェクトをより深く理解し、より複雑なデータ構造を作成するための基本となります。オブジェクトとそのメソッド、オブジェクトの入れ子はJavaScriptの主要な特性であり、現場での開発でも頻繁に使用されます。

演習課題(オブジェクト)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: オブジェクトを作成する

“John”, 25, “male”という値を持つキーが”name”, “age”, “gender”のオブジェクトを作成し、そのオブジェクトをコンソールに出力してください。

回答

let person = {
  name: "John",
  age: 25,
  gender: "male"
};
console.log(person);

解説

オブジェクトを作成するには、{}を使用し、その中にキーと値を:で区切って記述します。 キーはプロパティ名、値はそのプロパティのデータを表します。 console.log()を使用することでオブジェクトの内容を出力できます。

課題2: オブジェクトから値を取り出す

作成したオブジェクトから、”name”の値を取り出してコンソールに出力してください。

回答

let person = {
  name: "John",
  age: 25,
  gender: "male"
};
console.log(person.name);

解説

オブジェクトのキー（プロパティ名）にアクセスするには、ドット演算子（.）またはブラケット記法（[]）を使用します。 ここでは、ドット演算子を使用してnameプロパティの値を取り出しています。

課題3: オブジェクトの要素を変更する

作成したオブジェクトの”name”の値を”Jane”に変更し、そのオブジェクトをコンソールに出力してください。

回答

let person = {
  name: "John",
  age: 25,
  gender: "male"
};

person.name = "Jane";
console.log(person);

解説

オブジェクトの要素を変更するには、キーを指定して新しい値を代入します。 ここでは、nameプロパティの値を”Jane”に変更しています。

課題4: オブジェクトに要素を追加する

作成したオブジェクトに”address”というキーと”Tokyo”という値を追加し、そのオブジェクトをコンソールに出力してください。

回答

let person = {
  name: "John",
  age: 25,
  gender: "male"
};

person.address = "Tokyo";
console.log(person);

解説

オブジェクトに新しい要素を追加するには、新しいキーと値を指定します。ここでは、addressキーとその値"Tokyo"を追加しています。

課題5: オブジェクトから要素を削除する

作成したオブジェクトから”age”というキーの要素を削除し、そのオブジェクトをコンソールに出力してください。

回答

let person = {
  name: "John",
  age: 25,
  gender: "male",
  address: "Tokyo"
};

delete person.age;
console.log(person);

解説

オブジェクトから要素を削除するには、delete演算子を使用します。ここでは、ageキーの要素を削除しています。

課題6: オブジェクトから要素を検索する

作成したオブジェクトからすべてのキーと値を取り出し、それらをコンソールに出力してください。

回答

let person = {
  name: "John",
  gender: "male",
  address: "Tokyo"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

解説

オブジェクトからすべてのキーと値を取り出すには、for...inループを使用します。ここでは、personオブジェクトのすべてのキーと値を取り出して出力しています。

繰り返し処理・制御

一つのタスクを何度も繰り返す場合、あるいはリストやオブジェクトの各要素に同じ操作を行いたい場合、JavaScriptにはいくつかの繰り返し処理の方法があります。各繰り返し方法にはそれぞれ異なる特性や使い道がありますので、それぞれを理解して適切な場面で使えるようになることが重要です。

forループ

最も一般的な繰り返しの方法はforループです。この構文は以下のように構成されます。 
for (初期化式; 条件式; 更新式) {
  // 繰り返し処理
}
ここで、初期化式はループの最初に一度だけ実行され、通常はカウンタ変数の初期値を設定します。次に条件式は、各繰り返しの前に評価され、真（true）ならば繰り返しを続け、偽（false）ならばループを終了します。最後に、更新式は各繰り返しの後で実行され、通常はカウンタ変数の更新に使用します。 以下の例は、0から4までの数字をコンソールに出力するforループの例です。 
for (let i = 0; i < 5; i++) {
  console.log(i);
}
ここで、i = 0が初期化式、i < 5が条件式、そしてi++が更新式となっています。

whileループ

whileループは指定した条件が真である間、ループ内の処理を繰り返します。whileループの構文は以下のようになります。 
while (条件式) {
  // 繰り返し処理
}
この条件式が偽（false）になるまでループ内の処理が続きます。次の例では、同様に0から4までの数字をコンソールに出力します。 
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
whileループを使用するときには注意が必要です。条件が常に真であると、無限ループが発生してしまいます。無限ループはプログラムが停止しなくなるため、通常は避けるべきです。

do-whileループ

do-whileループは、whileループと似ていますが、まず処理を実行し、その後に条件式を評価するところが異なります。そのため、do-whileループは条件に関係なく最初の1回は必ず実行されます。 
do {
  // 繰り返し処理
} while (条件式);
ここでも同様に、0から4までの数字をコンソールに出力する例を見てみましょう。 
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

forEachループ

forEachは、配列の各要素に対して指定した関数を実行します。このメソッドを使用すると、各要素のインデックスや値に簡単にアクセスできます。 
配列.forEach(function(要素, インデックス) {
  // 繰り返し処理
});
以下に示すように、fruits配列の各要素とそのインデックスを出力します。 
let fruits = ["apple", "banana", "orange"];
fruits.forEach(function(fruit, index) {
  console.log(index + ": " + fruit);
});

for-ofループ

for-ofループはES6で追加され、配列や文字列などの反復可能オブジェクトの各要素に対して繰り返し処理を行います。 
for (要素 of 反復可能オブジェクト) {
  // 繰り返し処理
}
例えば、以下のようにfruits配列の各要素を出力することができます。 
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

for-inループ

for-inループは、オブジェクトのプロパティ（または配列のインデックス）に対して繰り返し処理を行います。 
for (プロパティ in オブジェクト) {
  // 繰り返し処理
}
例えば、以下のようにpersonオブジェクトの各プロパティとその値を出力することができます。 
let person = {
  name: "John",
  age: 25,
  gender: "male"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

制御構造

繰り返し処理の中で、特定の条件が満たされたときにループを抜けたり、特定の繰り返し処理をスキップしたりするための制御構造について見ていきましょう。

break文

break文は、ループの途中で処理を終了し、ループを抜け出すために使用されます。以下の例では、数字のリストを検査し、5が見つかったらその時点でループを終了します。 
let numbers = [1, 3, 5, 7, 9];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
  if (numbers[i] === 5) {
    break;
  }
}
このスクリプトを実行すると、1, 3, 5と出力され、5を出力した後にループが終了します。

continue文

continue文は、現在のループを終了し、次のループに直接進むための制御構造です。これは、特定の条件下で特定のイテレーションをスキップしたい場合に役立ちます。 以下の例では、数字のリストを走査し、数字が5のときだけ出力をスキップします。 
let numbers = [1, 3, 5, 7, 9];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 5) {
    continue;
  }
  console.log(numbers[i]);
}
このスクリプトを実行すると、1, 3, 7, 9が出力され、5はスキップされます。

演習課題(繰り返し処理・制御)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: 1から10までの数を出力する

1から10までの数をコンソールに出力するforループを作成してください。

回答

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

解説

forループを使って、変数iの初期値を1に設定し、iが10以下である限りループを続け、各繰り返しでiを1増やすことで、1から10までの数を出力できます。

課題2: 配列の要素を出力する

配列fruitsが以下のように与えられたとき、各要素を出力するforループを作成してください。 
let fruits = ["apple", "banana", "cherry", "orange", "grape"];

回答

let fruits = ["apple", "banana", "cherry", "orange", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

解説

forループを使って、配列fruitsの各要素にアクセスしています。ここでは、変数iの初期値を0（配列の最初のインデックス）に設定し、iがfruits.lengthより小さい限りループを続け、各繰り返しでiを1増やすことで、配列の各要素を出力します。

課題3: 配列の要素を逆順に出力する

同じ配列fruitsの要素を逆順に出力するforループを作成してください。

回答

let fruits = ["apple", "banana", "cherry", "orange", "grape"];
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]);
}

解説

この場合、forループのカウンタをfruits.length - 1（配列の最後のインデックス）から開始し、0以上である限りループを続け、各繰り返しでiを1減らすことで、配列の各要素を逆順に出力します。 これらの課題を通じて、JavaScriptの基本的なループと制御構造を理解し、適切に使用できるようになることが求められます。

関数

関数とは？

関数とは、特定の処理を一つにまとめたものを指します。 関数を使うことで、一部のコードを繰り返し利用したり、コードの流れを理解しやすくしたりすることができます。 JavaScriptで関数を定義する基本的な方法は以下のとおりです。 
function greet() {
    console.log("Hello, World!");
}
この例では、「greet」という名前の関数を定義しています。 定義した関数を呼び出すには以下のようにします。 
greet();
このコードを実行すると、「Hello, World!」というメッセージが表示されます。

関数の引数と戻り値

関数には引数と戻り値というものがあります。 引数は、関数が行う処理の対象となるデータを関数に渡すためのものです。一方、戻り値は、関数が行った処理の結果を関数の外部に返すためのものです。 以下に引数と戻り値を持つ関数の例を示します。 
function add(num1, num2) {
    return num1 + num2;
}

let result = add(3, 4);
console.log(result);  // 7
この例では、「add」という関数に2つの引数（num1とnum2）を渡し、その合計値を戻り値として返しています。

関数の種類

JavaScriptには様々な種類の関数があります。

1. 名前付き関数

先ほどの例は「名前付き関数」です。名前を持つ関数を定義し、その名前で関数を呼び出します。

2. 無名関数

無名関数は名前を持たない関数です。一般に変数に格納されるか、他の関数の引数として直接渡されます。 
let greet = function() {
    console.log("Hello, World!");
};

greet();

3. アロー関数

アロー関数はES6から導入された新しい関数の記述方法です。より簡潔な記述が可能で、thisの挙動が通常の関数とは異なります。 
let greet = () => {
    console.log("Hello, World!");
};

greet();

高度な関数の概念

コールバック関数

コールバック関数とは、関数を引数として別の関数に渡す、そしてその関数の中で呼び出される関数のことを指します。 以下にコールバック関数の例を示します。 
function processArray(arr, callback) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        result.push(callback(arr[i]));
    }
    return result;
}

let numbers = [1, 2, 3, 4, 5];
let squares = processArray(numbers, function(num) {
    return num * num;
});

console.log(squares);  // [1, 4, 9, 16, 25]
この例では、「processArray」関数は2つの引数を取ります。一つ目の引数は配列で、二つ目の引数はコールバック関数です。

閉じ込められた関数（クロージャ）

クロージャとは、一つの関数（親関数）の中に定義された別の関数（子関数）が、親関数の変数にアクセスできるという概念を指します。 
function makeCounter() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

let counter = makeCounter();
console.log(counter());  // 1
console.log(counter());  // 2
この例では、「makeCounter」関数が、その中で定義された無名関数を返しています。 無名関数は、親関数の中で定義された変数countを利用しています。これがクロージャです。 なお、無名関数が親関数のスコープにある変数を「覚えている」ため、makeCounter関数を呼び出して得た各関数（この場合はcounter）は、その内部状態を独立して保持します。

高階関数

高階関数とは、他の関数を引数として取るか、関数を結果として返す関数のことを指します。 先ほどのコールバック関数の例や、クロージャの例は高階関数の典型的な例と言えます。 高階関数はコードの再利用性を高め、抽象化レベルを上げてコードを簡潔に書くことを可能にします。

関数と現場での重要性

現場での開発では、コードの可読性や再利用性を高めるために関数が大変重要になります。 関数を使うことで、一連の処理を一つのブロックとしてまとめ、それに名前をつけることができます。 これにより、コードの流れを理解しやすくなります。また、関数は一度定義すれば何度でも呼び出すことができるので、コードの再利用性が向上します。 特にJavaScriptでは、非同期処理やイベント駆動型のプログラミングを行う場合、コールバック関数やクロージャ、高階関数など、関数の高度な概念が頻繁に用いられます。 そのため、これらの概念を理解していることは、現場でJavaScriptを使いこなすためには不可欠です。

演習課題(関数)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: 関数を作成する

‘Hello, JavaScript!’という文字列を出力する関数を作成し、その関数を実行してください。

回答

function greet() {
    console.log('Hello, JavaScript!');
}

greet();

解説

関数を定義するにはfunctionキーワードを使います。関数名の後ろには()を置き、その後に{}内に関数の内容を記述します。

課題2: 引数と戻り値を持つ関数を作成する

二つの数字を引数として受け取り、その二つの数字の積を戻り値として返す関数を作成してください。そして、その関数に3と4を引数として渡して実行し、結果を出力してください。

回答

function multiply(num1, num2) {
    return num1 * num2;
}

let result = multiply(3, 4);
console.log(result);  // 12

解説

関数の引数は、関数名の後の()内に変数として記述します。関数内で計算した結果を戻り値として返すにはreturnを使います。

課題3: アロー関数を作成する

アロー関数を使用して、’Hello, Arrow Function!’という文字列を出力する関数を作成し、その関数を実行してください。

回答

let greet = () => {
    console.log('Hello, Arrow Function!');
};

greet();

解説

アロー関数を定義するには、まず関数名を定義します。その後に=をつけて関数の引数を()内に記述し、その後に=>をつけます。最後に{}内に関数の内容を記述します。

課題4: コールバック関数を使って配列の各要素を2倍にする

以下の配列の各要素を2倍にするために、コールバック関数を用いてください。 
let numbers = [1, 2, 3, 4, 5];

回答

function processArray(arr, callback) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        result.push(callback(arr[i]));
    }
    return result;
}

let numbers = [1, 2, 3, 4, 5];
let doubles = processArray(numbers, function(num) {
    return num * 2;
});

console.log(doubles);  // [2, 4, 6, 8, 10]

解説

「processArray」関数は、配列とコールバック関数を引数として受け取ります。このコールバック関数は、配列の各要素に適用されます。

オブジェクト指向プログラミング

オブジェクト指向プログラミングは、現実世界の問題をモデル化してプログラムに落とし込む強力な手法です。そして、JavaScriptもオブジェクト指向プログラミングをサポートする言語の一つです。この章では、オブジェクト指向プログラミングの基本概念であるクラスやインスタンス、そしてそれらをJavaScriptでどのように扱うのかについて解説していきます。

クラスとは？

クラスは、オブジェクト指向プログラミングにおける大事な概念です。 クラスは、簡単に言うとオブジェクトの設計図のようなものと考えてください。 同じクラスをもとに作られるオブジェクト（これを「インスタンス」と呼びます）は、共通の属性（プロパティ）と振る舞い（メソッド）を持つことになります。なぜなら、クラスがそのプロパティやメソッドの定義を保持しているからです。 それでは、具体的にJavaScriptでクラスをどのように定義するのか見ていきましょう。

クラスの定義

JavaScriptでクラスを定義するには、classキーワードを使います。以下に、一般的なクラス定義の形式を示します。 
class ClassName {
  constructor(arg1, arg2, ...) {
    // Initialization code
  }

  method1() {
    // Code for method1
  }

  method2() {
    // Code for method2
  }

  // Additional methods...
}
この例では、ClassNameという名前のクラスを定義しています。constructorメソッドは特殊なメソッドで、クラスのインスタンスが作成される際に自動的に実行され、初期化処理を行います。 また、method1やmethod2などのメソッドは、このクラスのインスタンスが持つ振る舞いを定義しています。

コンストラクタについて

コンストラクタとは何か？

JavaScriptにおいて、コンストラクタとはオブジェクトが生成される際に呼び出される特殊なメソッドを指します。具体的には、クラスによって新しいオブジェクトが作成されるときに、そのオブジェクトの初期化を担当します。 コンストラクタは、クラス内で特殊なキーワードconstructorを使用して定義されます。以下に簡単なコンストラクタの例を示します。 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
このコードにはPersonというクラスが定義されており、その中にconstructorというメソッドが含まれています。このメソッドは、Personクラスのインスタンスが生成される際に自動的に呼び出されます。

コンストラクタ(constructor)の使い方

上記の例で見たように、コンストラクタは主にオブジェクトのプロパティを初期化するために使用されます。これらのプロパティは、クラスを定義する際にパラメータとして受け取り、thisキーワードを使ってオブジェクトに関連付けます。例えば： 
let john = new Person("John Doe", 30);
このコードでは、newキーワードを使ってPersonクラスの新しいインスタンスが作成されています。その際、Personクラスのコンストラクタが自動的に呼び出され、与えられたパラメータ（この場合は”John Doe”と30）がそれぞれnameとageプロパティに設定されます。

コンストラクタとthisキーワード

コンストラクタ内で使用されるthisキーワードは、新しく作成されるオブジェクトを参照します。そのため、thisキーワードを使ってプロパティを設定すると、そのプロパティはインスタンスごとに独立した状態を持つことができます。 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
この例では、greetメソッド内の${this.name}は、それぞれのPersonインスタンスが持つnameプロパティを参照します。 JavaScriptのクラスとコンストラクタの理解は、オブジェクト指向プログラミングを効果的に使用するために非常に重要です。

インスタンス

上で述べたように、クラスは設計図のようなものです。そして、その設計図に基づいて具体的に生成されたオブジェクトをインスタンスと呼びます。 インスタンスは、その生成元であるクラスの持つプロパティとメソッドを継承します。これにより、同じクラスから作られたインスタンス間で共通の振る舞いや属性を保持することができます。 では、JavaScriptでどのようにインスタンスを生成するのか見てみましょう。

インスタンスの作成

JavaScriptでクラスからインスタンスを作成するには、newキーワードを使用します。以下にその形式を示します。 
let instanceName = new ClassName(arg1, arg2, ...);
この例では、ClassNameというクラスから新しいインスタンスを作成し、それをinstanceNameという変数に代入しています。

インスタンス変数とインスタンスメソッド

インスタンス変数とインスタンスメソッドは、それぞれインスタンスの持つデータ（状態）と振る舞いを定義します。

インスタンス変数

インスタンス変数は、各インスタンスが独自に保持するデータを格納するための変数です。この変数は、` これを繰り返し行い、プロパティやメソッドが見つからない場合はundefinedを返します。

演習課題(オブジェクト指向プログラミング)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: クラスを作成する

“Person”という名前のクラスを作成し、”name”と”age”というプロパティを持つようにしてください。

回答

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

解説

constructorメソッドを使って、nameとageというインスタンス変数を定義しています。これにより、Personクラスから作成されるインスタンスはnameとageというプロパティを持ちます。

課題2: インスタンスを作成する

課題1で作成した”Person”クラスからインスタンスを作成し、”John Doe”と30という値をプロパティに持つようにしてください。

回答

let john = new Person("John Doe", 30);

解説

newキーワードを使って、”Person”クラスからインスタンスを作成し、そのインスタンスをjohnという変数に代入しています。このとき、Personクラスのconstructorメソッドに”John Doe”と30という引数を渡しています。

課題3: インスタンスメソッドを追加する

課題1で作成した”Person”クラスに、”greet”という名前のインスタンスメソッドを追加してください。このメソッドは、”Hello, my name is [name].”というメッセージをコンソールに出力するものとします。

回答

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

解説

greetというインスタンスメソッドをPersonクラスに追加しました。このメソッドは、”Hello, my name is [name].”というメッセージをコンソールに出力します。ここで、${this.name}はインスタンスのnameプロパティの値を表します。

課題4: クラスを継承する

“Student”という名前の新しいクラスを作成し、課題1で作成した”Person”クラスを継承してください。また、”Student”クラスには”grade”という新しいプロパティを追加してください。

回答

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

解説

StudentクラスはPersonクラスを継承しており、Personクラスのプロパティとメソッドを引き継いでいます。superメソッドはスーパークラスのconstructorメソッドを呼び出すためのメソッドで、スーパークラスのプロパティを初期化します。さらに、Studentクラスには新たにgradeというプロパティを追加しています。

モジュール

モジュールとは？

モジュールとは、関連する一連のコードをひとまとめにし、再利用可能な一つの単位として分割する方法です。 JavaScriptでは、ソースコードを複数のファイルに分割し、それぞれを個別のモジュールとして管理することが可能です。 モジュールを使用することで、コードの再利用性、保守性、可読性が向上します。 たとえば、同じ関数を複数の場所で使う必要がある場合、その関数を一つのモジュールとして定義し、必要な場所でインポートして使用することができます。 また、モジュールを使うことでコードの可読性も向上します。大量のコードが一つの場所にあると、その全体像を把握するのは困難です。モジュールを使うことで、関連する部分をまとめ、その単位で考えることができます。

モジュールの作成方法

モジュールを作成するには、まずそれぞれのモジュールがどの要素を公開するのかを決定します。 この公開する要素をエクスポートといいます。 エクスポートは export キーワードを使って行います。 
// math.js

export const pi = 3.141592;
export function add(a, b) {
  return a + b;
}
上記の例では、piとaddという要素をエクスポートしています。 これにより、他のモジュールからこれらの要素を利用することができます。

モジュールの利用方法

エクスポートした要素を他のモジュールで使用するには、その要素をインポートする必要があります。 インポートは import キーワードを使って行います。 
// app.js

import { pi, add } from './math.js';

console.log(pi); // 3.141592
console.log(add(1, 2)); // 3
上記の例では、math.js モジュールから pi と add をインポートし、それらを使用しています。

デフォルトエクスポートとデフォルトインポート

モジュールは、デフォルトエクスポートという仕組みを使って、一つの要素を「デフォルト」で公開することができます。 デフォルトエクスポートは export default キーワードを使って行います。 
// math.js

export default function add(a, b) {
  return a + b;
}
デフォルトエクスポートされた要素は、import キーワードを使ってデフォルトインポートすることができます。 デフォルトインポートは {} を使用せずに行います。 
// app.js

import add from './math.js';

console.log(add(1, 2)); // 3
上記の例では、math.js モジュールのデフォルトエクスポートされた add 関数をデフォルトインポートし、それを使用しています。

名前付きエクスポートと名前付きインポート

モジュールは、名前付きエクスポートという仕組みを使って、複数の要素をそれぞれ異なる名前で公開することができます。 名前付きエクスポートは export キーワードを使って行います。 
// math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
名前付きエクスポートされた要素は、import キーワードと {} を使って名前付きインポートすることができます。 
// app.js

import { add, subtract } from './math.js';

console.log(add(1, 2)); // 3
console.log(subtract(3, 1)); // 2
上記の例では、math.js モジュールの名前付きエクスポートされた add 関数と subtract 関数を名前付きインポートし、それらを使用しています。

演習課題(モジュール)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: モジュールのエクスポート

以下の要素を含むJavaScriptファイルを作成し、それぞれをエクスポートしてください。
  • piという名前の定数（値は 3.141592）
  • addという名前の関数（引数を2つ取り、それらを足した結果を返す）

回答

// math.js

export const pi = 3.141592;
export function add(a, b) {
  return a + b;
}

解説

モジュールの作成では、export キーワードを使用して要素を公開します。 ここでは pi と add を公開しています。

課題2: モジュールのインポート

先ほど作成したモジュールをインポートし、その要素を使用して以下の計算をコンソールに出力してください。
  • π（円周率）の値
  • 1と2を足した結果

回答

モジュールの全要素のインポート

モジュールの全ての要素を一度にインポートする場合は、*キーワードを使用します。 
import * as 名前 from 'モジュール名';
上記の例では、importキーワードを使用してモジュールの全ての要素を一度にインポートしています。

例外処理

例外とは？

例外は、プログラムの実行中に予期しないエラーや異常が発生した場合に投げられる信号です。 プログラミングでは、私たちが期待する通りに事が進まない場合があります。 例えば、ファイルを開こうとしたが見つからない、ウェブサイトからデータを取得しようとしたが接続できない、などです。 こういった予期しない状況をどのように処理するかは、アプリケーションの信頼性とユーザーエクスペリエンスに大きな影響を与えます。 ここで、例外処理が重要な役割を果たします。 例外処理は、プログラムが予期しないエラーに遭遇したときに、そのエラーに対処するための仕組みです。

JavaScriptにおける例外処理の基本

JavaScriptでの例外処理は、tryキーワードとcatchキーワードを使用して記述します。 以下に基本的な構文を示します。 
try {
  // エラーが発生する可能性のある処理
} catch (error) {
  // エラーが発生したときの処理
}
上記の例では、まずtryブロック内のコードが実行されます。 ここでエラーが発生した場合、処理はすぐにcatchブロックに移ります。 そして、catchブロック内のコードがエラーに対応するために実行されます。 エラーの具体的な内容はcatchの括弧内の変数（上の例ではerror）に格納されます。

try catch finally構文

JavaScriptの例外処理では、tryキーワードとcatchキーワードの他に、finallyキーワードを使用することもできます。 finallyブロック内に記述されたコードは、エラーの有無に関係なく、必ず実行されます。 これは、例えばリソースの解放や、特定の変数の再設定など、エラーが発生してもしなくても必ず行いたい処理を記述するのに便利です。 
try {
  // エラーが発生する可能性のある処理
} catch (error) {
  // エラーが発生したときの処理
} finally {
  // 必ず実行される処理
}

任意のエラーの発生を制御する：throw

また、throwキーワードを使用して、任意のエラーオブジェクトをスロー（投げる）こともできます。 これにより、特定の条件下でエラーを強制的に発生させ、そのエラーを処理することが可能となります。 
throw new Error("任意のエラーメッセージ");
上記の例では、新たなエラーオブジェクトを作成し、そのエラーをthrowキーワードを使ってスローしています。 このように例外処理を適切に使用することで、プログラムの安定性を向上させ、ユーザーにとってより使いやすいアプリケーションを作ることが可能になります。

演習課題(例外処理)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: try-catch文を使用してエラーハンドリングを行う

以下の関数divideは、2つの数値を引数として受け取り、除算の結果を返します。 ただし、0で除算しようとした場合、エラーが発生します。 この関数を使用して、10を任意の数で除算し、その結果をコンソールに出力するコードを書いてください。 もし0で除算しようとした場合は、エラーメッセージを出力してください。

回答

function divide(a, b) {
  if(b === 0) {
    throw new Error("0で除算することはできません！");
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error(error.message);
}

解説

上記のコードでは、まずdivide関数で2つの数値の除算を行います。 bが0であれば、新たなエラーをスローします。 tryブロック内でdivide関数を呼び出し、結果をコンソールに出力します。 0で除算しようとすると、エラーがスローされ、処理はすぐにcatchブロックに移ります。 そしてcatchブロック内で、エラーメッセージをコンソールに出力します。

非同期処理

プログラミングを学び始めるとすぐに出てくるのが非同期処理です。非同期処理は、現代のウェブ開発では不可欠な技術であり、JavaScriptでは特に重要な概念です。

非同期処理とは何か？

非同期処理とは、一言で表すと「待ち時間なく次の処理を進めるための方法」です。具体的には、時間のかかる処理（ネットワーク通信、データベースへのアクセスなど）があるときに、その処理が終わるのを待つことなく次の処理を進めることができます。 たとえば、レストランで食事を注文したとき、料理ができるまで待っている間に別のお客さんの注文を取りに行くウェイターの動きを想像してみてください。ウェイターは、料理ができるまでずっと待つのではなく、他のお客さんの注文を同時並行で処理していきます。これが非同期処理の一例と言えます。

非同期処理の重要性：なぜ学ぶべきか？

非同期処理を理解することで、ウェブサイトやアプリケーションのパフォーマンスを大幅に向上させることができます。特に、データをフェッチ（取得）したり、ユーザーからの入力を処理したりする場合、非同期処理は欠かせません。 そのため、非同期処理は、フロントエンド開発者やフルスタック開発者の重要なスキルセットとなっています。

非同期処理を実装するための知識

API

API（Application Programming Interface）は、ソフトウェア間の接点を定義する仕様のことです。ウェブ開発では、ウェブサービスが提供する機能を利用するためのAPI（Web API）がよく用いられます。 たとえば、天気予報のAPIを使えば、自分のウェブサイトに天気情報を表示することができます。その際、APIからデータを取得する処理は時間がかかるため、非同期処理が必要となります。

fetch

JavaScriptには、Web APIからデータを取得するための組み込み関数としてfetch()が用意されています。fetch()はPromiseを返し、非同期処理によってデータを取得します。 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('エラー:', error));
上記のコードでは、まずfetch()関数でAPIからデータを取得し、次に.then()を使用してそのデータを処理しています。もしエラーが発生したら、.catch()でそのエラーを捕捉しています。

axios

axiosは、JavaScriptで非同期通信を行うためのライブラリです。fetch()と同じくHTTPリクエストを送ることができますが、より詳細な設定やエラーハンドリングが可能なため、fetch()よりも高機能です。 
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log('エラー:', error);
  });
上記のコードでは、まずaxios.get()でAPIからデータを取得し、その後.then()でデータを処理し、エラーが発生したら.catch()でエラーを捕捉しています。

非同期処理の書き方

非同期処理を書くためには、JavaScriptでは主に3つの方法があります。それらはコールバック関数、Promise、そしてasync/awaitです。それぞれの特徴と使い方を見ていきましょう。

コールバック関数とは

コールバック関数は、他の関数に引数として渡され、その関数の中で実行される関数のことを指します。JavaScriptでは、時間のかかる処理が終わった後に実行する処理をコールバック関数として定義します。 たとえば、以下のコードでは、setTimeout()関数の中でコールバック関数が定義されています。 
setTimeout(() => {
  console.log('1秒後に表示');
}, 1000);
このコードでは、setTimeout()関数を使用して、1秒後にconsole.log('1秒後に表示');というコードを実行しています。 ただし、複数の非同期処理を組み合わせる場合、コールバック関数をネストするとコードが複雑になりがちです。これをコールバック地獄と呼びます。その解消法として、Promiseやasync/awaitが用いられます。 具体例： 
const getData = (callbackFunc) => {
  setTimeout(() => {
    const data = { title: 'JavaScript Promise!', message: 'JavaScriptからこんにちは！' };
    callbackFunc(data);
  }, 1000);
};

getData((data) => {
  console.log(data);
});
上記のコードでは、getData()関数の中でコールバック関数を定義し、その関数の中でsetTimeout()関数を使用しています。 setTimeout()関数は、1秒後にコールバック関数を実行します。

Promiseとは

Promiseは、非同期処理の結果を表現するオブジェクトです。Promiseは、非同期処理が成功したか失敗したかを表す「状態」と、その結果の値を持ちます。また、.then()や.catch()、.finally()といったメソッドを提供しており、非同期処理の成功や失敗時の処理を連鎖的に記述できます。 以下のコードは、fetch()関数を使った非同期処理の一例です。fetch()関数はPromiseを返し、そのPromiseの結果を.then()で受け取っています。 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('エラー:', error));
Promiseを使用すると、非同期処理の結果に基づいた複数の処理を直列的に書くことができます。これにより、コールバック地獄を避けることが可能となります。

async/awaitとは

async/awaitは、非同期処理を直感的に書くための構文です。非同期処理を実行する関数にasyncをつけ、その中でPromiseを返す処理の前にawaitを置くことで、非同期処理が終わるまで待つことができます。 以下のコードは、fetch()関数を使った非同期処理の例です。 
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('エラー:', error);
  }
}

fetchData();
このコードでは、fetch()関数とresponse.json()メソッドの結果を待つためにawaitを使用しています。また、非同期処理でエラーが発生した場合のために、try/catch構文を用いています。 async/awaitを使うことで、非同期処理を同期処理のように直線的に書くことができます。これにより、コードの可読性が向上します。

演習課題(非同期処理)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: fetchを使ってデータを取得する

以下のURLからデータを取得し、そのデータをコンソールに出力してください。 URL: ‘https://jsonplaceholder.typicode.com/posts/1‘

回答

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('エラー:', error));

解説

fetch()関数を使用して指定のURLからデータを取得します。その後、.then()を使用してデータをJSON形式に変換し、そのデータをコンソールに出力しています。もしエラーが発生した場合は、.catch()でエラーを捕捉してエラーメッセージをコンソールに出力します。

課題2: axiosを使ってデータを取得する

以下のURLからデータを取得し、そのデータをコンソールに出力してください。 URL: ‘https://jsonplaceholder.typicode.com/posts/1‘

回答

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log('エラー:', error);
  });

解説

axios.get()を使用して指定のURLからデータを取得します。その後、.then()を使用してデータをコンソールに出力しています。もしエラーが発生した場合は、.catch()でエラーを捕捉してエラーメッセージをコンソールに出力します。

DOM操作

WebページをJavaScriptから操作するためには、DOMという仕組みを理解する必要があります。

DOMとは？

DOM（Document Object Model）は、Webページを構成する要素（HTMLタグなど）を操作するための仕組みです。 DOMは、Webページの構造をツリー形式で表現します。このツリー形式の構造をDOMツリーといいます。

WebページとDOM

WebページのHTML要素はすべてDOMツリー上のノード（節点）として表現されます。 たとえば、以下のようなHTMLの構造があるとします。 
<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to my Web Page!</h1>
  <p>This is a paragraph.</p>
</body>
</html>
このHTML構造は、以下のようなDOMツリーとして表現されます。 
Document
├─ DOCTYPE: html
└─ html
   ├─ head
   │  └─ title
   │     └─ "My Web Page"
   └─ body
      ├─ h1
      │  └─ "Welcome to my Web Page!"
      └─ p
         └─ "This is a paragraph."

DOMの構造

DOMツリーの各ノードは、そのタイプ（要素ノード、テキストノードなど）に応じて特有のプロパティとメソッドを持ちます。 例えば、要素ノード（HTMLタグを表現するノード）は、そのタグの属性を操作するためのgetAttributeやsetAttributeといったメソッドを持ちます。 テキストノード（HTML要素の中のテキストを表現するノード）は、そのテキスト内容を取得・設定するためのnodeValueプロパティを持ちます。 これらのプロパティとメソッドを使って、JavaScriptからDOMノードを操作することができます。

DOMツリーの理解

DOMを効率的に操作するためには、DOMツリーの構造を理解することが重要です。

ノードの種類

DOMツリーには、いくつかの種類のノードが存在します。主に以下の3種類を理解しておくと良いでしょう。
  • 要素ノード：HTMLのタグを表現します。例えば、<body>タグや<h1>タグなどがこれに当たります。
  • テキストノード：HTML要素の中のテキストを表現します。例えば、<h1>Welcome to my Web Page!</h1>という要素では、”Welcome to my Web Page!”という部分がテキストノードになります。
  • 属性ノード：HTML要素の属性を表現します。例えば、<img src="image.jpg" alt="My Image">という要素では、srcとaltという属性が属性ノードになります。

ツリー構造の理解

DOMツリーは、親子関係と兄弟関係を持つノードの集合体です。 親ノードは0個以上の子ノードを持つことができ、兄弟ノードは同じ親ノードを共有します。 DOMツリー上のノードは、その親子関係と兄弟関係を通じて他のノードと結びついています。 これにより、あるノードから別のノードに移動する（トラバースする）ことができます。 例えば、ある要素ノードの子ノードを取得するためには、その要素ノードのchildNodesプロパティを使用します。 また、ある要素ノードの親ノードを取得するためには、その要素ノードのparentNodeプロパティを使用します。

DOM要素の取得

DOM要素を操作する前に、まずその要素をJavaScriptから取得する必要があります。 DOM要素を取得するための主なメソッドは以下の4つがあります。
  • document.getElementById(id): 指定したIDを持つ要素を取得します。
  • document.getElementsByClassName(className): 指定したクラス名を持つ要素の集合（HTMLCollection）を取得します。
  • document.getElementsByTagName(tagName): 指定したタグ名を持つ要素の集合（HTMLCollection）を取得します。
  • document.querySelector(selector), document.querySelectorAll(selector): 指定したCSSセレクタに一致する要素（あるいは要素の集合）を取得します。
以下にそれぞれのメソッドの使用例を示します。

IDによる取得

HTML要素のID属性はそのページ内でユニークである必要があります。つまり、1つのIDは1つの要素にしか関連付けられません。 したがって、document.getElementById(id)メソッドは、指定したIDを持つ1つの要素を取得します。 例えば、以下のようなHTML要素があるとします。 
<h1 id="title">Welcome to my Web Page!</h1>
この要素をJavaScriptから取得するには、以下のようにします。 
let title = document.getElementById("title");
console.log(title.textContent);  // "Welcome to my Web Page!"

クラス名による取得

HTML要素のclass属性はそのページ内で共有することができます。つまり、同じクラス名を持つ要素が複数存在することがあります。 したがって、document.getElementsByClassName(className)メソッドは、指定したクラス名を持つ要素の集合を取得します。 例えば、以下のようなHTML要素があるとします。 
<p class="highlight">This is a highlighted paragraph.</p>
<p class="highlight">This is another highlighted paragraph.</p>
これらの要素をJavaScriptから取得するには、以下のようにします。 
let highlights = document.getElementsByClassName("highlight");
for (let i = 0; i < highlights.length; i++) {
  console.log(highlights[i].textContent);  // "This is a highlighted paragraph.", "This is another highlighted paragraph."
}

タグ名による取得

HTMLのタグ名はそのページ内で共有することができます。つまり、同じタグ名を持つ要素が複数存在することがあります。 したがって、document.getElementsByTagName(tagName)メソッドは、指定したタグ名を持つ要素の集合を取得します。 例えば、以下のようなHTML要素があるとします。 
<h1>Welcome to my Web Page!</h1>
<h1>This is another heading.</h1>
これらの要素をJavaScriptから取得するには、以下のようにします。 
let headings = document.getElementsByTagName("h1");
for (let i = 0; i < headings.length; i++) {
  console.log(headings[i].textContent);  // "Welcome to my Web Page!", "This is another heading."
}

CSSセレクタによる取得

document.querySelector(selector)とdocument.querySelectorAll(selector)メソッドは、指定したCSSセレクタに一致する要素（あるいは要素の集合）を取得します。 querySelectorは最初の一致要素を取得し、querySelectorAllは全ての一致要素の集合を取得します。 例えば、以下のようなHTML要素があるとします。 
<div class="box">
  <p class="highlight">This is a highlighted paragraph.</p>
  <p>This is a normal paragraph.</p>
</div>
<div class="box">
  <p class="highlight">This is another highlighted paragraph.</p>
  <p>This is another normal paragraph.</p>
</div>
この中から.boxクラスの要素の中の.highlightクラスの要素を取得するには、以下のようにします。 
let highlightsInBox = document.querySelectorAll(".box .highlight");
for (let i = 0; i < highlightsInBox.length; i++) {
  console.log(highlightsInBox[i].textContent);  // "This is a highlighted paragraph.", "This is another highlighted paragraph."
}

DOM要素の操作

DOM要素を取得した後は、その要素のプロパティやメソッドを使用して要素を操作することができます。

プロパティによる操作

DOM要素は、その要素に対応する属性や内容を操作するためのプロパティを持っています。 例えば、要素の内容を操作するためのtextContentやinnerHTMLプロパティ、要素の属性を操作するためのidやclassNameプロパティなどがあります。 以下にそれぞれのプロパティの使用例を示します。
textContent
要素のテキスト内容を取得・設定するためには、textContentプロパティを使用します。 例えば、以下のようなHTML要素があるとします。 
<h1 id="title">Welcome to my Web Page!</h1>
この要素のテキスト内容をJavaScriptから取得するには、以下のようにします。 
let title = document.getElementById("title");
console.log(title.textContent);  // "Welcome to my Web Page!"
また、この要素のテキスト内容をJavaScriptから設定するには、以下のようにします。 
let title = document.getElementById("title");
title.textContent = "Hello, JavaScript!";
console.log(title.textContent);  // "Hello, JavaScript!"
innerHTML
要素のHTML内容を取得・設定するためには、innerHTMLプロパティを使用します。 例えば、以下のようなHTML要素があるとします。 
<div id="content">This is a <strong>content</strong> area.</div>
この要素のHTML内容をJavaScriptから取得するには、以下のようにします。 
let content = document.getElementById("content");
console.log(content.innerHTML);  // "

This is a <strong>content</strong> area."
また、この要素のHTML内容をJavaScriptから設定するには、以下のようにします。 
let content = document.getElementById("content");
content.innerHTML = "Hello, <strong>JavaScript</strong>!";
console.log(content.innerHTML);  // "Hello, <strong>JavaScript</strong>!"
idとclassName
要素のIDとクラス名を取得・設定するためには、idとclassNameプロパティを使用します。 例えば、以下のようなHTML要素があるとします。 
<p id="intro" class="highlight">This is an introductory paragraph.</p>
この要素のIDとクラス名をJavaScriptから取得するには、以下のようにします。 
let intro = document.getElementById("intro");
console.log(intro.id);  // "intro"
console.log(intro.className);  // "highlight"
また、この要素のIDとクラス名をJavaScriptから設定するには、以下のようにします。 
let intro = document.getElementById("intro");
intro.id = "newIntro";
intro.className = "newHighlight";
console.log(intro.id);  // "newIntro"
console.log(intro.className);  // "newHighlight"

メソッドによる操作

DOM要素は、その要素を操作するためのメソッドも持っています。 例えば、要素に子要素を追加するためのappendChildやinsertBeforeメソッド、要素を削除するためのremoveChildメソッド、要素を複製するためのcloneNodeメソッドなどがあります。 以下にそれぞれのメソッドの使用例を示します。
appendChild
要素に子要素を追加するためには、appendChildメソッドを使用します。 例えば、以下のようなHTML要素があるとします。 
<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
</ul>
この要素に新たな子要素をJavaScriptから追加するには、以下のようにします。 
let list = document.getElementById("list");

let newItem = document.createElement("li");
newItem.textContent = "Cherry";

list.appendChild(newItem);

// <ul id="list">
//   <li>Apple</li>
//   <li>Banana</li>
//   <li>Cherry</li>
// </ul>
insertBefore
要素の特定の位置に子要素を挿入するためには、insertBeforeメソッドを使用します。 例えば、以下のようなHTML要素があるとします。 
<ul id="list">
  <li>Banana</li>
  <li>Cherry</li>
</ul>
この要素の最初の位置に新たな子要素をJavaScriptから挿入するには、以下のようにします。 
let list = document.getElementById("list");

let newItem = document.createElement("li");
newItem.textContent = "Apple";

list.insertBefore(newItem, list.firstChild);

// <ul id="list">
//   <li>Apple</li>
//   <li>Banana</li>
//   <li>Cherry</li>
// </ul>
removeChild
要素の子要素を削除するためには、removeChildメソッドを使用します。 例えば、以下のようなHTML要素があるとします。 
<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
  <li id="remove">Cherry</li>
</ul>
この要素の特定の子要素をJavaScriptから削除するには、以下のようにします。 
let list = document.getElementById("list");
let removeItem = document.getElementById("remove");

list.removeChild(removeItem);

// <ul id="list">
//   <li>Apple</li>
//   <li>Banana</li>
// </ul>
cloneNode
要素を複製するためには、cloneNodeメソッドを使用します。 cloneNodeメソッドは引数にtrueを指定すると、その要素とその子孫要素全てを複製し、引数にfalseを指定すると、その要素のみを複製します。 例えば、以下のようなHTML要素があるとします。 
<div id="box">
  <p>This is a paragraph.</p>
</div>
この要素をJavaScriptから複製するには、以下のようにします。 
let box = document.getElementById("box");

let cloneBox = box.cloneNode(true);

// <div>
//   <p>This is a paragraph.</p>
// </div>
以上、DOMの基本的な操作方法について説明しました。 これらの基本的な操作を理解し、使いこなすことができれば、JavaScriptを使ってウェブページを動的に操作するための基礎を身につけることができます。 それ では、最後に演習課題を用意しましたので、それを通じて今回学んだ内容を確認してみてください。

演習課題(DOM操作)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: 要素を作成する

div要素を作成し、その内容を"Hello, JavaScript!"と設定し、その要素をコンソールに出力してください。

回答

let div = document.createElement("div");
div.textContent = "Hello, JavaScript!";
console.log(div);

解説

document.createElement()メソッドを使用して新しい要素を作成します。 作成した要素の内容を設定するためには、textContentプロパティを使用します。 最後に、console.log()を使用して作成した要素を出力します。

課題2: 要素に子要素を追加する

“apple”, “banana”, “cherry”という文字列を要素に持つul要素を作成し、その要素をコンソールに出力してください。

回答

let ul = document.createElement("ul");

let apple = document.createElement("li");
apple.textContent = "Apple";
ul.appendChild(apple);

let banana = document.createElement("li");
banana.textContent = "Banana";
ul.appendChild(banana);

let cherry = document.createElement("li");
cherry.textContent = "Cherry";
ul.appendChild(cherry);

console.log(ul);

解説

document.createElement()メソッドを使用して新しいul要素とli要素を作成します。 li要素の内容を設定するためには、textContentプロパティを使用します。 appendChildメソッドを使用してul要素にli要素を追加します。 最後に、console.log()を使用して作成した要素を出力します。

課題3: 要素のスタイルを変更する

以下のHTML要素があります。 
<p id="text">JavaScript is fun!</p>
この要素の文字の色を青に、背景色を黄色に変更し、フォントサイズを24pxに設定してください。

回答

let text = document.getElementById("text");
text.style.color = "blue";
text.style.backgroundColor = "yellow";
text.style.fontSize = "24px";

解説

document.getElementById()メソッドを使用して指定したIDを持つ要素を取得します。 要素のスタイルを変更するためには、styleプロパティを使用します。 styleプロパティの各スタイル属性（color、backgroundColor、fontSizeなど）に対して、新しい値を設定します。

課題4: 要素のイベントリスナーを追加する

以下のHTML要素があります。 
<button id="clickMe">Click Me!</button>
<p id="message"></p>
この要素に対して、ボタンをクリックしたときに"Button clicked!"というメッセージを表示するイベントリスナーを追加してください。

回答

let button = document.getElementById("clickMe");
let message = document.getElementById("message");

button.addEventListener("click", function() {
  message.textContent = "Button clicked!";
});

解説

document.getElementById()メソッドを使用して指定したIDを持つ要素を取得します。 addEventListener()メソッドを使用して要素にイベントリスナーを追加します。 この例では、clickイベントが発生したときに、匿名のコールバック関数が実行され、message要素の内容が"Button clicked!"に変更されます。

課題5: フォームの入力を取得する

以下のHTMLフォームがあります。 
<form id="userForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">Submit</button>
</form>
<p id="result"></p>
このフォームが送信されたときに、入力された名前とメールアドレスを取得し、以下のように表示してください。 
Name: [入力された名前]
Email: [入力されたメールアドレス]

回答

let userForm = document.getElementById("userForm");
let result = document.getElementById("result");

userForm.addEventListener("submit", function(event) {
  event.preventDefault();

  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;

  result.textContent = `Name: ${name}\nEmail: ${email}`;
});

解説

document.getElementById()メソッドを使用して指定したIDを持つフォームと結果表示の要素を取得します。 addEventListener()メソッドを使用してフォームにイベントリスナーを追加します。 この例では、submitイベントが発生したときに、イベントのデフォルト動作をキャンセルしてフォームの送信を防止します（event.preventDefault()）。 そして、フォームの各入力欄の値を取得し、結果表示の要素に内容を設定します。

イベント

イベントドリブンプログラミングの基本

イベントドリブンプログラミングとは、プログラムの制御フローがイベントの発生によって決定されるプログラミングのスタイルです。ここで言うイベントとは、ユーザーのアクション（マウスクリック、キーボード入力など）やブラウザ/システムの状態変化（ページの読み込み完了など）などを指します。特定のイベントが発生したときに、それに応じた処理をプログラムが実行するというスタイルのことを指します。 このスタイルのメリットとして、非同期処理を効果的に扱い、ユーザーの操作に応じた応答性の高いアプリケーションを実現できることが挙げられます。

イベントとは何か

JavaScript におけるイベントとは、プログラムが特定の事象（操作や信号など）の発生を認識して反応するための合図を指します。 一般に、ユーザーの操作（ボタンのクリック、キーボードの入力など）やシステムからの信号（時間経過、ネットワーク通信など）がこれに該当します。

JavaScriptにおけるイベントの種類と取り扱い

JavaScriptではさまざまな種類のイベントを扱うことができます。 ここではその中でも特に基本的で重要な「ユーザーイベント」と「ブラウザ/システムイベント」について見ていきましょう。

ユーザーイベント

ユーザーイベントは、その名の通りユーザーの操作によって発生するイベントです。例えば、クリック（click）、ダブルクリック（dblclick）、キーボードのキーを押す（keydown）、キーを離す（keyup）、マウスを移動する（mousemove）、フォームを送信する（submit）などがあります。 これらのイベントは、ユーザーがページと対話する際に頻繁に使われます。

ブラウザ/システムイベント

一方、ブラウザ/システムイベントは、ブラウザやシステムの状態変化によって発生するイベントです。 具体的には、ページの読み込みが完了した（load）、ウィンドウがリサイズされた（resize）、要素がフォーカスを得た（focus）または失った（blur）などの状況で発生します。

イベントハンドラの役割と使い方

これらのイベントが発生したときにどのような処理を行うかを定義する関数がイベントハンドラです。イベントハンドラは特定のイベントに結びつけられ、そのイベントが発生したときに自動的に実行されます。 例えば、ユーザーがボタンをクリックしたときに特定の処理を行うには、そのボタンのclickイベントにイベントハンドラを結びつけます。具体的には、以下のような形で指定します。 
<button onclick="handleClick()">クリック</button>
上記のHTMLでは、onclickという属性にhandleClick()という関数を指定しています。これにより、このボタンがクリックされるとhandleClick()という関数が自動的に実行されます。 しかし、この方法ではHTMLとJavaScriptのコードが密接に結びついてしまい、一般的には推奨されません。代わりに、HTML要素をJavaScriptから取得し、その要素のaddEventListenerメソッドを使用してイベントハンドラを登録する方法がよく使われます。 以下にその例を示します。 
<button id="myButton">クリック</button>
// HTML要素を取得
const button = document.getElementById('myButton');

// イベントハンドラを定義
function handleClick() {
  console.log('ボタンがクリックされました。');
}

// イベントハンドラを登録
button.addEventListener('click', handleClick);
上記のJavaScriptコードでは、まずdocument.getElementById('myButton')でHTMLのボタン要素を取得しています。次に、ボタンがクリックされたときに実行するhandleClickというイベントハンドラを定義しています。最後に、`button.addEventListener(‘click’, handleClick 正しくは、イベント発生時にブラウザによって自動的に呼び出されるようにするため、関数名だけを指定します。

イベントリスナ: 基本的なJavaScriptの理解の一部

イベントリスナは、JavaScriptの重要な部分であり、ユーザーとのインタラクションを可能にするものです。その基本的な理解と、その使用方法を学ぶことは、ブラウザでのプログラミングにおいては欠かせない知識です。

イベントリスナとは何か

イベントリスナとは、特定のイベントが発生したときに実行するコードを定義する仕組みの一つです。たとえば、ユーザーがボタンをクリックしたときや、キーボードのキーを押したとき、あるいはページが読み込まれたときなど、特定のイベントが起こったときに特定のコードを実行することができます。 JavaScriptでは、addEventListenerメソッドを使って、これらのイベントリスナを設定します。そのため、イベントリスナはあらゆる種類のイベントに対応することが可能であり、JavaScriptにおける非常に強力なツールとなっています。

イベントリスナの設定方法

イベントリスナを設定する方法については、以下のコードを参照してください。 
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

function handleClick() {
  // ボタンがクリックされたときの処理
}
上記のコードは、idが’myButton’の要素（この場合、ボタン）に対して、クリックイベントに対するイベントリスナを追加しています。ユーザーがボタンをクリックすると、handleClick関数が呼び出され、その中に定義されているコードが実行されます。

イベントリスナの削除方法

一方、必要なくなったイベントリスナは、removeEventListenerメソッドを使って削除することができます。以下のコードは、先程設定したイベントリスナを削除する例です。 
button.removeEventListener('click', handleClick);
ここで注意すべきは、イベントリスナを登録する際も削除する際も、関数名の後ろに()をつけてはならないということです。これは、()がついていると、その関数が即座に実行されてしまうからです。

イベントリスナの活用

イベントリスナは、ユーザーインタラクションとウェブページの動的な変化を連携させる重要な道具です。この記事を通じて、イベントリスナの基本的な使用方法と削除方法を理解することができたはずです。この知識は、JavaScriptを使ったブラウザ上でのプログラミングにおいて、極めて重要です。

イベントの伝播

JavaScriptのイベントには「伝播（Propagation）」という重要な概念があります。 これは、ある要素でイベントが発生した場合、そのイベントがその要素の親要素や子要素にも影響を及ぼすというものです。 この伝播にはイベントキャプチャとイベントバブリングという二つのフェーズがありますが、実際の開発ではイベントバブリングがよく使われますので、ここではイベントバブリングについて説明します。

イベントバブリング

一方、イベントバブリングはイベントが発生した要素から親要素に向かってイベントが上昇するフェーズで、通常はこちらが使われます。 これにより、子要素で発生したイベントを親要素で取り扱うことが可能となります。 具体例： 
<div id="outer">
  <div id="inner">
    <button id="myButton">クリック</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('myButton');

outer.addEventListener('click', function(event) {
  console.log('outerがクリックされました');
});

inner.addEventListener('click', function(event) {
  console.log('innerがクリックされました');
});

button.addEventListener('click', function(event) {
  console.log('buttonがクリックされました');
});
上記のコードでは、ボタンがクリックされると、「buttonがクリックされました」「innerがクリックされました」「outerがクリックされました」というログがこの順で出力されます。 なぜなら、ボタンで発生したクリックイベントがバブリングにより、親要素であるinnerとouterへと伝播していくからです。

イベントバブリングの停止

イベントバブリングは、イベントが発生した要素から親要素に向かってイベントが上昇するフェーズですが、イベントバブリングを停止することも可能です。 イベントバブリングを停止するには、stopPropagationメソッドを使います。以下のコードは、先程の例にstopPropagationメソッドを追加したものです。 
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('myButton');

outer.addEventListener('click', function(event) {
  console.log('outerがクリックされました');
});

inner.addEventListener('click', function(event) {
  console.log('innerがクリックされました');
});

button.addEventListener('click', function(event) {
  console.log('buttonがクリックされました');
  event.stopPropagation();
});
このコードでは、ボタンがクリックされると、「buttonがクリックされました」というログのみが出力されます。 これは、stopPropagationメソッドにより、イベントバブリングが停止されたためです。

演習課題(イベント)

これまで学んだ内容を使って、以下の課題に取り組んでみましょう。

課題1: クリックイベントのハンドラを作成する

HTMLのボタン要素に対して、クリックイベントのハンドラを作成してください。ボタンをクリックすると、コンソールに「Hello, World!」と表示されるようにしてください。 以下のHTMLを使用してください。 
<button id="myButton">クリック</button>

回答

// HTML要素を取得
const button = document.getElementById('myButton');

// イベントハンドラを定義
function handleClick() {
  console.log('Hello, World!');
}

// イベントハンドラを登録
button.addEventListener('click', handleClick);

解説

このJavaScriptのコードでは、まずdocument.getElementById('myButton')を使ってHTMLのボタン要素を取得しています。次に、ボタンがクリックされたときに実行されるイベントハンドラhandleClickを定義しています。この関数はconsole.log('Hello, World!')を実行することで、コンソールにメッセージを出力します。最後に、addEventListenerを使ってクリックイベントに対してhandleClick関数を登録しています。

課題2: イベントハンドラの削除

先程作成したイベントハンドラを削除してください。その後、再度ボタンをクリックしてもコンソールに何も表示されないことを確認してください。

回答

// イベントハンドラを削除
button.removeEventListener('click', handleClick);

解説

removeEventListenerを使用して、クリックイベントからhandleClick関数を削除します。これにより、ボタンがクリックされてもhandleClick関数は実行されなくなります。

課題3: ボタンクリック時のメッセージ表示

“click me”という文字列を持つボタンを作成し、そのボタンをクリックした際に、”You clicked me!”というメッセージをコンソールに出力するイベントリスナを設定してください。

回答

const button = document.createElement('button');
button.textContent = "click me";
document.body.appendChild(button);

button.addEventListener('click', function() {
  console.log("You clicked me!");
});

解説

このコードでは、まずcreateElementを用いて新たなボタン要素を作成し、そのボタン要素のテキストコンテンツに”click me”を設定しています。その後、このボタン要素をページのbody要素に追加しています。 次に、addEventListenerを用いて、このボタンがクリックされた際に”you clicked me!”というメッセージをコンソールに出力するイベントリスナを設定しています。

課題4: イベントリスナの削除

さらに、5秒後に上記のイベントリスナを削除するコードを追加してください。

回答

setTimeout(function() {
  button.removeEventListener('click', handleClick);
}, 5000);

解説

このコードでは、setTimeout関数を用いて、5秒後（5000ミリ秒後）に指定した関数を実行するように設定しています。その関数内部で、先程設定したイベントリスナを削除しています。これにより、5秒後にボタンをクリックしても、何も起こらなくなります。

課題5: ボタンクリックでテキストの変更

“Change Text”というテキストが書かれたボタンを作成し、そのボタンをクリックしたときにボタンのテキストを”Clicked!”に変更するようなコードを書いてみましょう。

回答

<button id="myButton">Change Text</button>
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  button.textContent = 'Clicked!';
});

解説

addEventListenerを使用して、ボタンに’click’イベントのリスナを登録します。その後、クリックイベントが発生した時に、ボタンのテキストを”Clicked!”に変更します。テキストの変更は、textContentプロパティを使用して行います。

課題6: ボタンクリックで色の変更

“Change Color”というテキストが書かれたボタンを作成し、そのボタンをクリックしたときにボタンの背景色を赤にするようなコードを書いてみましょう。

回答

<button id="myButton">Change Color</button>
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  button.style.backgroundColor = 'red';
});

解説

ここでもaddEventListenerを使用して、ボタンに’click’イベントのリスナを登録します。クリックイベントが発生した時に、ボタンの背景色を赤に変更します。背景色の変更は、style.backgroundColorプロパティを使用して行います。

課題7: マウスオーバーで文字色の変更

マウスを乗せると文字色が青になるようなコードを書いてみましょう。

回答

<p id="myText">マウスを乗せてみてください。</p>
const text = document.getElementById('myText');

text.addEventListener('mouseover', function(event) {
  text.style.color = 'blue';
});

解説

addEventListenerを使用して、テキストに’mouseover’イベントのリスナを登録します。マウスが要素の上に乗ったとき、つまり’mouseover’イベントが発生したときに、テキストの色を青に変更します。文字色の変更は、style.colorプロパティを使用して行います。

コスパよく JavaScript を学習できる Udemy 講座人気ランキング

ちなみに姉妹サイトの Learning Next では、JavaScript を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。

「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？

▶️ UdemyでJavaScriptを学べる講座の人気ランキング – Learning Next

ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！

関連性の高い記事はこちら:

  1. React vs Vue.js vs AngularJS | 人気の3大フレームワークを徹底比較!
  2. 【2025年】Vue.jsのおすすめプログラミングスクール3選！現役エンジニアが解説
  3. 【2025年最新】Vue.jsのおすすめUdemy講座4選！Nuxt.js / Firebase対応
  4. 【初心者向け】Vue.jsのおすすめ勉強法3選を現役エンジニアが比較・解説！
JavaScript
JavaScript
シェアして応援する
  • URLをコピーしました！
目次