JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

JavaScript

【 2025/06/12 00:00 更新】

JavaScriptはどんな言語？

JavaScriptは、ブラウザで動くスクリプト言語です。

Javaと似た書き方なところもありますが、全く違う言語です。

【 JavaScriptの特徴】

ブラウザで実行される。
スクリプト言語（インタプリタ型）。
DOM要素の操作（作成・変更・削除・表示・非表示など）ができる。
他にもWebページに細かいアニメーションや機能を実装することができる。

スクリプト言語とは

スクリプト言語とは、プログラムコード一行ずつ機械語に変更しながら実行するインタプリタ型の言語のこと。

プログラムコードを機械語にまとめて変更する"コンパイル"を必要としません。

なぜJavaScriptって名前？

JavaScriptの初期に注目を浴びていたJavaに寄せて、JavaScriptと名付けられました。

流行りに乗って"JavaScript"っていう名前にしたんだね！

DOM要素とは

DOM要素とは、HTML上のタグやテキストなどといった要素のことです。

【 DOM要素の種類】

Document：ページ全体のこと。
Element：HTMLタグのこと。
Text：テキスト（文字）のこと。
Comment：コメント（）のこと。

JavaScriptを書く方法

JavaScriptを書く方法は大きく2つあります。

【 JavaScriptを書く方法】

scriptタグを使ってHTMLに直接書く方法
拡張子".js"のファイルを作り、外部ファイルとして読み込ませる方法

拡張子とは

ファイルの種類や形式を示す文字列で、ファイル名の末尾に付きます。
ドット.でファイル名と拡張子の間を区切ります。

JSを書く方法｜scriptタグを使ってHTMLに直接書く

scriptタグを使ってHTMLにJavaScriptを直接書くことができます。

headタグ/bodyタグ内にscriptタグを定義し、その中にJavaScriptを書きます。

【 HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>

        <!-- headタグ内にJSを書けるよ！ -->
        <script type="text/javascript">
            alert("JavaScriptでアラート実行させる！");
        </script>
    </head>
    <body>
        <!-- bodyタグ内にもJSを書けるよ！ -->
        <script type="text/javascript">
            console.log("JavaScriptでコンソールに文字を出力！");
        </script>
    </body>
</html>

ブラウザで実行するとこんな感じです。

【 headタグ内のalert()実行】

【 bodyタグ内のconsole.log()実行（開発者モードで確認）】

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

headタグ/bodyタグ内に記載したときの違い

headタグ・bodyタグそれぞれにJavaScriptを記載したときの違いは以下の通りです。

headタグ内	画面表示（HTMLやCSSの反映など）よりも先に実行される。
bodyタグ内	画面表示（HTMLやCSSの反映など）より後に実行される。

JSを書く方法｜外部ファイルとして読み込ませる

別で用意したJavaScriptファイルをHTMLへ読み込ませることができます。
JavaScriptファイルは、拡張子が.jsのファイルでJavaScript専用のファイルです。

拡張子とは

ファイルの種類や形式を示す文字列で、ファイル名の末尾に付きます。
ドット.でファイル名と拡張子の間を区切ります。

Windowsで拡張子が表示されない場合

こちらを参考に、設定してみてださい。
Windows の一般的なファイル名拡張子

【 HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>

        <!-- 読み込ませるJSファイルを指定するよ！ -->
        <script src="./test.js"></script>
    </head>
    <body>
    </body>
</html>

【 test.js 】


alert("JavaScriptでアラート実行させる！");

ブラウザで実行するとこんな感じです。

注意

scriptタグのsrcへ設定するパスは正しいパスを指定する必要があります。

パスとは

ファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote

JavaScriptの変数定義｜let・var・const

【 JSの変数宣言の書き方】

宣言キーワード変数名;
宣言キーワード変数名 = 入れたいデータ;

【例】
let variable01 = “こんにちは！”;
var variable02 = 123;
const variable03 = true;

JavaScriptの変数は、let・var・constの3種類を使って定義します。

【 JavaScript 】


// 一般的な基本の変数
let variable01 = 100;
console.log(variable01); // 100

// 変数定義は重複OKな変数
var variable02 = "こんにちは！";
console.log(variable02); // こんにちは！

// 定数
const pageTitle = "こじはなNote";
console.log(pageTitle); // こじはなNote

ブラウザで実行するとこんな感じです。（開発者モードで確認）

【 let・var・constの違い】

let	変数宣言の重複はエラー。一般的な基本の変数。 let variable01 = 100; variable01 = 10; // OK let variable01 = 900; // 定義の重複はエラー！
var	変数宣言の重複OK。変数の内容は、最後に定義した内容に上書きされる。 var variable02 = 100; variable02 = 10; // OK var variable02 = 900; // OK
const	定数（固定な値が入った変数）。途中で代入できない。 const pageTitle = 100; pageTitle = 10; // 代入はエラー！ const pageTitle = 900; // 定義の重複はエラー！

変数とは

変数は、データを入れる箱のようなものです。

1や2といった数値から、"こんにちは！"という文字列など色々な種類のデータを入れることができます。

【変数に関わる重要な基礎知識】

データの型	データの種類のこと。様々なデータの型があります。 1,2といった数値ならint型、"apple"・"こんにちは"といった文字列ならstring型となります。
代入	変数に値を入れること。どの言語でも基本的に"(宣言キーワード) 変数名 = 入れたい値;"で代入となります。 (宣言キーワード)については、言語や状況によって異なり、JSではlet/var/constが該当します。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの配列｜arrayオブジェクト

【 JSのarrayの書き方】

〜宣言〜
宣言キーワード配列名 = [データ1, データ2, データ3,...];
〜要素番号を指定〜
配列名["要素番号"];
〜末尾に要素を追加〜
配列名.push(入れたいデータ);

【例】
let array01 = ["apple", "orange", "strawberry"];
array01["0"] = "りんご";
array01.push("banana");

JavaScriptでは、配列を実装できるarrayオブジェクトがあります。

arrayオブジェクトは、変数同様にlet,var,constの3つを使って定義できます。

この章では、先に説明した"変数定義"を理解している前提で進めるよ！

【 JavaScript 】


// arrayオブジェクトの定義
let array01 = ["apple", "orange", "strawberry"];
console.log(array01);           // ["apple", "orange", "strawberry"]

// 要素番号を指定して、要素を取得（要素番号0番）
array01["0"];
console.log(array01["0"]);      // apple

array01["0"] = "りんご";
console.log(array01["0"]);      // りんご

// 配列の要素数
array01.length;
console.log(array01.length);    // 3

// 配列の末尾に要素を追加
array01.push("banana");
console.log(array01);           // ["りんご", "orange", "strawberry", "banana"]

// 配列の最後の要素を取り出す
let pop_fruit = array01.pop();
console.log(array01);           // ["りんご", "orange", "strawberry"]
console.log(pop_fruit);         // banana

// 配列の先頭の要素を取り出す
let shift_fruit = array01.shift();
console.log(array01);           // ["orange", "strawberry"]
console.log(shift_fruit);       // りんご

ブラウザで実行するとこんな感じです。（開発者モードで確認）

配列とは

配列とは、複数のデータを列に並べて入れることができる領域です。

変数は一つだけデータが入りますが、配列には複数のデータを入れることができます。

【配列に関わる重要な基礎知識】

要素	配列の列を構成する一つ一つのデータのこと。基本的に、1つの配列に入った要素のデータ型は全て一緒にする必要があります。
要素番号	配列の要素に紐づく番号のこと。一般的に配列の先頭の要素番号は0番となります。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの連想配列｜オブジェクトを使った方法

【 JSのオブジェクトの書き方】

〜宣言〜
宣言キーワードオブジェクト名 = { キー1:データ1, キー2:データ2, キー3:データ3,... };
〜キーを指定〜
オブジェクト名["キー名"];
〜要素を追加〜
オブジェクト名["新キー名"] = 入れたいデータ;

【例】
let object01 = { name:"apple", JapaneseName:"りんご" };
object01["name"] = "りんご";
object01["price"] = 500;

JavaScriptでは、連想配列を実装できるオブジェクトがあります。

オブジェクトは、変数同様にlet,var,constの3つを使って定義できます。

【 JavaScript 】


// オブジェクトの定義
let fruit01 = { name:"apple",  JapaneseName:"りんご", price:500 };
console.log(fruit01);           // { name:"apple",  JapaneseName:"りんご", price:500 }

// キー名を指定して、要素を取得（キー"name"）＜ブラケット記法＞
fruit01["name"];
console.log(fruit01["name"]);   // apple

fruit01["name"] = "a!p!p!l!e!";
console.log(fruit01["name"]);   // a!p!p!l!e!

// キー名を指定して、要素を取得（キー"name"）＜ドット記法＞
fruit01.name = "a-p-p-l-e";
console.log(fruit01.name);      // a-p-p-l-e

// オブジェクトの要素数
Object.keys(fruit01).length;
console.log(Object.keys(fruit01).length);    // 3

// 要素を追加（キー"color"）＜ブラケット記法＞
fruit01["color"] = "red";
console.log(fruit01);           // { name:"a-p-p-l-e",  JapaneseName:"りんご", price:500, color:"red" }

// 要素を追加（キー"comment"）＜ドット記法＞
fruit01.comment = "おいしい！";
console.log(fruit01);           // { name:"a-p-p-l-e",  JapaneseName:"りんご", price:500, color:"red", comment:"おいしい！" }

// キー名を指定して、要素を削除（キー"color"）
delete fruit01.color;
console.log(fruit01);           // { name:"a-p-p-l-e",  JapaneseName:"りんご", price:500, comment:"おいしい！" }

// オブジェクトを空にする
fruit01 = {};
console.log(fruit01);           // {}

ブラウザで実行するとこんな感じです。（開発者モードで確認）

連想配列とは

連想配列とは、キーと値の組み合わせでデータを管理する配列です。

通常の配列は要素番号とデータが紐づきますが、連想配列の場合はキーとデータが紐づきます。

オブジェクトのキー名は厳密にはプロパティ名

オブジェクトというのは、複数の変数や関数をまとめることができる領域です。

オブジェクトのキー名と言いましたが、厳密にはプロパティ名と呼ぶのが正しいです。

（プロパティ名とは、オブジェクトの中にある変数や関数名のことです。）

オブジェクトの要素1つ1つが変数となっているイメージです！

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの連想配列｜Mapオブジェクトを使った方法

【 JSのMapの書き方】

〜宣言〜
宣言キーワード Map名 = new Map([[キー1,データ1], [キー2,データ2], [キー3,データ3],... ]);
〜キーを指定〜
Map名.get("キー名");
〜要素を追加/更新〜
Map名.set("新キー名", 入れたいデータ);

【例】
let map01 = new Map([["name","apple"], ["Japanese","りんご"] );
map01.get("name");
map01.set("price", 500);

JavaScriptでは、連想配列を実装できるMapオブジェクトがあります。

Mapオブジェクトは、変数同様にlet,var,constの3つを使って定義できます。

【 JavaScript 】


// Mapオブジェクトの定義
let mapFruit01 = new Map([["name","apple"], ["JapaneseName","りんご"], ["price",500]] );
console.log(mapFruit01);               // { 'name'=>'apple',  'JapaneseName'=>'りんご', 'price'=>500 }

// キー名を指定して、要素を取得（キー"name"）
mapFruit01.get("name");
console.log(mapFruit01.get("name"));   // apple

// キー名を指定して、要素の中身を変更（キー"name"）
mapFruit01.set("name", "a!p!p!l!e!");
console.log(mapFruit01.get("name"));   // a!p!p!l!e!

// オブジェクトの要素数
mapFruit01.size;
console.log(mapFruit01.size);           // 3

// 要素を追加（キー"color"）
mapFruit01.set("color", "red");
console.log(mapFruit01);                // { 'name'=>'a!p!p!l!e!',  'JapaneseName'=>'りんご', 'price'=>500, 'color'=>'red' }

// キー名を指定して、要素を削除（キー"color"）
mapFruit01.delete("color");
console.log(mapFruit01);                // { 'name'=>'a!p!p!l!e!',  'JapaneseName'=>'りんご', 'price'=>500 }

// Mapオブジェクトを空にする
mapFruit01.clear();
console.log(mapFruit01);                // {}

ブラウザで実行するとこんな感じです。（開発者モードで確認）

連想配列とは

連想配列とは、キーと値の組み合わせでデータを管理する配列です。

通常の配列は要素番号とデータが紐づきますが、連想配列の場合はキーとデータが紐づきます。

【 Mapオブジェクト・オブジェクトの違い】

Mapオブジェクト	要素数は"Mapオブジェクト名.size"で取得できる。キーはどんなデータ型でもOK。
オブジェクト	要素数は"Object.keys(オブジェクト名).length"で取得できる。キーは文字列でしか指定できない。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの条件分岐｜if文（もし〇〇のとき実行）

【 JSのif文の書き方】

〜多分岐なし〜
if (条件A) {
　　　　処理A // 条件Aが真(true)だったら実行！
}
〜多分岐〜
if (条件A) {
　　　　処理A // 条件Aが真(true)だったら実行！
} else if (条件B) {
　　　　処理B // 条件Aが偽(false)で、条件Bが真(true)だったら実行！
} else {
　　　　処理C // 条件A・条件Bどちらも偽(false)だったら実行！
}

if文は、「もし〇〇のときに実行する」という意味を表します。
プログラミングにおいて基本な条件分岐の命令文です。

条件分岐とは

条件分岐とは、条件に応じて実行するコードが分かれることを言います。

【 JavaScript 】


// 色んな値に変更して、実行してみてね！
let fruit = "apple";

if(fruit == "apple") {
    console.log("変数fruitの中身はりんごだった！");
}

// 色んな値に変更して、実行してみてね！
let age = 25;

if(age > 100) {
    console.log("100歳超えてるんだね！すごいね！");
} else if(age > 20) {
    console.log("20歳超えたんだね！まだまだ若いね！");
} else {
    console.log("20歳以下なんだ！すご〜く若いね！！");
}

ブラウザで実行するとこんな感じです。（開発者モードで確認）

【 if・else if・elseの違い】

if(条件A) {}：「もし条件Aだったら」
else if(条件B){}：「上の条件以外で、条件Bだったら」
else {}：「上の条件以外だったら」

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

条件式の基本

条件式は、比較したい値、比較演算子、必要があれば論理演算子で構成されます。

基本的な比較演算子

比較演算子は、2つの値を比較するための演算子です。

==	等号を表す。 "A == B"：「AはBと等しい」という意味。
!=	否定を表す。 "A != B"：「AはBと等しくない」という意味。
>	大なりを表す。 "A > B"：「AはBより大きい」という意味。
>=	以上を表す。 "A >= B"：「AはB以上」という意味。
<	小なりを表す。 "A < B"：「AはBより小さい」という意味。
<=	以下を表す。 "A <= B"：「AはB以下」という意味。
===	データの型も含めた等号。 "A === B"：「AはBと、データの型・値ともに等しい」という意味。（!==：「AはBと、データの型・値ともに等しくない」）

論理演算子

論理演算子は、複数の条件を組み合わせるための演算子です。

比較演算子を使った条件に対して、組み合わせたり、否定させたり、複雑な式を定義できます。

&&	かつを表し、優先度は"中"。条件A && 条件B：「条件A かつ、条件B」を意味する。
\|\|	またはを表し、優先度は"低"。条件A \|\| 条件B：「条件A または、条件B」を意味する。
!	否定を表し、優先度は"高"。 !( 条件A )：「条件Aではない」を意味する。

かつを表し、優先度は"中"。

条件A && 条件B：「条件A かつ、条件B」を意味する。

またはを表し、優先度は"低"。

条件A || 条件B：「条件A または、条件B」を意味する。

否定を表し、優先度は"高"。

!( 条件A )：「条件Aではない」を意味する。

算数と同様に、"()"を使って条件の優先度を調整できます。

条件式	順番
条件A \|\| !( 条件B ) && 条件C	1, "!( 条件B )" 2, "!( 条件B ) && 条件C" 3, "条件A \|\| !( 条件B ) && 条件C"
( 条件A \|\| !( 条件B ) ) && 条件C	1, "!( 条件B )" 2, "( 条件A \|\| !( 条件B ) )" 3, "( 条件A \|\| !( 条件B ) ) && 条件C"

JavaScriptの条件分岐｜switch文（値が〇〇だったら実行）

【 JSのswitch文の書き方】

switch(比較値) {
　　　　case 値A:
　　　　　　　　処理A // 比較値が値Aと一致したら実行！
　　　　　　　　break; // switch{}を抜ける！
　　　　case 値B:
　　　　　　　　処理B // 比較値が値Bと一致したら実行！
　　　　　　　　break; // switch{}を抜ける！
　　　　default:
　　　　　　　　処理C // 比較値がどれとも一致しなかったら実行！
　　　　　　　　break; // switch{}を抜ける！
}

switch文は、ある値に基づいて、複数の条件分岐を定義できます。

if文ではある条件に基づいた分岐でしたが、switch文は値によって分岐させます。

条件分岐とは

条件分岐とは、条件に応じて実行するコードが分かれることを言います。

【 JavaScript 】


// 色んな値に変更して、実行してみてね！
let fruit = "apple";

switch(fruit) {
    case "apple":
        console.log("変数fruitの中身は'りんご'だった！");
        break;
    case "orange":
        console.log("変数fruitの中身は'みかん'だった！");
        break;
    case "strawberry":
        console.log("変数fruitの中身は'いちご'だった！");
        break;
    case "banana":
        console.log("変数fruitの中身は'ばなな'だった！");
        break;
    default:
        console.log("変数fruitの中身は謎！");
        break;
}

ブラウザで実行するとこんな感じです。（開発者モードで確認）

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの繰り返し｜while文（〇〇の間に繰り返す）

【 JSのwhile文の書き方】

while(条件A) {
　　　　処理A // 条件Aが真(true)の間、繰り返す処理
}

while文は、プログラミングにおいて基本的な繰り返し命令文の１つです。
「〇〇の間に繰り返す」という意味を表します。

while文は、自由な条件を指定できるのが特徴です。

繰り返し命令とは

繰り返し命令とは、特定の処理を繰り返し実行するための命令を言います。

プログラミングではwhile・for文などによって、指定条件の間に処理を繰り返し実行させることができます。

無限ループに注意

繰り返し命令は、コードによっては永遠に繰り返しし続ける"無限ループ"となる場合があります。

無限ループになるとコンピューターは常に処理し続けることとなり、大きな負荷がかかります。

【 JavaScript 】


let i = 0; // 繰り返しのカウンター

console.log("繰り返し開始");

while (i < 10) { // 条件: 変数"i"が10より小さい間、繰り返す

    console.log("変数'i'の中身:", i);
    i++; // インクリメント（1加算）

}

console.log("繰り返し終了");

ブラウザで実行するとこんな感じです。（開発者モードで確認）

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの繰り返し｜for文（△△が〇〇の間に繰り返す）

【 JSのfor文の書き方】

for(変数A = 初期値; 変数Aの範囲指定する条件; 変数Aの増減) {
　　　　処理A // 条件Aが真(true)の間、繰り返す処理
} // 処理Aが実行終了の度に、変数Aが増減する

【例】
let array01 = ["apple", "orange", "banana"];
for(let i = 0; i < array01.length; i++) {
　　　　console.log(array01[i])
}

for文は、プログラミングにおいて基本的な繰り返し命令文の１つです。
「△△が〇〇の間に繰り返す」という意味を表します。

for文では、ただの条件ではなく回数や範囲を指定します。

繰り返し命令とは

繰り返し命令とは、特定の処理を繰り返し実行するための命令を言います。

プログラミングではwhile・for文などによって、指定条件の間に処理を繰り返し実行させることができます。

無限ループに注意

繰り返し命令は、コードによっては永遠に繰り返しし続ける"無限ループ"となる場合があります。

無限ループになるとコンピューターは常に処理し続けることとなり、大きな負荷がかかります。

【 JavaScript 】


console.log("繰り返し開始");

for (let i = 0; i < 10; i++) { // 条件: 変数"i"が10より小さい間、繰り返す

    console.log("変数'i'の中身:", i);

}

console.log("繰り返し終了");

ブラウザで実行するとこんな感じです。（開発者モードで確認）

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの繰り返し｜forEachメソッド（配列の繰り返しに特化）

【 JSのforEachの使い方】

配列A.forEach(function(要素の値を入れる変数, 要素番号/キーを入れる変数)) {
　　　　処理A // 配列Aの要素の数分、実行される！
}

【例】
let array01 = ["apple", "orange", "banana"];
array01.forEach(function(value, key) {
　　　　console.log("キー：" + key + ", 値：" + value)
});

forEachメソッドは、配列用の繰り返しに特化した機能です。
配列の要素数分、処理を繰り返して実行できます。

forEachメソッドは、arrayオブジェクト・Mapオブジェクトと一緒に使えます。
オブジェクトについては少し書き方を変える必要があります。

【 arrayオブジェクト・Mapオブジェクトを使う書き方】

【 JavaScript 】


// arrayオブジェクトの定義
let array01 = ["apple", "orange", "strawberry"];
console.log(array01);           // ["apple", "orange", "strawberry"]

console.log("繰り返し開始");

array01.forEach(function(value, key) { // 引数"value"：配列要素の中身・引数"key"：要素番号

    console.log(key + "番目の中身：", value);

});

console.log("繰り返し終了");

ブラウザで実行するとこんな感じです。（開発者モードで確認）

forEachは途中で抜けられない

forEachメソッドは、繰り返しを途中で抜ける"return"/"break"などの命令は使えません。

繰り返しの途中で抜けたい場合は、forやwhileなど通常の繰り返し命令を使う必要があります。

【オブジェクトを使う書き方】

【 JavaScript 】


// オブジェクトの定義
let object01 = { name:"apple",  JapaneseName:"りんご", price:500 };
console.log(object01);           // { name:"apple",  JapaneseName:"りんご", price:500 }

console.log("繰り返し開始");

Object.entries(object01).forEach(function([key, value]) { // 引数"value"：配列要素の中身・引数"key"：要素番号

    console.log(key + "の中身：", value);

});

console.log("繰り返し終了");

ブラウザで実行するとこんな感じです。（開発者モードで確認）

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

JavaScriptの関数定義｜function

【 JSのfunctionの書き方】

function 関数名(引数1, 引数2, ...) {
　　　　処理 // 関数が呼び出された場合に実行される！
　　　　return 戻り値; // 関数を終了させ、呼び出し元に"戻り値"が返される。
}

【例】
let result = selfIntroduction("こじはな", 25);
function selfIntroduction( name, age ) {
　　　　console.log("名前：" + name + ", 年齢：" + age);
　　　　return "終わった！";
}

JavaScriptで関数を定義するときに"function"を使います。

関数とは

関数とは、一連の処理に名前を付けて定義し、必要なときに呼び出すことができる仕組みのことです。

変数/配列にはデータが入りますが、関数には一連の処理がまとまります。

【 JavaScript 】


// 色んな値に変更して、実行してみてね！
let name = "こじはな";
let age = 24;

// 関数呼び出し
let result = selfIntroduction(name, age);

console.log(result); // 終わった！

// 名前を出力する関数
function selfIntroduction( outPutName, outPutAge ) {

    console.log("こんにちは！私の名前は" + outPutName + "です！");
    console.log(outPutAge + "歳です！");

    // 処理を終了し、文字列"終わった！"を呼び出し元に返す
    return "終わった！";
}

ブラウザで実行するとこんな感じです。（開発者モードで確認）

タグを作る｜document.createElement("タグ名")

【 .createElement()の書き方】

document.createElement("タグ名");

【例】
// h1タグ作成
let h1El = document.createElement("h1");
// HTMLのbodyに追加
document.body.appendChild(h1El);

JavaScriptでタグを作る場合、document.createElement("タグ名")と書きます。

タグを作り、HTMLへ追加することで画面に反映されます。
（追加する場合は"追加先Elementオブジェクト.appendChild(追加するElementオブジェクト)"と書く。）

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
    </body>
</html>

【 JavaScript 】


// h1タグを作成
let h1 = document.createElement("h1");

// テキスト追加
h1.textContent = "JavaScriptで作ったh1タグ！";

// HTMLのbodyに追加
document.body.appendChild(h1);

ブラウザで実行するとこんな感じです。

作成したDOM要素をHTMLに追加｜追加先Elementオブジェクト.appendChild(追加するElementオブジェクト)

【 .appendChild()の使い方】

〜 bodyタグに追加する場合〜
document.body.appendChild(追加するElementオブジェクト);
〜指定のDOM要素内に追加する場合〜
追加先Elementオブジェクト.appendChild(追加するElementオブジェクト);

【例】
// bodyタグに追加する場合
let h1 = document.createElement("h1");
document.body.appendChild(h1);

// 指定のDOM要素内に追加する場合
let h2 = document.createElement("h2");
let parentEl = document.getElementById("test-div");
parentEl.appendChild(h2);

"追加先Elementオブジェクト.appendChild(追加するElementオブジェクト)"と書くと、作成したDOM要素をHTMLに追加できます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <div id="test-div" style="background-color:beige;">
            divタグのid="test-div"
        </div>
    </body>
</html>

【 JavaScript 】


// h1タグを作成
let h1 = document.createElement("h1");
// h2タグを作成
let h2 = document.createElement("h2");

// テキスト追加
h1.textContent = "JavaScriptで作ったh1タグ！";
h2.textContent = "JavaScriptで作ったh2タグ！";

// 【追加1】HTMLのbodyに追加
document.body.appendChild(h1);

// 【追加2】取得してきたDOM要素の中に追加
let parent = document.getElementById("test-div");
parent.appendChild(h2);

ブラウザで実行するとこんな感じです。

DOM要素を取得｜document.getElementById("id名")

【 .getElementById()の使い方】

document.getElementById("id名");

【例】
// idが"test-h1"のDOM要素を取得
let test_h1_El = document.getElementById("test-h1");
// テキスト変更
test_h1_El.textContent = "JavaScriptで文字を変えました！";

document.getElementById("id名")は、HTMLタグのidを指定して取得する書き方です。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1 id="test-h1">まだJavaScript実行してないよ！</h1>
    </body>
</html>

【 JavaScript 】


// idが"test-h1"のDOM要素を取得
let h1 = document.getElementById("test-h1");

// テキスト変更
h1.textContent = "JavaScriptで文字を変えました！";

// .appendChild()を使わなくても、もう反映されてるよ！

ブラウザで実行するとこんな感じです。

DOM要素を取得｜document.getElementsByClassName("class名")

【 .getElementsByClassName()の使い方】

document.getElementsByClassName("class名");

【例】
// classが"test-h1"のDOM要素を取得
let h1_Els = document.getElementsByClassName("test-h1");

// 繰り返し文で1つ1つ処理
for (let i = 0; i < h1_Els.length; i++) {
　　　　// テキスト変更
　　　　h1_Els[i].textContent = "JavaScriptで文字を変更！";
}

document.getElementsByClassName("class名")は、取得したいHTMLタグのclassを指定して取得する書き方です。

getElementById("id名")は1つのDOM要素を取得する方法でしたが、こちらは複数のDOM要素をまとめて取得できます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1 class="test-h1">まだJavaScript実行してないよ！</h1>
        <h1 class="test-h1">まだJavaScript実行してないよ！</h1>
        <h1 class="test-h1">まだJavaScript実行してないよ！</h1>
    </body>
</html>

【 JavaScript 】


// classが"test-h1"のDOM要素を取得（配列で取得される）
let h1_tags = document.getElementsByClassName("test-h1");

for (let i = 0; i < h1_tags.length; i++) {
    // テキスト変更
    h1_tags[i].textContent = i + "番目！JavaScriptで文字を変更！";
}

// .appendChild()を使わなくても、もう反映されてるよ！

ブラウザで実行するとこんな感じです。

HTMLCollectionの配列で取得される

document.getElementsByClassName("class名")で取得したデータは、
HTMLCollectionという種類の配列で取得されます。

HTMLCollectionに入ったElementオブジェクトを変更するためには、
for文やwhile文を使う必要があります。

DOM要素内のテキストを取得/変更｜Elementオブジェクト.textContent

【 .textContentの使い方】

Elementオブジェクト.textContent;

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.textContent = "JSで文字を変更！";

"Elementオブジェクト.textContent"と書くと、DOM要素内のテキストを取得・変更ができます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1 id="test-h1">変更前のテキスト！</h1>
    </body>
</html>

【 JavaScript 】


// idが"test-h1"のDOM要素を取得
let h1 = document.getElementById("test-h1");

// 現在のDOM要素内のテキスト取得
let oldText = h1.textContent;
console.log(oldText); // 変更前のテキスト！

// DOM要素内のテキスト変更
h1.textContent = "変更したよ！";

ブラウザで実行するとこんな感じです。

【開発者モードのコンソール】

【 Web画面】

HTMLタグは無効

"Elementオブジェクト.textContent"はテキスト設定用です。

HTMLタグを含めた文字列を設定しても、タグとして反応せず、通常の文字として表示されます。

"Elementオブジェクト.innerHTML"を使うと、タグがHTMLとして反映されます。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

DOM要素内のHTMLを取得/追加｜Elementオブジェクト.innerHTML

【 .innerHTMLの使い方】

Elementオブジェクト.innerHTML;

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.innerHTML = "<h1>h1タグ</h1>";

"Elementオブジェクト.innerHTML"と書くと、DOM要素内のHTMLコードを取得・変更ができます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <div id="test-div">
            <h1>変更前のh1！</h1>
        </div>
    </body>
</html>

【 JavaScript 】


// idが"test-div"のDOM要素を取得
let div = document.getElementById("test-div");

// 現在のDOM要素内のHTML取得
let oldHtml = div.innerHTML;
console.log(oldHtml); // <h1>変更前のh1！</h1>

// DOM要素内のHTML変更
div.innerHTML = "<h1>変更後のh1！</h1><h2>h2追加！</h2>";

ブラウザで実行するとこんな感じです。

【 Web画面・開発者モードのコンソール】

サイバー攻撃"XSS"のリスクあり

XSS（クロスサイトスクリプティング）とは、悪意あるスクリプト（JavaScriptなど）がHTMLに埋め込まれ、実行されてしまう攻撃です。

特に、ユーザー入力や外部からのデータを"innerHTML"に使うと、XSSの入口になります。

"Elementオブジェクト.textContent"を使うと、ただの文字列として扱われるので安全です。

開発者モードとは

ブラウザの「開発者モード」とは、Webサイトの開発や検証のために用意されている機能です。

JavaScriptの"console.log()"に指定した文字は、開発者モードの"コンソール"で確認できます。

※イメージ画像は、Chromeの開発者モードです。

【開発者モードの開き方】

Windows/Linux："F12"キーを押す。
mac："command"+"option"+"i"を押す。

DOM要素に属性を追加｜Elementオブジェクト.setAttribute("属性", "セットしたい値")

【 .setAttributeの使い方】

Elementオブジェクト.setAttribute("属性", "セットしたい値");

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.setAttribute("class", "text-red");

"Elementオブジェクト.setAttribute("属性", "セットしたい値")"と書くと、DOM要素に属性を追加できます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
        <style>
            .text-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1 id="test-h1">文字色が赤になる！</h1>
    </body>
</html>

【 JavaScript 】


// idが"test-h1"のDOM要素を取得
let h1 = document.getElementById("test-h1");

// class属性に値"text-red"をセット
h1.setAttribute("class", "text-red");

ブラウザで実行するとこんな感じです。

属性とは

DOM要素の内容や動作を調整するために追加する値のこと。
HTMLの開始タグ内に配置され、「名前=値」の形式で書きます。

DOM要素を削除｜Elementオブジェクト.remove()

【 .remove()の使い方】

Elementオブジェクト.remove();

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.remove();

"Elementオブジェクト.remove()"と書くと、DOM要素を削除できます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1 id="test-h1">消える！</h1>
        <h1>残る！</h1>
    </body>
</html>

【 JavaScript 】


// idが"test-h1"のDOM要素を取得
let h1 = document.getElementById("test-h1");

// idが"test-h1"のDOM要素を削除
h1.remove();

ブラウザで実行するとこんな感じです。

まとめ

JavaScriptは、ブラウザで動くスクリプト言語で、DOM要素の操作（作成・変更・削除・表示・非表示など）ができる。
JavaScriptを書く方法はscriptタグを使ってHTMLに直接書く・外部ファイルとして読み込ませる方法がある。
JavaScriptの変数は、let・var・constの3種類を使って定義する。
arrayオブジェクトは、配列を実装できる。
オブジェクトは、連想配列を実装できる。
Mapオブジェクトは、連想配列を実装できる。
Mapオブジェクト・オブジェクトの大きな違いは、要素数の取得方法とキーの指定方法。
if文は、「もし〇〇のときに実行する」という意味を表し、条件分岐を定義できる。
switch文は、ある値に基づいて、複数の条件分岐を定義できる。
while文は、「〇〇の間に繰り返す」という意味を表し、繰り返し命令を定義できる。
for文は、「△△が〇〇の間に繰り返す」という意味を表し、繰り返し命令を定義できる。
forEachメソッドは、配列用の繰り返しに特化した機能。配列の要素数分、処理を繰り返して実行できる。
JavaScriptで関数を定義するときに"function"を使う。関数を定義し、必要なときに呼び出すことができる。
JavaScriptでタグを作る場合、document.createElement("タグ名")と書く。
作成したDOM要素をHTMLに追加する場合、"追加先Elementオブジェクト.appendChild(追加するElementオブジェクト)"と書く。
HTMLタグのidを指定して取得する場合、document.getElementById("id名")と書く。
HTMLタグのclassを指定して取得する場合、document.getElementsByClassName("class名")と書く。
DOM要素内のテキストを取得・変更する場合、"Elementオブジェクト.textContent"と書く。
DOM要素内のHTMLコードを取得・変更する場合、"Elementオブジェクト.innerHTML"と書く。
DOM要素に属性を追加する場合、"Elementオブジェクト.setAttribute("属性", "セットしたい値")"と書く。
DOM要素を削除する場合、"Elementオブジェクト.remove()"と書く。

JavaScript

【 2025/06/12 00:00 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！

条件式	順番
条件A \|\| !( 条件B ) && 条件C	1, "!( 条件B )" 2, "!( 条件B ) && 条件C" 3, "条件A \|\| !( 条件B ) && 条件C"
( 条件A \|\| !( 条件B ) ) && 条件C	1, "!( 条件B )" 2, "( 条件A \|\| !( 条件B ) )" 3, "( 条件A \|\| !( 条件B ) ) && 条件C"