【JavaScript】初心者必見！JavaScriptの基本的な機能を徹底解説！

2024年2月29日

JavaScriptの基本的な機能

JavaScriptはウェブページに動的な要素を追加するためのスクリプト言語で、HTMLとCSSとともにウェブ開発の三大要素として挙げられます。
初心者でも理解しやすいように、JavaScriptの基本的な機能を15項目にわけて解説します。

サルモリ

よーし、JavaScriptの基本的な機能を学ぼう！

1. 変数

JavaScriptではデータを格納するために、var、let、constの3種類のキーワードを使って変数を宣言します。
それぞれには微妙に異なる挙動と使いどころがあります。

ソースコード例

var a = 10;
let b = 20;
const c = 30;
console.log(a, b, c);  // 10 20 30

var a = 10;

let b = 20;

const c = 30;

console.log(a, b, c); // 10 20 30

 出力結果
10 20 30

サルモリ

変数、大切だね！これでデータを保存できるよ！

varはfunction scopeを持ち、letとconstはblock scopeを持ちます。
また、constは一度定義したら値の変更ができません。

サルモリ

var、let、constの違いは初心者にとっては混乱を招きがちだけど、慣れてくるとそれぞれの特性を活かして使えるようになるよ。

2. データ型

JavaScriptにはいくつかの基本的なデータ型があります。
それらは数値(Number)、文字列(String)、ブーリアン(Boolean)、null、undefined、オブジェクト(Object)の6つです。

データ型一覧

データ型	説明
Number	数値を扱うための型
String	文字列を扱うための型
Boolean	真偽値（true/false）を扱うための型
null	値が存在しないことを示す型
undefined	値が未定義であることを示す型
Object	複数の値をまとめて扱うための型

サルモリ

データ型を知ることで、より効果的にコードを書くことができるようになるんだよ！

2.1 数値（Number）

JavaScriptでは、整数や浮動小数点数など、全ての数値をNumber型として扱います。
具体的な例を見てみましょう。

ソースコード例

let num1 = 123; // 整数
let num2 = 12.3; // 浮動小数点数

console.log(num1);
console.log(num2);

let num1 = 123; // 整数

let num2 = 12.3; // 浮動小数点数

console.log(num1);

console.log(num2);

 出力結果
123 12.3

サルモリ

このように、JavaScriptでは整数も浮動小数点数も同じNumber型で扱うんだよ！

2.2 文字列（String）

文字列はテキストデータを扱うための型で、シングルクオート(')またはダブルクオート(")で囲むことで作成できます。
さらに、バッククオート(`)を使って文字列を作成すると、変数を直接埋め込むことができます。
これをテンプレートリテラルと呼びます。

ソースコード例

let str1 = 'Hello'; // シングルクオートで囲む
let str2 = "World"; // ダブルクオートで囲む
let str3 = `Hello, ${str2}!`; // テンプレートリテラル

console.log(str1);
console.log(str2);
console.log(str3);

let str1 = 'Hello'; // シングルクオートで囲む

let str2 = "World"; // ダブルクオートで囲む

let str3 = `Hello, ${str2}!`; // テンプレートリテラル

console.log(str1);

console.log(str2);

console.log(str3);

 出力結果
Hello World Hello, World!

サルモリ

テンプレートリテラルを使うと、文字列の中に変数を直接埋め込むことができるんだよ！

2.3 ブーリアン（Boolean）

ブーリアンは真偽値を表現するための型で、trueまたはfalseの2つの値しか持ちません。
以下に例を示します。

ソースコード例

let bool1 = true;
let bool2 = false;

console.log(bool1);
console.log(bool2);

let bool1 = true;

let bool2 = false;

console.log(bool1);

console.log(bool2);

 出力結果
true false

サルモリ

真偽値は、条件分岐などでよく使われるんだよ！

2.4 nullとundefined

nullとundefinedは特殊な値で、変数が何も値を持っていないことを示すために使います。
ただし、nullは変数が意図的に値を持たないことを示し、undefinedは変数がまだ値を持っていないことを示します。

ソースコード例

let val1 = null;
let val2;

console.log(val1); // null
console.log(val2); // undefined

let val1 = null;

let val2;

console.log(val1); // null

console.log(val2); // undefined

 出力結果
null undefined

サルモリ

nullとundefinedは、変数の値が存在しないことを示すのに使うんだよ！

2.5 オブジェクト（Object）

JavaScriptのオブジェクトは、複数の値をまとめて扱うためのデータ型です。
オブジェクトは、キー（プロパティ名）と値のペアで構成されています。
以下に例を示します。

ソースコード例

let obj = {
  name: 'John',
  age: 20
};

console.log(obj.name); // 'John'
console.log(obj.age); // 20

let obj = {

age: 20

};

console.log(obj.name); // 'John'

console.log(obj.age); // 20

 出力結果
John 20

サルモリ

オブジェクトは、複数の値をまとめて扱うのに便利なデータ型なんだよ！

: オブジェクトについてはコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！

はじめに JavaScriptにおける連想配列について知りたいですか？それなら、あなたは正しい場所に来ました。この記事では、JavaScriptの連想配列の基本から、より高度なテクニックまで、一緒に ...

続きを見る

2.6 配列（Array）

配列も複数の値をまとめて扱うためのデータ型ですが、配列はインデックス（番号）によって値を管理します。
以下に例を示します。

ソースコード例

let arr = ['apple', 'banana', 'cherry'];

console.log(arr[0]); // 'apple'
console.log(arr[1]); // 'banana'
console.log(arr[2]); // 'cherry'

let arr = ['apple', 'banana', 'cherry'];

console.log(arr[0]); // 'apple'

console.log(arr[1]); // 'banana'

console.log(arr[2]); // 'cherry'

 出力結果
apple banana cherry

サルモリ

配列は、インデックスを使って値を管理するよ。リストのようなものだね！

: 配列についてはコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

はじめに JavaScriptは、ウェブ開発において不可欠な言語です。特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。この記事では、JavaScrip ...

続きを見る

3. 演算子

JavaScriptでは、数値計算や文字列の結合、条件判断などを行うために様々な演算子が用意されています。
ここでは、よく使われる基本的な演算子について説明します。

3.1 算術演算子

算術演算子は、数値の計算を行うための演算子です。加算(+), 減算(-), 乗算(*), 除算(/), 余り(%)などがあります。

ソースコード例

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1

let a = 10;

let b = 3;

console.log(a + b); // 13

console.log(a - b); // 7

console.log(a * b); // 30

console.log(a / b); // 3.3333333333333335

console.log(a % b); // 1

 出力結果
13 7 30 3.3333333333333335 1

サルモリ

算術演算子は、数値の計算に使うんだよ！

3.2 文字列結合演算子

JavaScriptでは、「+」演算子を使って文字列を結合することができます。
以下に例を示します。

ソースコード例

let str1 = "Hello, ";
let str2 = "World!";

console.log(str1 + str2); // 'Hello, World!'

let str1 = "Hello, ";

let str2 = "World!";

console.log(str1 + str2); // 'Hello, World!'

 出力結果
Hello, World!

サルモリ

「+」演算子は数値だけじゃなくて、文字列を結合するのにも使えるんだよ！

3.3 比較演算子

比較演算子は、2つの値を比較し、その結果を真偽値（true/false）で返す演算子です。
等しい(==), 等しくない(!=), 大なり(>), 小なり(<), 大なりイコール(>=), 小なりイコール(<=) などがあります。

ソースコード例

let a = 10;
let b = 20;

console.log(a == b); // false
console.log(a != b); // true
console.log(a > b);  // false
console.log(a < b);  // true
console.log(a >= b); // false
console.log(a <= b); // true

let a = 10;

let b = 20;

console.log(a == b); // false

console.log(a != b); // true

console.log(a > b); // false

console.log(a < b); // true

console.log(a >= b); // false

console.log(a <= b); // true

 出力結果
false true false true false true

サルモリ

比較演算子は、2つの値を比較して、その結果を真偽値で返すよ！

3.4 論理演算子

論理演算子は、真偽値（true/false）を操作するための演算子です。
AND (&&), OR (||), NOT (!) などがあります。

ソースコード例

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a);     // false

let a = true;

let b = false;

console.log(a && b); // false

console.log(a || b); // true

console.log(!a); // false

 出力結果
false true false

サルモリ

論理演算子は、真偽値を操作するためのものなんだよ！

3.5 条件（三項）演算子

条件（三項）演算子は、「条件 ? 値1 : 値2」の形で使われ、条件がtrueの場合は値1を、falseの場合は値2を返します。
以下に例を示します。

ソースコード例

let a = 10;

console.log(a > 5 ? '大きい' : '小さい'); // '大きい'

let a = 10;

console.log(a > 5 ? '大きい' : '小さい'); // '大きい'

 出力結果
大きい

サルモリ

三項演算子は、条件がtrueの場合は値1を、falseの場合は値2を返すよ！

4. 制御構文

4.1 if文

JavaScriptにおいて、特定の条件が満たされた時だけ特定の処理を行いたい場合、if文を使用します。
基本的な書き方は以下の通りです。

ソースコード例

let a = 10;

if (a > 5) {
  console.log('大きい'); // '大きい'
} else {
  console.log('小さい');
}

let a = 10;

if (a > 5) {

console.log('大きい'); // '大きい'

} else {

console.log('小さい');

}

 出力結果
大きい

サルモリ

if文を使うと、特定の条件が満たされた時だけ特定の処理を行うことができるよ！

: さらに詳しく知りたい方はコチラ【JavaScript】if文について徹底解説！！if文とswitch文の使い方を学ぼう！！

【完全ガイド】Javaスクリプトのif文をマスターしよう！はじめに「if」と一言で言っても、プログラミングにおける"もしも"は非常に強力です。 JavaScriptのif文について学ぶことで、プロ ...

続きを見る

4.2 for文

for文は、特定の処理を繰り返すための制御構文です。
以下に、0から9までを出力する例を示します。

ソースコード例

for (let i = 0; i < 10; i++) {
  console.log(i); // 0から9までを出力
}

for (let i = 0; i < 10; i++) {

console.log(i); // 0から9までを出力

}

 出力結果
0 1 2 3 4 5 6 7 8 9

サルモリ

for文は、同じ処理を繰り返し行いたい時に使うんだよ！

4.3 while文

while文も繰り返し処理を行う制御構文の一つです。
指定した条件が満たされている間、特定の処理を繰り返します。

ソースコード例

let i = 0;

while (i < 10) {
  console.log(i); // 0から9までを出力
  i++;
}

let i = 0;

while (i < 10) {

console.log(i); // 0から9までを出力

i++;

}

 出力結果
0 1 2 3 4 5 6 7 8 9

サルモリ

while文を使うと、指定した条件が満たされている間だけ、特定の処理を繰り返すことができるんだよ！

こちらもCHECK

: 【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

JavaScriptの制御構文について理解しよう！ JavaScriptには、プログラムの流れを制御するための構文がいくつかあります。これらは非常に重要な概念で、コードを書く上で欠かすことはできません ...

続きを見る

5. 関数

関数は、特定の処理をまとめて名前を付け、それを呼び出すことで処理を実行する機能です。
以下に、2つの数値を足す関数を作る例を示します。

ソースコード例

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

console.log(add(1, 2)); // 3

function add(a, b) {

return a + b;

}

console.log(add(1, 2)); // 3

 出力結果
3

サルモリ

関数を使うと、複数の処理をまとめて一つの名前にできるから、コードがすっきりするね！

5.1 無名関数

JavaScriptでは、名前を持たない関数も作成できます。
これを無名関数（または匿名関数）と呼びます。
変数に無名関数を代入し、その変数名で関数を呼び出すことが可能です。

ソースコード例

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

console.log(add(1, 2)); // 3

let add = function(a, b) {

return a + b;

}

console.log(add(1, 2)); // 3

 出力結果
3

サルモリ

無名関数も便利だね！名前を付ける手間が省けるし、一時的な関数に使うことが多いんだよ！

5.2 アロー関数

ES6からは、アロー関数という新しい関数の書き方も導入されました。
アロー関数は、無名関数をより簡潔に書けるようにするものです。

ソースコード例

let add = (a, b) => {
  return a + b;
}

console.log(add(1, 2)); // 3

let add = (a, b) => {

return a + b;

}

console.log(add(1, 2)); // 3

 出力結果
3

サルモリ

アロー関数は無名関数をよりシンプルに書くための構文だよ！これを使うとコードがスッキリするよ！

こちらもCHECK

: 【JavaScript】JavaScriptの関数の使い方を学ぼう！！　関数、無名関数、アロー関数（=>)などの使い方を解説します！

JavaScriptの関数について JavaScriptの関数とは、一連の手続きを一つにまとめて名前を付け、何度も再利用できるようにしたものです。関数はコードの再利用性を高め、可読性を向上させ、エラー ...

続きを見る

6. オブジェクト

JavaScriptでは、オブジェクトというデータ構造を使用することができます。
オブジェクトは、キーと値のペア（プロパティ）を複数保持することができます。
キーは文字列またはシンボルであり、値は任意の型のデータを取ることができます。

ソースコード例

let obj = {
  name: 'John',
  age: 30,
  greet: function() {
    return 'Hello, ' + this.name;
  }
}

console.log(obj.name); // John
console.log(obj.age); // 30
console.log(obj.greet()); // Hello, John

let obj = {

age: 30,

greet: function() {

return 'Hello, ' + this.name;

}

console.log(obj.name); // John

console.log(obj.age); // 30

console.log(obj.greet()); // Hello, John

 出力結果
John 30 Hello, John

サルモリ

オブジェクトは便利だよね！関連するデータを一つの変数で管理できるから、コードがすっきりするんだ！

: オブジェクトについてはコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！

はじめに JavaScriptにおける連想配列について知りたいですか？それなら、あなたは正しい場所に来ました。この記事では、JavaScriptの連想配列の基本から、より高度なテクニックまで、一緒に ...

続きを見る

6.1 プロパティの追加と削除

JavaScriptのオブジェクトは動的にプロパティを追加したり削除したりすることができます。
これは他の静的型付け言語とは大きく異なる特徴です。

ソースコード例

let obj = {
  name: 'John',
  age: 30,
}

// プロパティの追加
obj.job = 'Engineer';
console.log(obj.job); // Engineer

// プロパティの削除
delete obj.age;
console.log(obj.age); // undefined

let obj = {

age: 30,

}

// プロパティの追加

obj.job = 'Engineer';

console.log(obj.job); // Engineer

// プロパティの削除

delete obj.age;

console.log(obj.age); // undefined

 出力結果
Engineer undefined

サルモリ

オブジェクトのプロパティを動的に追加したり削除したりできるから、柔軟にデータを管理できるんだよ！

こちらもCHECK

7. 配列

JavaScriptの配列は、様々なタイプの要素を含むことができ、サイズは動的に変化します。
また、配列自体もオブジェクトで、便利なメソッドを多数持っています。

ソースコード例

let arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5
console.log(arr[0]); // 1
console.log(arr[arr.length - 1]); // 5

let arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5

console.log(arr[0]); // 1

console.log(arr[arr.length - 1]); // 5

 出力結果
5 1 5

サルモリ

配列はいろんな種類のデータを順番に保存するのに使うよ。そして、それぞれのデータはインデックスという番号でアクセスできるんだ！

7.1 配列の操作

JavaScriptの配列は様々なメソッドを持っており、配列の操作が非常に容易です。
例えば、pushメソッドを使うと配列の末尾に要素を追加でき、popメソッドを使うと配列の末尾の要素を削除できます。

ソースコード例

let arr = [1, 2, 3, 4, 5];

arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

arr.pop();
console.log(arr); // [1, 2, 3, 4, 5]

let arr = [1, 2, 3, 4, 5];

arr.push(6);

console.log(arr); // [1, 2, 3, 4, 5, 6]

arr.pop();

console.log(arr); // [1, 2, 3, 4, 5]

 出力結果
[1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]

サルモリ

配列には便利なメソッドがたくさんあるから、データの追加や削除、検索などが簡単にできるんだ！

こちらもCHECK

: 【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

はじめに JavaScriptは、ウェブ開発において不可欠な言語です。特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。この記事では、JavaScrip ...

続きを見る

8. プロトタイプベースの継承

JavaScriptはプロトタイプベースの言語です。
これは、オブジェクトが他のオブジェクトからプロパティとメソッドを継承できるということを意味します。クラスベースの言語とは異なり、JavaScriptではクラスを作成する代わりにオブジェクト（プロトタイプ）を複製します。

プロトタイプベースの継承を理解するためには、まずJavaScriptのオブジェクトがプロパティとメソッドをどのように継承するのかを見てみましょう。

ソースコード例

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

console.log(rabbit.eats); // true
console.log(rabbit.jumps); // true

let animal = {

eats: true

};

let rabbit = {

jumps: true,

__proto__: animal

};

console.log(rabbit.eats); // true

console.log(rabbit.jumps); // true

 出力結果
true true

サルモリ

オブジェクトrabbitは、オブジェクトanimalからプロパティeatsを継承しています。また、自身のプロパティjumpsも持っています。これがプロトタイプベースの継承の例です。

8.1 プロトタイプチェーン

JavaScriptでは、オブジェクトが他のオブジェクトからプロパティを継承することができます。これを可能にするのが、プロトタイプチェーンです。
プロトタイプチェーンは、プロパティやメソッドの検索を助けるための仕組みです。プロパティやメソッドが直接的にオブジェクトに存在しない場合、JavaScriptはそのオブジェクトのプロトタイプチェーンを辿ります。

ソースコード例

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

console.log(longEar.jumps); // true
console.log(longEar.eats); // true
console.log(longEar.earLength); // 10

let animal = {

eats: true

};

let rabbit = {

jumps: true,

__proto__: animal

};

let longEar = {

earLength: 10,

__proto__: rabbit

};

console.log(longEar.jumps); // true

console.log(longEar.eats); // true

console.log(longEar.earLength); // 10

 出力結果
true true 10

サルモリ

上の例では、longEarオブジェクトはrabbitオブジェクトからjumpsプロパティを、さらにrabbitオブジェクトはanimalオブジェクトからeatsプロパティを継承しています。これがプロトタイプチェーンと呼ばれる概念です。

8.2 thisとプロトタイプチェーン

JavaScriptでは、プロトタイプチェーンを通じて継承したメソッドが呼び出されたとき、そのメソッド内のthisキーワードは、そのメソッドを持つオリジナルのオブジェクトではなく、メソッドを呼び出したオブジェクトを参照します。
これは非常に重要な概念です。

ソースコード例

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

rabbit.walk(); // Animal walk

let animal = {

eats: true,

walk() {

console.log("Animal walk");

}

};

let rabbit = {

jumps: true,

__proto__: animal

};

rabbit.walk(); // Animal walk

 出力結果
Animal walk

サルモリ

この例では、rabbit.walk()と呼び出されたとき、実際のwalkメソッドはanimalオブジェクトにあります。しかし、thisはrabbitオブジェクトを参照します。

9. 非同期処理とPromise

JavaScriptはシングルスレッドの言語ですが、非同期処理を通じて複数のタスクを同時に扱うことができます。特にWeb開発では、非同期処理は重要な要素となっており、APIリクエストの送信やファイルの読み込みなど、時間のかかる操作をバックグラウンドで行い、それが完了した時点で結果を処理する、といった作業が可能になります。

JavaScriptにおける非同期処理の中心的な概念の1つが、Promiseです。Promiseは、非同期操作の結果を表すオブジェクトで、成功（resolve）または失敗（reject）のどちらかの状態を持ちます。

9.1 Promiseの基本

Promiseは以下のように作成します。

ソースコード例

let promise = new Promise((resolve, reject) => {
  // 非同期操作
  setTimeout(() => {
    resolve("Success!"); // 操作が成功したらresolveを呼び出す
  }, 1000);
});

promise.then((value) => {
  console.log(value); // "Success!"
});

let promise = new Promise((resolve, reject) => {

// 非同期操作

setTimeout(() => {

resolve("Success!"); // 操作が成功したらresolveを呼び出す

}, 1000);

});

promise.then((value) => {

console.log(value); // "Success!"

});

 出力結果
Success!

サルモリ

Promiseのコンストラクタは、引数としてexecutorという関数を受け取ります。この関数は、2つの引数、resolveとrejectを持ちます。非同期操作が成功すればresolveを、失敗すればrejectを呼び出します。非同期操作の結果は、thenメソッドを使って受け取ることができます。

9.2 Promiseチェーン

Promiseは、thenメソッドを使ってチェーン化することができます。これにより、非同期操作の結果に基づいた複数の処理を順番に行うことが可能になります。

ソースコード例

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise
  .then((value)=> {
    console.log(value); // 1
    return value + 1; // thenメソッドからの戻り値は次のthenメソッドに渡される
  })
  .then((value) => {
    console.log(value); // 2
    return value + 1;
  })
  .then((value) => {
    console.log(value); // 3
  });

let promise = new Promise((resolve, reject) => {

setTimeout(() => {

resolve(1);

}, 1000);

});

promise

.then((value)=> {

console.log(value); // 1

return value + 1; // thenメソッドからの戻り値は次のthenメソッドに渡される

})

.then((value) => {

console.log(value); // 2

return value + 1;

})

.then((value) => {

console.log(value); // 3

});

 出力結果
1 2 3

サルモリ

ここでは、それぞれのthenメソッドが順番に処理され、それぞれの結果が次のthenメソッドへと引き継がれています。Promiseチェーンを使うことで、複雑な非同期処理のフローを読みやすい形で表現することができます。

9.3 Promiseのエラーハンドリング

Promiseでは、エラーが発生した場合にはreject関数を呼び出します。そして、エラーはcatchメソッドを使ってハンドリングできます。

ソースコード例

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("Error!"); // 非同期操作が失敗
  }, 1000);
});

promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error); // Error!
  });

let promise = new Promise((resolve, reject) => {

setTimeout(() => {

reject("Error!"); // 非同期操作が失敗

}, 1000);

});

promise

.then((value) => {

console.log(value);

})

.catch((error) => {

console.error(error); // Error!

});

 出力結果
Error!

サルモリ

この例では、非同期操作が失敗し、rejectが呼び出されています。その結果、エラーメッセージがcatchメソッドで捕捉され、エラーメッセージが出力されています。Promiseでは、エラーハンドリングも非常に重要です。

10. Async/Await

Async/Awaitは、JavaScriptの非同期処理をより直感的に書くための構文です。Async/AwaitはES2017で導入され、Promiseのシンタックスシュガー（より読みやすく書きやすい表記法）と言えます。

10.1 Async関数

Async関数は、非同期処理を含む関数を宣言するための特殊な構文です。asyncキーワードを関数の前に置くことで、その関数は自動的にPromiseを返すようになります。

ソースコード例

async function myFunction() {
  return "Hello, world!";
}

myFunction().then((value) => {
  console.log(value); // "Hello, world!"
});

async function myFunction() {

return "Hello, world!";

}

myFunction().then((value) => {

console.log(value); // "Hello, world!"

});

 出力結果
Hello, world!

サルモリ

この例では、myFunctionはasyncキーワードを使って宣言されています。そのため、myFunctionの戻り値は自動的にPromiseとなり、thenメソッドを使ってその結果を取得することができます。

10.2 Await式

Await式を使うと、Promiseがresolveまたはrejectされるのを待つことができます。これにより、非同期処理をあたかも同期処理のように書くことができます。

ただし、await式はasync関数内でのみ使用することができます。

ソースコード例

async function myFunction() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Hello, world!"), 1000);
  });

  let result = await promise; // Promiseがresolveされるのを待つ
  console.log(result); // "Hello, world!"
}

myFunction();

async function myFunction() {

let promise = new Promise((resolve, reject) => {

setTimeout(() => resolve("Hello, world!"), 1000);

});

let result = await promise; // Promiseがresolveされるのを待つ

console.log(result); // "Hello, world!"

}

myFunction();

 出力結果
Hello, world!

サルモリ

この例では、await式を使ってPromiseがresolveされるのを待っています。その結果、非同期処理の結果を同期処理のように直接取得することができます。これにより、非同期処理のコードをより直感的に書くことができます。

10.3 Async/Awaitのエラーハンドリング

Async/Awaitでは、エラーハンドリングはtry/catchブロックを用いて行います。非同期操作が失敗し、Promiseがrejectされると、それはasync関数内でエラーをスローします。そして、そのエラーはtry/catchブロックで捕捉することができます。

ソースコード例

async function myFunction() {
  try {
    let promise = new Promise((resolve, reject) => {
      setTimeout(() => reject("Error!"), 1000);
    });

    let result = await promise; // Promiseがrejectされると、エラーがスローされる
    console.log(result);
  } catch (error) {
    console.error(error); // "Error!"
  }
}

myFunction();

async function myFunction() {

try {

let promise = new Promise((resolve, reject) => {

setTimeout(() => reject("Error!"), 1000);

});

let result = await promise; // Promiseがrejectされると、エラーがスローされる

console.log(result);

} catch (error) {

console.error(error); // "Error!"

}

myFunction();

 出力結果
Error!

サルモリ

この例では、非同期操作が失敗し、Promiseがrejectされています。その結果、エラーがスローされ、それがcatchブロックで捕捉され、エラーメッセージが出力されています。

11. モジュール

大規模なJavaScriptアプリケーションを構築する際には、コードを複数のファイルに分割することが一般的です。これにより、コードの再利用性と可読性が向上します。JavaScriptでは、これを実現するための概念としてモジュールがあります。

11.1 モジュールのエクスポート

モジュールとは、独立したJavaScriptのコードの塊であり、それ自体が一つのスクリプトとして機能します。モジュール内で定義された関数や変数は、デフォルトではプライベートであり、他のスクリプトからはアクセスできません。それらを外部からアクセス可能にするためには、それらをエクスポートする必要があります。

JavaScriptでは、exportキーワードを使って関数や変数をエクスポートできます。

ソースコード例（myModule.js）

// myModule.js
export const myFunction = () => {
  console.log("Hello, world!");
};

// myModule.js

export const myFunction = () => {

console.log("Hello, world!");

};

サルモリ

この例では、myFunctionという関数をエクスポートしています。これにより、myFunctionはmyModule.jsモジュールの外部からアクセス可能となります。

11.2 モジュールのインポート

エクスポートされた関数や変数は、他のスクリプトからインポートすることができます。importキーワードを使ってモジュールをインポートできます。

ソースコード例（main.js）

// main.js
import { myFunction } from './myModule.js';

myFunction(); // "Hello, world!"

// main.js

import { myFunction } from './myModule.js';

myFunction(); // "Hello, world!"

 出力結果
Hello, world!

サルモリ

この例では、myModule.jsからmyFunctionをインポートし、それを呼び出してるよ。

import文を使うことで、他のモジュールからエクスポートされた関数や変数を簡単に利用することができます。

11.3 デフォルトエクスポート

各モジュールは、デフォルトエクスポートを一つ持つことができます。これは、そのモジュールが主に提供する機能を表します。defaultキーワードを使ってデフォルトエクスポートを指定できます。

ソースコード例（myModule.js）

// myModule.js
const myFunction = () => {
  console.log("Hello, world!");
};

export default myFunction;

// myModule.js

const myFunction = () => {

console.log("Hello, world!");

};

export default myFunction;

デフォルトエクスポートされた値は、インポートする際に任意の名前を付けることができます。

ソースコード例（main.js）

// main.js
import func from './myModule.js';

func(); // "Hello, world!"

// main.js

import func from './myModule.js';

func(); // "Hello, world!"

 出力結果
Hello, world!

サルモリ

この例では、myModule.jsからデフォルトエクスポートされた関数をfuncという名前でインポートし、それを呼び出しています。

12章: HTML要素の取得

JavaScriptはWebページの動的な操作を可能にする強力なツールです。その基礎的な機能の一つが、HTML要素の取得です。JavaScriptを使ってHTML要素を取得することで、その要素の内容を読み取ったり、変更したりすることが可能となります。
この章では、主にdocumentオブジェクトのメソッドを使用してHTML要素を取得する方法をいくつか紹介します。

12.1 document.getElementById

最も基本的な要素の取得方法は、要素のid属性を指定して取得する方法です。これはdocumentオブジェクトのgetElementByIdメソッドを使用します。

ソースコード例

// HTML

<div id="myElement">Hello, world!</div>

// HTML

<div id="myElement">Hello, world!</div>

// JavaScript
let el = document.getElementById('myElement');
console.log(el.textContent);  // "Hello, world!"

// JavaScript

let el = document.getElementById('myElement');

console.log(el.textContent); // "Hello, world!"

 出力結果
Hello, world!

サルモリ

このコードでは、id属性が"myElement"の要素を取得し、そのtextContentプロパティ（要素のテキスト内容）をログに出力しています。

12.2 document.getElementsByClassName

次に、class属性を指定して要素を取得する方法です。これはdocumentオブジェクトのgetElementsByClassNameメソッドを使用します。このメソッドはHTMLCollectionという、取得した要素のコレクションを返します。

ソースコード例

// HTML

<div class="myClass">Hello</div>
<div class="myClass">world!</div>

// HTML

<div class="myClass">Hello</div>

<div class="myClass">world!</div>

// JavaScript
let els = document.getElementsByClassName('myClass');
for (let i = 0; i < els.length; i++) {
  console.log(els[i].textContent);  // "Hello", "world!"
}

// JavaScript

let els = document.getElementsByClassName('myClass');

for (let i = 0; i < els.length; i++) {

console.log(els[i].textContent); // "Hello", "world!"

}

 出力結果
Hello world!

サルモリ

このコードでは、class属性が"myClass"の全ての要素を取得し、それぞれのtextContentプロパティをログに出力しています。

12.3 document.querySelectorとdocument.querySelectorAll

最後に、CSSセレクタを指定して要素を取得する方法です。これはdocumentオブジェクトのquerySelectorメソッドとquerySelectorAllメソッドを使用します。querySelectorメソッドは、指定したCSSセレクタに一致する最初の要素を返します。一方、querySelectorAllメソッドは、指定したCSSセレクタに一致する全ての要素をNodeListというコレクションで返します。

ソースコード例

// HTML

<div class="myClass">Hello</div> 
<div class="myClass">world!</div>

// HTML

<div class="myClass">Hello</div>

<div class="myClass">world!</div>

// JavaScript
let el = document.querySelector('.myClass');
console.log(el.textContent);  // "Hello"

let els = document.querySelectorAll('.myClass');
for (let i = 0; i < els.length; i++) {
  console.log(els[i].textContent);  // "Hello", "world!"
}

// JavaScript

let el = document.querySelector('.myClass');

console.log(el.textContent); // "Hello"

let els = document.querySelectorAll('.myClass');

for (let i = 0; i < els.length; i++) {

console.log(els[i].textContent); // "Hello", "world!"

}

 出力結果
Hello Hello world!

サルモリ

このコードでは、まずquerySelectorメソッドでclass属性が"myClass"の最初の要素を取得し、そのtextContentプロパティをログに出力しています。次にquerySelectorAllメソッドでclass属性が"myClass"の全ての要素を取得し、それぞれのtextContentプロパティをログに出力しています。

こちらもCHECK

: 【JavaScript】JavaScriptのHTML操作の使い方を学ぼう！！　HTML要素の取得、追加、修正、削除、ループ処理による複数取得、イベントリスナーの追加方法を解説します！

JavaScriptでHTML要素を操作する JavaScriptを使用してHTMLの要素を取得、追加、修正、削除する方法について説明します。これらの技術は、ウェブページを動的に制御するために頻繁に ...

続きを見る

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

まとめ

JavaScriptを使ってHTML要素を取得することは、Webページを動的に操作する基礎です。idやclassを指定して要素を取得したり、CSSセレクタを使用して要素を取得したりすることができます。これらの技術を駆使することで、HTML要素の内容を自由自在に操作することができます。
今回学んだことをぜひ実際のコードに活かしてみてください。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

-JavaScript

JavaScript言語の本を書いています！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

: 【JavaScript】if文について徹底解説！！if文とswitch文の使い方を学ぼう！！

【完全ガイド】Javaスクリプトのif文をマスターしよう！はじめに「if」と一言で言っても、プログラミングにおける"もしも"は非常に強力です。 JavaScriptのif文について学ぶことで、プロ ...

: 【JavaScript】数値、文字列、日付や時刻などに0埋めをする方法を徹底解説

JavaScriptでの0埋めの完全解説: 基本から応用まで 1. はじめに数字や文字列を特定の桁数になるように0で埋める、これを「0埋め」と言います。 JavaScriptで0埋めを行う方法を初心 ...

: 【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

JavaScriptの制御構文について理解しよう！ JavaScriptには、プログラムの流れを制御するための構文がいくつかあります。これらは非常に重要な概念で、コードを書く上で欠かすことはできません ...

: 【Vue.js】JSONを読み込み、その内容を出力する方法

はじめに Vue.jsを使用すると、簡単にJSONデータの読み込みや出力ができます。この記事では、「Vue.jsでJSONをどのように読み込み、console.logで出力するのか」について、実際の ...

: 【JavaScript】JavaScriptの日付を比較、加算、文字列へ変換、差分の取得、フォーマット yyyy年mm月dd日に変換方法などを解説します。

JavaScriptの日付形式をマスターする！～JavaScript Dateオブジェクトの活用法～ 1. JavaScriptと日付処理 JavaScriptは、Webページ上で動的な操作を行うため ...

: 【JavaScript】javascript for抜ける方法　break文を使用して、抜ける方法とcontinue文使って特定のループをスキップする方法をマスターしよう！

JavaScriptでforループを抜ける方法 - 初心者でも理解できる10ステップガイドはじめに JavaScriptを使ってプログラミングをする際に、ループ処理は非常に重要な役割を果たします。特 ...

: 【JavaScript】sleepを徹底解説！スリープ処理を使いこなして徹底解説！

JavaScriptで実現するスリープ処理：初心者から上級者まで役立つ完全ガイド JavaScriptにおける「スリープ」処理は、特定の時間だけプログラムの実行を一時停止する方法です。この記事では、J ...

: 【java script】文字列を比較、長さの取得、改行の挿入方法

JavaScriptでの文字列操作：長さの取得と改行の挿入方法はじめに JavaScriptで文字列を扱う際、よく使う操作として文字列の「長さの取得」や「改行の挿入」があります。今回はこれらのテク ...

: 【JavaScript】javascript 2進数、8進数、16進数への文字列変換　2進数、8進数、16進数から10進数への変換方法

JavaScriptで2進数、8進数、16進数の文字列変換をマスターしよう！はじめに JavaScriptでの数字の取り扱いは、基本的に10進数が一般的です。しかし、場合によっては2進数、8進数、 ...

: 【javascript】連想配列の問題６選問題を解いて、連想配列について理解しよう！

JavaScriptの連想配列の使い方の演習問題6問！！ JavaScriptの連想配列（オブジェクト）について理解を深めるための演習問題をご用意しました！実際にコードを書いて、動作を確認しながら学 ...

【Golang】Go言語のゴルーチンとチャネルの使い方を学ぼう　平行処理の使い方を学んで、複数のタスクを同時に実行しよう。

【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

【JavaScript】初心者必見！JavaScriptの基本的な機能を徹底解説！

JavaScriptの基本的な機能

1. 変数

2. データ型

2.1 数値（Number）

2.2 文字列（String）

2.3 ブーリアン（Boolean）

2.4 nullとundefined

2.5 オブジェクト（Object）

オブジェクトについてはコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！

2.6 配列（Array）

配列についてはコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

3. 演算子

3.1 算術演算子

3.2 文字列結合演算子

3.3 比較演算子

3.4 論理演算子

3.5 条件（三項）演算子

4. 制御構文

4.1 if文

さらに詳しく知りたい方はコチラ【JavaScript】if文について徹底解説！！if文とswitch文の使い方を学ぼう！！

4.2 for文

4.3 while文

【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

5. 関数

5.1 無名関数

5.2 アロー関数

【JavaScript】JavaScriptの関数の使い方を学ぼう！！ 関数、無名関数、アロー関数（=>)などの使い方を解説します！

6. オブジェクト

オブジェクトについてはコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！

6.1 プロパティの追加と削除

7. 配列

7.1 配列の操作

【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

8. プロトタイプベースの継承

8.1 プロトタイプチェーン

8.2 thisとプロトタイプチェーン

9. 非同期処理とPromise

9.1 Promiseの基本

9.2 Promiseチェーン

9.3 Promiseのエラーハンドリング

10. Async/Await

10.1 Async関数

10.2 Await式

10.3 Async/Awaitのエラーハンドリング

11. モジュール

11.1 モジュールのエクスポート

11.2 モジュールのインポート

11.3 デフォルトエクスポート

12章: HTML要素の取得

12.1 document.getElementById

12.2 document.getElementsByClassName

12.3 document.querySelectorとdocument.querySelectorAll

【JavaScript】JavaScriptのHTML操作の使い方を学ぼう！！ HTML要素の取得、追加、修正、削除、ループ処理による複数取得、イベントリスナーの追加方法を解説します！

まとめ

Ads Blocker Detected!!!

【JavaScript】JavaScriptの関数の使い方を学ぼう！！　関数、無名関数、アロー関数（=>)などの使い方を解説します！

【JavaScript】JavaScriptのHTML操作の使い方を学ぼう！！　HTML要素の取得、追加、修正、削除、ループ処理による複数取得、イベントリスナーの追加方法を解説します！