この記事では、①JavaScriptで関数を定義する方法、②関数に情報（引数）を渡す方法、③関数から結果（戻り値）を受け取る方法を、初心者でも理解しやすいように順を追って１から解説します。

サンプルコード　JavaScriptの関数の基本

// 2つの数値を受け取り、それらの和を返す関数
function add(a, b) {
    return a + b;
}

// 関数の使用例
let sum = add(5, 3);
console.log(sum); // 出力: 8

実際のプログラミングで関数がどのように役立つかについて、具体的な使用例を通じて紹介します。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

JavaScript：関数の基本

関数はプログラミングにおいて非常に重要な概念です。関数は特定のタスクを実行するコードの集まり（＝部品）であり、コードの再利用性を高めつつプログラムの構造を明確にし保守を容易にする役割があります。

はじめに関数の基本的な概念についておさらいしておきます。「関数」の基礎理解はある！という方はこの章は読み飛ばしてください。

関数とは？

関数とは一連の処理をまとめたコードのブロック（＝部品）です。関数を使うことで、同じコードを何度も書く必要がなくなり、コードの重複を避けることができます。

参考　プログラミングにおける「関数」とは？

例えば、１つの「メッセージを表示」させたり「ポップアップ」を表示させたり「日付を計算したり」という共通的な処理については、１つの機能の中で何度も登場します。このとき、毎回同じコードを都度記述していくのは大変です。そんなときに予め関数を定義しておいて、必要なタイミングでその関数を呼び出すような形にすることで、必要最低限のコード分量で開発が完了します。

関数を使用することで、プログラムを小さな単位に分割し、各部分を独立させることが可能になります。

ポイント　関数を利用するメリット

1. 再利用性
   • 一度定義した関数は、プログラムのどこからでも何度でも呼び出すことができる。
2. 構造化
   • 関数を使用することで、コードを小さな単位に分割し、プログラムの構造を明確にすることができる。
3. 保守性の向上
   • プログラムを関数に分割することで、特定の機能を修正する際に影響を受ける範囲を限定し、保守性を向上させることができます。

関数はJavaScriptプログラミングの基礎を形成し、効率的で読みやすいコードを書くために必要不可欠。ここからは本編、関数の定義方法について詳しくご説明します。。

JavaScript：関数宣言（function）

JavaScriptにおける関数の定義方法は主に2つあります。
→①関数宣言（Function Declarations）と②関数式（Function Expressions）。

この章では、これらの定義方法をそれぞれサンプルコード付きで解説します。関数の呼び出し方も紹介します。

パターン１：関数宣言（Function Declarations）

この方法はJavaScriptにおける最も基本的な関数の定義方法です。この方法で関数を定義すると、関数名を指定してコードブロックをグループ化→その関数名を使っていつでもそのコードブロックを実行できるようになります。関数宣言はfunctionキーワードで始まり、以下の要素で構成されます。

function functionName(parameters) {
    // 関数の本体
    // ここに実行するコードを記述します
}

1. function
   • このキーワードは、JavaScriptにおいて関数を定義する際に使用。
     →関数を定義しますよ！という意味だと理解すればOK。
2. functionName
   • 関数名。この名前を使って後から関数を呼び出せます。（呼び出し方は後述）
3. parameters
   • 関数に渡される引数のリスト。引数はコンマ(,)で区切られます。関数に引数が必要ない場合は、このカッコは空にする。
4. 関数の本体
   • 中括弧{}で囲まれた部分。この中には、関数が呼び出されたときに実行されるコードが含まれます。

サンプルコード　関数宣言と呼び出し

// 2つの数値を受け取り、その和を返す関数
function add(a, b) {
    return a + b;
}

// 関数の呼び出し
const sum = add(5, 7);
console.log(sum); // 出力: 12

↑の例では、addという関数が定義されています。この関数は2つの引数aとbを受け取りその和を返します。関数を呼び出すときは、関数名addの後にカッコを付けその中に引数5と7を渡します。そして、この関数は2つの引数の和12を返し、それが変数sumに格納され、最後にコンソールに出力されます。

ここで、関数の基本である「引数」と「戻り値」について解説します。

引数（Parameters）

引数（またはパラメータ）は関数に渡される情報であり、関数がその操作を行うために必要なデータです。引数は関数の定義部分にリストされ、関数が呼び出される際に実際の値（引数値またはアーギュメント）として渡されます。

• 定義時の引数（パラメータ）：関数定義においてカッコ()内に指定される変数。これにより、関数は外部からのデータを受け取ることができる。
• 呼び出し時の引数（アーギュメント）：関数が実行される際に関数に渡される具体的な値。

function sample() {
    //処理
    return 式
}

戻り値（Return Value）

戻り値は、関数がその処理を完了した後に「返す」データです。return文を使用して関数から値を返すことができます。

サンプルコード　引数と戻り値

// 引数として2つの数値を受け取り、その和を戻り値として返す関数
function add(a, b) {
    return a + b;
}

// 関数を呼び出し、引数に5と7を渡す
const sum = add(5, 7);

// 戻り値をコンソールに出力
console.log(sum); // 出力: 12

↑の例では、add関数は2つの引数aとbを受け取りその和を計算して戻り値として返します。この関数を呼び出す際に5と7を引数として渡すと、関数はこれらの値の和12を返します。この戻り値は変数sumに格納され、コンソールに出力されています。

パターン２：関数式（Function Expressions）

関数式はJavaScriptにおける便利な機能の１つで、関数を変数に割り当てることができる表現方法です。関数式を使用すると、無名関数（匿名関数）を作成することが可能となり、これにより即時実行関数や高階関数（他の関数を引数として受け取る関数や関数を戻り値として返す関数）などの高度なプログラミングパターンを実装することができます。

ポイント　関数式の基本構文

const myFunction = function(parameters) {
    // 関数の本体
};

myFunctionは関数を参照する変数名。functionキーワードの後ろに続くのは関数のパラメータと本体です。

サンプルコード　関数式

// 関数式を使用して関数を定義
const greet = function(name) {
    console.log(`こんにちは、${name}さん!`);
};

// 関数を呼び出す
greet('太郎'); // 出力: こんにちは、太郎さん!

↑の例では、greet変数に関数式を割り当て。関数はnameという引数を受け取り、挨拶のメッセージをコンソールに出力しています。

無名関数（匿名関数）

関数式には２つの形式があります。

// 名前付き関数式
const myNamedFunction = function namedFunction() {
    console.log('名前付き関数式');
};

// 無名関数式
const myAnonymousFunction = function() {
    console.log('無名関数式');
};

1. 通常の関数式（名前付き関数式）
2. 無名関数（匿名関数式）

この２つの違いは関数に名前が付けられているか否か。以下では、それぞれの構文の違いと使い分けを解説します。

ポイント１　通常の関数式（名前付き関数式）

通常の関数式では関数に名前を付けます。これにより、関数内部から自身を参照することが可能になり、再帰呼び出しやデバッグが容易になります。名前付き関数式の構文は以下の通りです。

const myFunction = function functionName(parameters) {
    // 関数の本体
};

functionName：関数の名前。この名前を使用して関数自身を関数の本体内部で参照することができるようになります。

ポイント２　無名関数（匿名関数式）

無名関数では、関数に名前を付けません。これは一度きりの使用や、即時実行関数、コールバック関数などに便利です。無名関数式の構文は以下の通りです。

const myFunction = function(parameters) {
    // 関数の本体
};

↑の形式では関数は名前を持たず直接変数に割り当てられます。この関数を呼び出すには、変数名（この例ではmyFunction）を使用します。

JavaScript：関数の呼び出し・実行

ここからは定義した関数を呼び出す方法・実行する方法をいくつかのサンプルコード付きでご説明していきます。

パターン１：基本的な関数の呼び出し

関数を呼び出す基本的な方法は、関数名の後にカッコ()を付ける方法です。必要に応じてカッコ内で引数を指定します。

// 関数の定義
function sayHello(name) {
    console.log(`こんにちは、${name}さん!`);
}

// 関数の呼び出し
sayHello('太郎');

この例では、sayHello関数が定義されており、'太郎'という引数を渡して呼び出されています。結果として、こんにちは、太郎さん!というメッセージがコンソールに出力されます。

パターン２：引数を複数持つ関数の呼び出し

関数は複数の引数を受け取ることができます。関数を呼び出す際には、それらの引数をカンマで区切って渡します。

// 関数の定義
function add(a, b) {
    return a + b;
}

// 関数の呼び出し
const sum = add(5, 3);
console.log(sum); // 出力: 8

この例では、2つの数値を引数として受け取り、それらの和を返すadd関数を呼び出しています。

パターン３：関数を変数に割り当ててから呼び出す

関数式を使用して関数を変数に割り当て、その変数を通じて関数を呼び出すことができます。

const multiply = function(x, y) {
    return x * y;
};

const product = multiply(4, 5);
console.log(product); // 出力: 20

この例では、multiply変数に割り当てられた関数を使用して、2つの数値の積を計算しています。

パターン４：コールバック関数としての関数の呼び出し

関数を別の関数の引数として渡し、その関数内で呼び出すことができます。これは、非同期処理やイベント処理などで一般的に使用されます。

function processUserInput(callback) {
    const name = prompt('名前を入力してください:');
    callback(name);
}

processUserInput(sayHello);

この例では、processUserInput関数にsayHello関数をコールバックとして渡し、ユーザーからの入力に基づいてsayHello関数を呼び出しています。

JavaScript：関数を利用する際の注意点

JavaScriptで関数を利用する際には、いくつかの重要な注意点があります。これらを理解し、適切に対処することで、より効率的かつエラーの少ないコーディングが可能になります。

1. スコープの理解

JavaScriptでは、関数はそれ自身のスコープを持ちます。これは、関数内で宣言された変数は関数の外部からはアクセスできないことを意味します。しかし、関数内からは外部スコープの変数にアクセスすることができます。

let globalVar = "外部変数";

function testScope() {
    let localVar = "内部変数";
    console.log(globalVar); // アクセス可能
}

testScope();
console.log(localVar); // ReferenceError: localVar is not defined

2. 巻き上げ（Hoisting）

JavaScriptでは、関数宣言と変数宣言は巻き上げられます。つまり、コードの実行前に関数と変数がそのスコープの先頭に移動するような振る舞いをします。ただし、関数式は巻き上げの対象ではないため、宣言前に関数式を呼び出そうとするとエラーになります。

console.log(declaredLater); // undefined（巻き上げによりundefinedが返される）
var declaredLater = "宣言後に定義される変数";

declaredFunction(); // 正常に実行される

function declaredFunction() {
    console.log("関数宣言は巻き上げられる");
}

undeclaredFunction(); // TypeError: undeclaredFunction is not a function

var undeclaredFunction = function() {
    console.log("関数式は巻き上げられない");
};

3. 再帰関数の使用

再帰関数は自分自身を呼び出す関数です。無限ループに陥らないように終了条件を正しく設定することが重要です。

function countDown(number) {
    if (number <= 0) {
        console.log("完了");
        return;
    }
    console.log(number);
    countDown(number - 1);
}

countDown(3);

// 関数宣言
function greet(name) {
    console.log(`こんにちは、${name}さん!`);
}

// 関数式（無名関数を使用）
const sayGoodbye = function(name) {
    console.log(`さようなら、${name}さん!`);
};


// 関数の呼び出し
greet('太郎');
sayGoodbye('花子');
console.log(add(5, 3));

具体的には、ユーザーがページ上の要素をクリックしたり、キーボードを操作したりするたびにイベントリスナーはこれらのアクションを「聞き」プログラムされたタスクを実行するということです。

イベントリスナーを適切に利用することにより、Webサイトやアプリケーションに対してインタラクティブな体験を提供することが可能になります。この記事では、イベントリスナーの基本から、具体的な使用方法・コーディング方法まで、初心者でも理解しやすいように段階的に解説していきます。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

イベントとは？

イベントとはユーザーがマウスやブラウザから特定のアクションを行うことです。マウスをクリックしたり、キーボードのキーを押したり。また、ページが読み込まれたり、ウインドウ（画面サイズ）がリサイズされるといったブラウザの動作などがその一例です。

以下に代表的なイベントを記載します。

これらのイベントは、Webページ上で発生する様々なユーザー行動やブラウザ状態の変化を表します。JavaScriptを使ってこれらのイベントを検出し、適切な応答をプログラムすることで、Webページをよりインタラクティブでユーザーフレンドリーなものにすることが可能です。

ザックリいえば、JavaScriptではユーザが起こしたアクションによって、様々な処理ができる！ということ。「〇〇をクリックしたら、表示を△△に変える」というようなことです。

このクリックなどの操作を「イベント」と呼ぶということをおさえておければOKです。

イベントリスナーとは？

イベントリスナーとは、特定のイベントが発生したときに実行される関数や処理のこと・その仕組みを指します。経てばユーザが「クリック」したら、入力チェックを行う・・・というような仕組みのこと。

参考　JavaScriptの関数

イベントリスナーはWebページ上の動的なインタラクションを可能にする概念の１つで、ユーザーがページ上で行う様々なアクション（例えば、クリックやキーボードの入力など）を捉え、それに応じた特定の反応をプログラムすることができます。

「ユーザがクリックしたら、関数〇〇を実行する」というような処理があるとすると、ユーザーがクリックするかどうかを見張っているのがイベントリスナーと言えます。

イベントリスナーの仕組み

イベントリスナーは、以下のような手順で機能します。詳しい仕組み後ほど解説するので、ここではイベントリスナーという仕組みの動作原理についての概要を押さえておきましょう。

1. イベントリスナーの登録
   • まずは、特定のイベントに反応するようにイベントリスナーを登録します。これは、対象となる要素に対して、監視したいイベントタイプと、そのイベントが発生したときに呼び出されるコールバック関数を指定します。
2. イベントの監視
   • イベントリスナーが登録されると、ブラウザは指定されたタイプのイベントがその要素で発生するのを監視し始めます。
3. イベントの発生と処理の実行
   • 対象のイベントが発生すると、ブラウザは事前に登録されたコールバック関数を呼び出し、プログラムされた処理を実行します。

イベントリスナーの使用例

JavaScriptでは、addEventListenerメソッドを使用するのがイベントリスナーを登録する基本的な方法の１つです。このメソッドは、対象の要素、イベントタイプ、そしてイベントが発生した際に実行される関数を引数に取ります。例えば、ボタンがクリックされたときにアラートを表示するイベントリスナーは次のように書くことができます。

document.getElementById('myButton').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

↑のコードは、ID：myButtonの要素に対してクリックイベントリスナーを追加しています。ボタンがクリックされると、アラートが表示されるというシンプルな処理を行っています。

このように、ユーザの何か特定の処理を「イベント」として検知し、そのイベントに対応する処理を記述することで様々な動的な画面制御を行うことができるようになるのが、このイベントリスナーという仕組み・概念です。

ここから、より実践的にイベントリスナーの定義方法・コーディング方法を詳しく解説していきます。

イベントリスナーの追加：addEventListener

イベントリスナーを追加するためのメソッドはaddEventListenerです。このメソッドを使用することで、特定の要素にイベントを監視するリスナーを登録できます。

ポイント　addEventListenerメソッドの構文

element.addEventListener(event, function, useCapture);

1. element: イベントリスナーを追加したいDOM要素
2. event: 監視するイベントの名前（例: 'click', 'mouseover'）
3. function: イベントが発生したときに実行されるコールバック関数
4. useCapture (オプション): イベントキャプチャを使用するかどうかのブール値。デフォルトはfalseで、イベントバブリングのフェーズでリスナーが動作

さっそく具体的に１からイベントリスナーを登録する方法を見ていきましょう。

ステップ1　対象となる要素を選択する

まず、イベントリスナーを追加したいHTML要素をJavaScriptを使って選択します。例えば、IDがmyButtonのボタン要素を選択するには、次のようにします。

var button = document.getElementById('myButton');

参考　JavaScript変数：var

ステップ2　addEventListenerメソッドを使用してイベントリスナーを追加する

次に、addEventListenerメソッドを使用して選択した要素にイベントリスナーを追加します。例えば、ボタンがクリックされたときにアラートを表示するには、次のように記述します。

button.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

↑のコードは、myButtonIDを持つボタンがクリックされたときに、アラートを表示するイベントリスナーを追加します。

以下のコードをHTMLファイルに保存して実行してみましょう。イベントとイベントリスナーの動きがより視覚的に理解できると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クリックイベントデモ</title>
  <style>
    #myButton {
      padding: 12px 24px;
      font-size: 16px;
      border: 2px solid #333;
      border-radius: 8px;
      cursor: pointer;
      background-color: #f0f0f0;
    }

    #myButton:hover {
      background-color: #d0e6ff;
    }
  </style>
</head>
<body>

  <h2>ボタンをクリックしてください</h2>
  <button id="myButton">クリック</button>

  <script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('ボタンがクリックされました！');
    });
  </script>

</body>
</html>

サンプルコード　マウスオーバーイベントの追加

マウスが特定の要素の上に移動したときに反応するイベントリスナーを追加する例を見てみましょう。

var myElement = document.getElementById('myElement');

myElement.addEventListener('mouseover', function() {
    myElement.style.backgroundColor = 'yellow';
});

↑のコードは、IDがmyElementの要素にマウスが乗ると、その要素の背景色を黄色に変更します。

サンプルコード　フォーム送信イベントの追加

フォームが送信されたときにカスタム処理を実行するイベントリスナーを追加する例です。

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトのフォーム送信を防止
    alert('フォームが送信されました！');
});

↑の例では、フォーム送信イベントが発生した際に、ブラウザによるデフォルトの送信処理をpreventDefaultメソッドでキャンセルし、代わりにアラートを表示しています。

addEventListenerメソッドを使用することで、様々なイベントに対して柔軟に対応することができます。イベントリスナーの追加は、Webページをよりインタラクティブでユーザーフレンドリーにする上で重要な役割を果たします。

上記の例を参考に、様々なイベントに対応するイベントリスナーの追加を試してみてください。

イベントリスナーの削除：removeEventListener

イベントリスナーの追加と同様に重要なのが不要になったイベントリスナーを削除することです。イベントリスナーが不要になるのは、例えばユーザーが特定の操作を完了した後や、ページの特定の部分が非表示になった時などです。イベントリスナーを削除することで、メモリリークを防ぎ、アプリケーションのパフォーマンスを維持することが可能になります。

特に大規模で複雑なWebアプリケーションを開発する際にはこの点も重要となるのでこの章で詳しく解説しておきます。

ポイント　removeEventListenerメソッド

イベントリスナーを削除するためには、removeEventListenerメソッドを使用します。このメソッドの構文はaddEventListenerに似ていますが、イベントを削除するだけです。

element.removeEventListener(event, function, useCapture);

1. element: イベントリスナーを削除したいDOM要素
2. event: 削除したいイベントの名前
3. function: 削除したいイベントリスナーに紐づけられている関数
4. useCapture: イベントリスナーがキャプチャフェーズで登録されているか、バブリングフェーズで登録されているかを示すブール値。addEventListenerと同じ値を指定する必要があります。

イベントリスナーの削除：具体例

イベントリスナーを削除する際には、addEventListenerで指定したのと同じ関数をremoveEventListenerに渡す必要があります。これは、無名関数を直接addEventListenerに渡す代わりに、関数を変数に割り当てておくとよいでしょう。

var button = document.getElementById('myButton');
var handleClick = function() {
    alert('ボタンがクリックされました！');
};

// イベントリスナーを追加
button.addEventListener('click', handleClick);

// イベントリスナーを削除
button.removeEventListener('click', handleClick);

↑の例では、handleClick関数がクリックイベントのコールバックとして使用されています。イベントリスナーを削除する際も、同じhandleClick関数をremoveEventListenerメソッドに渡しています。これにより、正確に特定のイベントリスナーを削除することができます。

イベントリスナーの追加だけでなく、適切なタイミングでの削除もWebアプリケーションの効率的な動作には不可欠です。addEventListenerとremoveEventListenerを適切に使用することで、ユーザーインターフェースのコントロールを精密に行い、リソースを効率的に管理することが可能になります。

イベントリスナーのライフサイクル管理を意識することは、ウェブ開発のスキルを向上させる上で重要なポイントです。

以下のJavaScriptコードは、Carというクラスを定義し、それを使用して具体的な車オブジェクトを作成する例です。

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.brand} model ${this.model}.`);
  }
}

// Carクラスのインスタンスを生成
const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // 出力: This car is a Toyota model Corolla.

このページでは↑のサンプルコードの意味・内容を初心者でも理解できるように、Javascriptにおけるクラスの基本を１からわかりやすくご説明します。Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

Javascript：クラスとは？

クラスとはオブジェクトを作成するための「設計書」のこと。

簡単な日常生活の例を使ってご説明します。

まず、クラスとは何かを理解するために、車を作る工程を思い浮かべてみてください。あなたは自動車メーカーに勤めていて、新型の車を作りたいと思ったとしましょう。その際、最初に行う工程が「設計図を作成すること」になるはずです。いきなり車の部品を作り始めるのではなく、車の「形」や「サイズ」「色」や「部品の構成」に加えて、アクセルやブレーキなど、どのような機能を持つべきかを定義する必要があるでしょう。

自動車メーカーは車を1台だけ作ればよいわけではなく、100台～10000台と製造する必要があるので、設計図を作成することは重要な作業になります。

結論を言うと「クラスとは、この設計図のようなもの」です。

どのようなデータ（属性）を持ち、どのような動作（メソッド）をするべきかを定義するのが、クラスを定義するということになります。

車の設計図の例で言えば、データ（属性）とは「車の色」「車種」「製造年」などがそれに該当します。動作（メソッド）とは「アクセルを踏む」、「ブレーキを踏む」、「ハンドルを切る」などを指します。

車の設計図の例で言えば、データ（属性）とは「車の色」「車種」「製造年」などがそれに該当します。動作（メソッド）とは「アクセルを踏む」、「ブレーキを踏む」、「ハンドルを切る」などを指します。

ひとまず、ここでは何となく「クラスってそういうものなんだな」とイメージできればOKです。で、早速Javascriptでクラスを定義する方法を見ていきましょう。

Javascript：class

Javascriptでクラスを定義するにはclassキーワードを使用します。ちなみに、クラス名の最初の文字は大文字で始めるのが一般的です。

class FirstClass {
  constructor() {
    // コンストラクタメソッド: 新しいインスタンスを作成する際に実行されます。
    // インスタンス固有の初期化処理をここで行います。
  }

  method1() {
    // メソッド1の定義: クラスのインスタンスが利用できる機能を提供します。
  }

  method2() {
    // メソッド2の定義: 別の機能を提供します。
  }
}

この例では、FirstClassという名前のクラスを定義しています。このクラスには以下のような基本的な構成要素を含みます。

1. constructor()メソッド: クラスから新しいオブジェクトが作成されるたびに自動的に実行される特別なメソッド。このメソッド内で、そのインスタンスの初期状態を設定するためのコード（例えば、プロパティの初期値を設定するなど）を書きます。
2. メソッドの定義: method1()やmethod2()のように、クラス内にメソッドを定義することができます。これらのメソッドは、クラスのインスタンスが利用できる機能や振る舞いを実装します。

サンプルコード１　Dogクラスの定義

class Dog {
  constructor(name, breed) {
    this.name = name; // 犬の名前
    this.breed = breed; // 犬の種類
  }

  bark() {
    console.log(`${this.name} says woof!`);
  }
}

コンストラクタ（constructor）

コンストラクタとは、オブジェクト指向プログラミングに共通して存在する重要な概念の１つで、クラスからオブジェクト（インスタンス）を生成する際に自動的に呼び出される特別なメソッドです。コンストラクタの主な役割は、新しく作成されたオブジェクトの初期化を行うこと。これには、オブジェクトのプロパティに初期値を設定する作業が含まれます。

ポイント　コンストラクタの特徴

1. 自動的に呼び出される: インスタンスが生成される時に自動的に呼び出される。この性質により、オブジェクトが適切に初期化されていることを保証することが可能になる。
2. 初期化の役割: オブジェクトのプロパティや状態に初期値を設定。→オブジェクトが正しく機能するための準備が整う。
3. 直接呼び出しは不可: コンストラクタは、newキーワードを使用してクラスからオブジェクトを生成する際にのみ内部的に呼び出されます。クラスの外部から直接呼び出すことはできません。

以下は、JavaScriptにおける簡単なPersonクラスの定義と、そのコンストラクタの使用例です。

class Person {
  constructor(name, age) {
    this.name = name; // プロパティに初期値を設定
    this.age = age;   // 同上
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Personクラスからインスタンスを生成し、コンストラクタが自動的に呼び出される
const person1 = new Person('John', 30);

// greetメソッドを呼び出して、コンストラクタによって設定された値を使用
person1.greet(); // 出力: Hello, my name is John and I am 30 years old.

参考　${テンプレートリテラル} / メソッドの呼び出し

この例では、Personクラスのコンストラクタが、新しいPersonオブジェクトが作成される際にnameとageのプロパティに初期値を設定しています。その後、greetメソッドを通じて、これらのプロパティがどのようにオブジェクト内で使用されるかを示しています。

コンストラクタを使用することで、オブジェクトが期待する状態で生成されることを保証し、プロパティの値が適切に設定されていることを確認できます。これにより、オブジェクトの安定した動作と、コードの保守性の向上が期待できます。

インスタンスの作成

定義したクラスはそのままでは利用できません。インスタンスを作成したとき始めて実体化します。ここでは、インスタンス化についてご説明します。

「インスタンス化」とは、クラス（オブジェクトの設計図）をもとにして、具体的なオブジェクト（インスタンス）を生成するプロセスのことを指します。オブジェクト指向プログラミングにおいて、クラスは属性（プロパティ）と動作（メソッド）を定義するテンプレートのようなものですが、クラス自体は具体的なデータや状態を持ちません。インスタンス化を通じて、この抽象的な定義から実際に動作するオブジェクトを作り出します。

ポイント　インスタンス化のプロセス

1. クラスの定義: まず、オブジェクトの構造や振る舞いを定義するクラスを作成。
2. インスタンスの生成: クラスから新しいインスタンスを生成するには、newキーワードを使ってクラスをインスタンス化する。このステップでコンストラクタが呼び出され、オブジェクトの初期化が行われる。
3. インスタンスの使用: インスタンス化されたオブジェクトは、定義されたプロパティやメソッドを持ち、プログラム内で自由に使うことができる。

class FirstClass {
~~~
}

// FirstClassのインスタンスを作成
const firstInstance = new FisrtClass();

// インスタンスのメソッドを呼び出す
firstInstance.method1();
firstInstance.method2();

newキーワードを使ってFirstClassのインスタンスを作成し、その後でインスタンスに対して定義されたメソッドを呼び出しています。これにより、クラスを利用した具体的なオブジェクトが生成され、そのオブジェクト固有の機能を使用することができます。

サンプルコード２　Dogクラスのインスタンス化と呼び出し

class Dog {
  constructor(name, breed) {
    this.name = name; // 犬の名前
    this.breed = breed; // 犬の種類
  }

  bark() {
    console.log(`${this.name} says woof!`);
  }
}


// `Dog`クラスからインスタンスを作成
const myDog = new Dog("Buddy", "Golden Retriever");

// インスタンスのメソッドを呼び出す
myDog.bark(); // 出力: Buddy says woof!

インスタンスの作成にはnewキーワードを使用し、Dogクラスに定義されたbarkメソッドを呼び出しています。この方法により、オブジェクト指向プログラミングの基本的な概念である「カプセル化」「継承」「ポリモーフィズム」を活用し、効率的かつ整理されたコードを実現できます。

ここまでの説明でクラスの基本的な概念と使い方についてはアルテ色理解が深まったと思います。クラスの定義、コンストラクタの役割、インスタンス化のプロセス、そしてプロパティとメソッドの定義と使用方法。これらはオブジェクト指向プログラミングにおいて非常に重要な概念であり、JavaScriptをはじめとする多くのプログラミング言語で広く使われています。

ただし、クラスを完璧に理解するためには、以下のようなさらに高度なトピックも存在します。ここからは、↓についていくつかサンプルコードをもとに深堀して解説していきます。

継承（extends）

継承とは、あるクラス（基底クラスまたは親クラスと呼ばれる）の特性（プロパティとメソッド）を別のクラス（派生クラスまたは子クラスと呼ばれる）に引き継ぐメカニズムです。継承を利用することで、既存のコードの再利用、プログラムの構造の整理、および複雑性の管理が容易になります。

JavaScriptでの継承の簡単な例を以下に示します。クラスの継承を行う際にはextendsキーワードを使用します。

// 基底クラス（親クラス）
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

// 派生クラス（子クラス） - Animalクラスを継承
class Dog extends Animal {
  constructor(name) {
    super(name); // 親クラスのコンストラクタを呼び出し
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // 出力: Rex barks.

↑の例では、Animalクラスが基底クラスとして定義されており、DogクラスがAnimalクラスを継承しています。DogクラスはAnimalクラスのconstructorとspeakメソッドを継承していますが、speakメソッドをオーバーライド（上書き）して独自の振る舞いを定義しています。

super

クラスを継承して利用する際の「super」キーワードについてご説明します。

superは、派生クラス（子クラス）から基底クラス（親クラス）のコンストラクタやメソッドにアクセスするために使用されるキーワードです。superの使用目的は主に以下の二つに分けられます。

パターン１：コンストラクタ内でのsuper

派生クラスのコンストラクタ内でsuperを使用すると、基底クラスのコンストラクタを呼び出すことができます。これは、派生クラスで基底クラスのコンストラクタを実行して初期化処理を行う必要がある場合に使用します。派生クラスのコンストラクタ内でsuperを呼び出さないと、基底クラスのプロパティが適切に初期化されず、エラーが発生する可能性があります。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 基底クラスのコンストラクタを呼び出し、nameプロパティを初期化
    this.breed = breed; // 追加のプロパティを初期化
  }
}

パターン２：メソッド内でのsuper

派生クラスのメソッド内でsuperを使用すると、基底クラスに定義されたメソッドにアクセスできます。これは、派生クラスで基底クラスのメソッドの振る舞いを再利用したい、または拡張したい場合に便利です。superを用いることで、基底クラスのメソッドをオーバーライド（上書き）しつつ、その元の実装を呼び出すことが可能になります。

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    super.speak(); // 基底クラスのspeakメソッドを呼び出し
    console.log("Dog barks.");
  }
}

const dog = new Dog();
dog.speak();
// 出力:
// Animal makes a sound.
// Dog barks.

superは派生クラスから基底クラスのコンストラクタやメソッドにアクセスし、それらを利用するための強力な機能を提供する、と理解できればOKです。

カプセル化

JavaScriptにおける「カプセル化」は、オブジェクトの詳細を外部から隠し、外部から直接アクセスできる部分を制限するオブジェクト指向プログラミングの原則の１つです。カプセル化によってオブジェクトの内部状態を保護し、外部からの不正なアクセスや予期しない変更を防ぐことができます。これにより、オブジェクトの利用者は、そのオブジェクトが提供する公開インターフェース（メソッドやプロパティ）を通じてのみオブジェクトとやり取りすることになります。

カプセル化することで、そのクラスが正常に動くために「変えてはいけない部分を変えられなくする」ことができるということです。

JavaScriptにおけるカプセル化の実現方法

JavaScriptでカプセル化を実現する方法はいくつかありますが、一般的な方法は以下の通りです。

パターン１　プライベートフィールドとメソッド（ES2020以降）

最新のJavaScriptでは、クラス内でプライベートフィールドやメソッドを定義するために#プレフィックスを使用します。これにより、クラスの外部からはアクセスできなくなります。

class Person {
  #name; // プライベートフィールド

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name; // プライベートフィールドへのアクセス
  }
}

const person = new Person('John');
console.log(person.getName()); // John
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

プロパティ「#name」はカプセル化されたので、外部から直接参照することはできません。そのため、最後の行で「#name」を参照している個所はエラーとなっていることが分かります。

パターン２　クロージャを使用する

クロージャを利用してプライベート変数や関数を作成することもできます。この方法は、ES2020以前から利用可能で、関数スコープを活用します。

このページで解説している「クラス」とは直接的に関係ありませんか「カプセル化」の観点で合わせて覚えておきたいテクニックです。

function Person(name) {
  let privateName = name; // プライベート変数

  this.getName = function() {
    return privateName;
  };
}

const person = new Person('John');
console.log(person.getName()); // John
console.log(person.privateName); // undefined

参考　function文 / 関数スコープとは？

privateName は関数内でのみ有効なので、これは外部から参照することはできないということです。

カプセル化の利点は「安全性: オブジェクトの内部状態が外部から直接変更されることを防ぐ」「メンテナンス性: 内部実装の変更が外部のコードに影響を与えにくくなる」「使用の単純化: 利用者はオブジェクトの公開インターフェースだけを理解すればOK（内部の複雑さを知る必要がない）」という点にあります。

カプセル化は、プログラムの堅牢性を高め、複雑性を管理するのに役立つ重要な概念です。JavaScriptではプライベートフィールドやクロージャを使った方法でカプセル化を実現し、より安全でメンテナンスしやすいコードを書くことができます。

ポリモーフィズム

ポリモーフィズム（多態性）は、異なるクラスのオブジェクトが同一のインターフェースやメソッドを通じて異なる動作をする能力を指します。ポリモーフィズムを利用することで、コードの再利用性を高め、柔軟性と拡張性を向上させることができます。

サンプル　ポリモーフィズムの例

class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows");
  }
}

function makeAnimalSpeak(animal) {
  animal.speak(); // 実行時にオブジェクトの実際のクラスに基づいて適切なメソッドが呼び出される
}

const dog = new Dog();
const cat = new Cat();

makeAnimalSpeak(dog); // 出力: Dog barks
makeAnimalSpeak(cat); // 出力: Cat meows

↑の例では、Animalクラスを継承したDogクラスとCatクラスが異なるspeakメソッドの実装を持っています。makeAnimalSpeak関数はAnimal型のパラメータを取りますが、実際にはそのサブクラスのインスタンスを受け取り、オーバーライドされたメソッドを実行します。これにより、異なるクラスのオブジェクトが同一のインターフェース（この場合はspeakメソッド）を通じて異なる動作を示すポリモーフィズムが実現されています。

ポリモーフィズムの主な形態

1. サブタイプポリモーフィズム（継承ポリモーフィズム）
   • サブタイプポリモーフィズムは、基底クラス（親クラス）の参照を通じて派生クラス（子クラス）のインスタンスを扱うことができる性質です。派生クラスは基底クラスのメソッドをオーバーライド（上書き）することで、異なる振る舞いを実現します。
2. アドホックポリモーフィズム（オーバーロードポリモーフィズム）
   • 同じ関数名でも、引数の型や数に応じて異なる処理を行うことを指します。JavaScriptでは関数のオーバーロードは直接的にはサポートされていませんが、引数の数や型をチェックすることで同様の動作を実現できます。

ポリモーフィズムを利用することで、プログラムの柔軟性を高め、異なるクラスのオブジェクトを一つのインターフェースを通じて扱うことが可能になります。これは、特に大規模なアプリケーションやライブラリの設計において、コードの簡潔さと再利用性の向上に寄与します。

静的メソッドとプロパティ

静的メソッドとプロパティは、クラスのインスタンスではなくクラス自体に属するメソッドとプロパティです。これらはクラスのインスタンスを生成することなく直接クラスからアクセスすることができます。静的メソッドとプロパティは、インスタンスに依存しない操作を行いたい場合や、クラスレベルで共有するデータを持つ場合に便利です。

静的メソッド

• 静的メソッドは、クラスのインスタンス化なしに呼び出すことができるメソッド。
• staticキーワードを使ってクラス内で定義されます。
• インスタンス固有のデータ（プロパティ）にはアクセスできませんが、静的プロパティにはアクセス可能です。
• ユーティリティ関数やファクトリーメソッドなど、インスタンスデータに依存しない処理を実装するのに適しています。

静的プロパティ

• 静的プロパティは、クラスのインスタンス間で共有されるクラスレベルのデータです。
• staticキーワードを用いて定義され、クラス名を通じてアクセスします。
• すべてのインスタンスに共通の値を保持したい場合や、設定値などをクラスに紐づけて管理したい場合に使用されます。

class MyClass {
  static staticProperty = 'クラスレベルのプロパティ';

  static staticMethod() {
    return '静的メソッドが呼び出されました';
  }
}

console.log(MyClass.staticProperty); // クラスレベルのプロパティ
console.log(MyClass.staticMethod()); // 静的メソッドが呼び出されました

この例では、MyClassに静的プロパティと静的メソッドを定義しています。これらはMyClassのインスタンスを生成せずに直接アクセスすることができます。

静的メソッドとプロパティは、インスタンスに依存しない操作を行いたい場合や、クラス全体で共有する情報を管理する場合に特に有用です。しかし、インスタンス固有のデータにアクセスする必要がある場合は、非静的メソッドやプロパティを使用する必要があります。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }

  static classification() {
    console.log('Animals are living beings.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // 出力: Rex barks.
Animal.classification(); // 出力: Animals are living beings.

アロー（英:arrow）関数とは、その名の通り（ => ）矢印を利用して関数のINPUT / OUTPUTを示す記述方法です。function式の記述が不当となるため、コードの短縮化・可読性の向上が見込めます。

アロー関数を理解するための前提となる知識も合わせて解説しております。JavaScript初心者の方であれば、知っておきたい基本知識ですので、是非最後までご覧ください。

【前提】関数宣言と関数式の違い

アロー関数を理解するには、関数とは何か？（関数宣言と関数式の違い）の問いに答えられるようになっておく必要があります。

この章では、簡単に前提知識をおさらいします。

関数宣言（function文）

関数宣言は、その名の通りfunction文を用いて関数を宣言する方法です。宣言した関数は、後から直接「関数名」を記述することで実行されます。

See the Pen function1 by ビズドットオンライン (@BizOnline) on CodePen.

そもそもfunction文って何？という方はこちらの記事をご覧ください。

【JavaScript】関数：functionの使い方とコツを３分でわかりやすく

【JavaScript入門】JavaScriptのfunction（関数）の意味と利用方法、コーディング方法を丸っと解説します。パラメータ（引数）の使い方やローカル変数/グローバル変数の差異など、function（関数）利用時に知っておきたい内容を３分でまとめます。

it-biz.online

2025.05.07

関数式とは？（無名関数 / 関数リテラル）

対して、関数式とは変数（もしくは定数）に関数を値として代入し、後からその変数を呼び出すことで関数を間接的に利用する方法です。

【JavaScript】関数式（無名関数）とは？関数宣言との違いを3分で解説

【JavaScript入門】JavaScriptにおける「関数宣言(Function Declaration)」と「関数式(Function Expression)」の違いを端的に分かりやすく解説します。関数式で用いられる無名関数（匿名関数）や、「巻き上げ」の有無についてサンプルコードを用いながら説明します。

it-biz.online

2024.03.29

関数式は、変数に関数のソースコードを直接べた書きし、その変数を呼び出すことで関数を実行する仕組みです。ソースコードを直接べた書きしているという点で、関数式は関数リテラルとも呼ばれます。

ちなみに、上記のコードを見ていただければわかるかと思いますが、関数定義時点で関数名を持たないため、その関数を無名関数（または匿名関数）と呼称します。

アロー関数とは？

アロー関数とは、関数式（関数リテラル）をさらに簡易的に記述するために用いられる技法です。

その名の通り矢印（=>）を使います。

See the Pen アロー関数 by ビズドットオンライン (@BizOnline) on CodePen.

functionを利用しない代わりに、引数の直後に "=>" を記述するだけです。

引数を用いる関数を例にもう１つサンプルコードを見てみましょう。

See the Pen アロー関数2 by ビズドットオンライン (@BizOnline) on CodePen.

アロー関数というと難しく感じてしまうかもしれませんが、実は非常に簡単です。考え方は、関数式と全く同じです。

引数が１つの場合　⇒　（　）を省略可能

アロー関数では、引数が１つの場合"( )"を省略することが可能です。

See the Pen アロー関数3 by ビズドットオンライン (@BizOnline) on CodePen.

本来であれば、「let sample2 = (n) => n * 2;」とすべきところ、「let sample2 = n => n * 2;」と記述できるようになります。

引数がない場合　⇒　(　)は必須

引数がない関数の場合には、必ず "( )" を記述する必要があります。

See the Pen アロー関数 by ビズドットオンライン (@BizOnline) on CodePen.

アロー関数を用いる際に誤りやすいポイントなので注意しましょう。

初心者にとってアロー関数は、少し理解しづらく読みづらいように感じてしまうことも多いかもしれません。しかし、実は慣れてくると結構読みやすくて使いやすい記述方式です。

今後のJavaScriptで関数を用いる際の主流になってくる可能性も高いのでぜひ今のうちに理解しておきましょう。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

JavaScriptで関数を用いる場合は以下の２通りのパターンが存在します。１つが、function命令を用いた「関数宣言」。もう１つが、関数を変数に値として代入する「関数式」です。

本ページの内容を理解する上で必要となる前提知識も本ページにすべて記載しております。JavaScript勉強中の方であれば、絶対に知っておきたい超・重要知識ですので、是非最後までご覧ください。

【前提】関数宣言とは？―function文

関数宣言は、その名の通りfunction文を用いて関数を宣言する方法です。宣言した関数は、後から直接「関数名」を記述することで実行されます。

関数宣言 (function declaration)

関数宣言は、「function 関数名」で関数を定義し、「関数名」で関数を呼び出す方法です。

See the Pen function1 by ビズドットオンライン (@BizOnline) on CodePen.

詳しくは、こちらの記事で解説しております。関数式を学習するまえに、まずは基本となる「関数宣言」についてマスターしておくことをおすすめします。

【JavaScript】関数：functionの使い方とコツを３分でわかりやすく

【JavaScript入門】JavaScriptのfunction（関数）の意味と利用方法、コーディング方法を丸っと解説します。パラメータ（引数）の使い方やローカル変数/グローバル変数の差異など、function（関数）利用時に知っておきたい内容を３分でまとめます。

it-biz.online

2025.05.07

関数式とは？

対して、関数式とは変数（もしくは定数）に関数を値として代入し、後からその変数を呼び出すことで関数を間接的に利用する方法です。

無名関数（匿名関数）について

関数宣言(function declaration)と関数式(function expression)の大きな違いは、関数名を必須とするかどうか？という点です。

関数宣言と関数式。両方の場合のコードをもう１度見てみましょう

//function（関数）の定義
function test(){
  document.write( 'Hello World!' );
}

//function（関数）の呼び出し
test();

対して、関数式(function expression)の例を見てみましょう。

et sample = function () {
  document.write( "Hello World!" );
}

sample();

※ちなみに、もちろん関数式の場合でも関数名を指定することは可能です。（以下のコードはエラーになりません。）

et sample = function sample2 () {
  document.write( "Hello World!" );
}

sample();

ただし、特殊な事情がない限り、わざわざ関数名を指定する必要はありません。基本的には、関数式を利用する際には、関数名を定義しない無名関数を利用する方針でOKです。

無名関数のメリット

無名関数の大きなメリットは、関数利用時に名前を考える必要がないということです。

実際にコーディングをしていくようになれば分かりますが、この名前を付けるという作業は結構面倒なのです。「短く」「分かりやすい」名称の関数を考えるだけで、初心者コーダーほど時間を奪われがちです。

ただし、関数の中には名前を付けるほどでもない些細な処理しか行わない関数もあるのは事実。無名関数の大きな存在意義はここにあると言えます。

関数宣言と関数式―巻き上げの有無

最後に、関数宣言と関数式の知っておくべき重要な違い「巻き上げの有無」について解説します。

巻き上げとは、JavaScriptでプログラムの読み込み順序が逆転する現象のことです。

通常、プログラムは「上から下へ実行」されるのですが、一部例外があり下の方に書かれている内容から実行される場合があります。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

参考　プログラミングにおける「変数」とは？

function testVar() {
  var x = 1;
  if (true) {
    var x = 2; // 同じ変数xを再宣言しています
    console.log(x); // 出力: 2
  }
  console.log(x); // 出力: 2 (関数スコープのため、ifブロック外でも値は2)
}

testVar();

function testLet() {
  let y = 1;
  if (true) {
    let y = 2; // ブロックスコープ内で新たにyを宣言
    console.log(y); // 出力: 2
  }
  console.log(y); // 出力: 1 (ブロックスコープのため、元のyの値は変わらない)
}

testLet();

function testConst() {
  const z = 1;
  console.log(z); // 出力: 1

  // z = 2; // エラー: "z" is read-only

  if (true) {
    const z = 2; // ブロックスコープ内で新たにzを宣言
    console.log(z); // 出力: 2
  }
  console.log(z); // 出力: 1 (ブロックスコープのため、元のzの値は変わらない)
}

testConst();


const obj = { key: 'value' };
console.log(obj.key); // 出力: value

obj.key = 'newValue'; // オブジェクトのプロパティは変更可能
console.log(obj.key); // 出力: newValue

// obj = {}; // エラー: "obj" is read-only

結論を超ザックリいえば、変数宣言するなら「let」。定数を宣言するなら「const」。「var」は古い宣言方法なので基本使わない！と覚えればOK。そのうえで、古いコードでは「var」も使われているから一応理解しておきましょう！という内容です。

1. 関数スコープ
   • 宣言された変数が関数内でのみ参照可能
2. ブロックスコープ
   • 宣言された変数がブロック（{}で囲まれた範囲）内でのみ参照可能
3. 再代入可能
   • 変数に値を再度割り当てることが可能
4. 巻き上げ
   • 変数宣言がコード実行前にトップに移動されるJavaScriptの挙動

このページではvar, let, constがどのように使われるべきか、それぞれの選択がプログラミング上でどのような影響を与えるかについて深く掘り下げていきます。正しい変数宣言方法の選択は、エラーを減らし、コードの可読性を高める重要なステップです。それぞれの使い方・特徴・制限をしっかりおさえておきましょう！

それでは、各キーワードの詳細な解説を始めます。

参考　【JavaScript入門】基本文法/基礎文法を5分で復習

JavaScriptの変数宣言：var

JavaScriptでは、varキーワードを使用して変数を宣言することができます。この変数には数値、文字列、オブジェクトなど、どのようなタイプの値も格納することが可能です。

冒頭でも述べた通り、varはJavaScriptで最も古い変数宣言のキーワードです。ちょっと厄介な性質を持つので今ではあまり利用されませんが、古いコードではvarが利用されているシーンもあるので一応冒頭で解説しておきます。

サンプルコード　基本的な宣言と使用

var message = 'こんにちは、世界！';
console.log(message); // 出力: こんにちは、世界！

↑のコードでは、messageという名前の変数を宣言し、文字列'こんにちは、世界！'を代入しています。console.logを使ってこの変数の内容をコンソールに出力すると文字列'こんにちは、世界！'が表示されるという簡単なコードです。

ちなみに、変数というのは値を入れておく「箱」のようなもので、この「箱」の中に入っているデータを変えたり参照したりすることで１つのプログラムが動いていきます。プログラムで計算を行う際、文字列を操作する際など、ありとあらゆる場面で一般的に利用される概念です。詳しくはこちら（変数とは？）で解説します。

console.log("Hello, world!"); // 文字列をコンソールに出力します。

var number = 5;
console.log(number); // 変数numberの値をコンソールに出力します。

var obj = { name: "John", age: 30 };
console.log(obj); // オブジェクトの内容をコンソールに出力します。

var：変数の再代入

varで宣言された変数は後から値を変更することができます。

これを「再代入」と呼びます。

サンプルコード　変数の再代入

var number = 10;
console.log(number); // 出力: 10

number = 20;
console.log(number); // 出力: 20

最初にnumber変数に10を代入。次に20を再代入しています。varは何度でもこの値を変更することができ、プログラムの要求に応じて自由に再代入を繰り返すことが可能です。

これは、後述するconstキーワード（再代入ができない）とは異なる特徴を持ちますのでしっかりと頭に入れておきましょう。

var：巻き上げ（Hoisting）

varで宣言された変数は「巻き上げ」されます。「巻き上げ（Hoisting）」は、JavaScriptでの変数宣言や関数宣言がコード実行前にそのスコープの最上部に移動されるように見える挙動を指します。

ザックリいえば、どこで変数宣言しても、コード（もしくはそのスコープ内）の１番上で実行されるということ。

サンプルコード　巻き上げの挙動

console.log(myVar); // 出力: undefined

var myVar = '変数は巻き上げられます。';

console.log(myVar); // 出力: 変数は巻き上げられます。

↑の例では、myVar変数が宣言される前にconsole.logで参照されています。通常のプログラミング言語の場合、宣言される前の変数が参照された場合にはエラーが発生しプログラムはストップすることが多いのですが、JavaScriptは変数myVarを巻き上げるため、最初のconsole.logはundefinedを出力する形でエラーが発生しません。

参考　JavaScriptのデータ型：undefined

この「巻き上げ」が意図するものである場合は問題ありませんが、undefinedを出力するシーンというのは一般的には多くはない→つまり、コーディングミスであるにも関わらず、エラーが発生しないため、バグが多発してしまう・・・という欠点があります。

そのため「var」は現代ではあまり利用されず「const」が変数宣言としてポピュラーです。

var：関数スコープ

varで宣言した変数は関数スコープを持ちます。→関数内で宣言された変数は、その関数内部からのみアクセス可能であるということ。

参考　関数とは？

サンプルコード　関数スコープの例

function sayHello() {
  var greeting = 'Hello World!';
  console.log(greeting); // 出力: Hello World!
}

sayHello();
console.log(greeting); // エラー: greeting is not defined

参考　関数：function文

↑の例では、greeting変数はsayHello関数内で宣言されています。そのため、関数の外部からgreetingにアクセスしようとすると、エラーが発生します。

JavaScriptの変数宣言：let

JavaScriptでのletキーワードの使用は、varに比べてより現代的な変数宣言の方法です。letによる変数宣言は特にブロックスコープを利用することが大きな特徴。この章では、letの使い方について解説します。

サンプルコード　基本的な宣言と使用

let message = 'こんにちは、世界！';
console.log(message); // 出力: こんにちは、世界！

このコードでは、messageという名前の変数をletで宣言し、文字列'こんにちは、世界！'を代入しています。この変数は、宣言された場所からアクセス可能です。

宣言する際の基本的な構文ルールとしては「var」と相違ありません。

let：ブロックスコープ

letで宣言された変数はブロックスコープを持ちます。分かりやすく言い換えると、変数が{}で囲まれたブロック内でのみアクセス可能であるということ。

varが持つ関数スコープ（変数はその変数が宣言された関数全体からアクセス可能）とは異なり、ブロックスコープではより限定的な範囲で変数を制限することができます。

サンプルコード　ブロックスコープ内での使用

function testScope() {
  if (true) {
    let blockScopedVar = '私はこのブロック内でのみ存在します';
    console.log(blockScopedVar); // 出力: 私はこのブロック内でのみ存在します
  }

  // console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

}

testScope();

参考　JavaScript:if文

↑の例では、blockScopedVar変数はif文のブロック内でletを使って宣言されています。この変数はブロック内部からのみアクセス可能であり、ブロックの外側からは参照することができません。もしブロックの外側でblockScopedVarにアクセスしようとすると、ReferenceErrorが発生します。

letのこの挙動は、プログラムの特定の部分でのみ変数を使用したい場合に有用であり、変数のスコープをより細かく管理することを可能にします。

let：変数の再代入

letで宣言された変数も、varと同様で再代入が可能です。ただし、同じスコープ内で同じ名前の変数を再宣言することはできません。

サンプルコード　再代入の例

let number = 10;
console.log(number); // 出力: 10

number = 20;
console.log(number); // 出力: 20

let number = 30; // エラー: 'number' has already been declared

最初にnumberに10を代入し次に20を再代入しています。ただし、再度同じ名称のnumberを再宣言しようとするとエラーが発生します。これはvarとは異なる挙動のためしっかりと頭に入れておきましょう。

逆に言うと、同じ「箱」を何個も作れないようになっているので、その分プログラム全体が綺麗になります。var は同じ名前でいくらでも変数を作れてしまうので、バグが大量発生→let が誕生という経緯です。

ポイント　letの使用時の注意点

• letで宣言された変数はブロックスコープを持つため使用する際はスコープに注意。
• 再宣言はできないため、同じ名前の変数を同一スコープ内で使用する際には注意が必要。
• letはモダンなJavaScript開発においてvarの代替として推奨されている。

letを使用することで、コードの可読性と保守性が向上し、特に複雑なアプリケーションを開発する際にバグを減らすことができます。

var myVar = 1;
var myVar = 2; // 再宣言可能
console.log(myVar); // 出力: 2

JavaScriptの「定数」宣言：const

JavaScriptにおけるconstキーワードは「定数を宣言する」ために使用されます。constで宣言された変数は再代入が不可能で、ブロックスコープのルールに従います。これは一度値が割り当てられると、その変数の値を変更することができないことを意味します。

constの使用は、プログラム内で変更されるべきではない値を扱う際に非常に便利です。

サンプルコード　基本的な宣言

const greeting = 'こんにちは、世界！';
console.log(greeting); // 出力: こんにちは、世界！

const greeting = 10;
// greeting = 20; // TypeError: Assignment to constant variable.

↑のコードでは、greetingという名前の定数をconstで宣言し、文字列'こんにちは、世界！'を代入しています。constで宣言された後は値を変更することはできません。無理やり変えようとしてもエラーが発生するだけです。

const：ブロックスコープ

constで宣言された変数もletと同様にブロックスコープを持ちます。→変数が定義されたブロック（{}で囲まれた範囲）内でのみアクセス可能であるということです。

サンプルコード　ブロックスコープの例

{
  const localMessage = 'ブロック内のメッセージ';
  console.log(localMessage); // 出力: ブロック内のメッセージ
}
// console.log(localMessage); // エラー: localMessage is not defined

↑の例では、localMessage定数はブロック内でconstによって宣言されています。ブロックの外からはアクセスできません。

const：再代入の禁止

先ほども解説した通りなので、再度ご説明。constで宣言された変数は、再代入することができません。試みると、エラーが発生します。

サンプルコード　再代入の試み

const number = 10;
console.log(number); // 出力: 10

// number = 20; // エラー: Assignment to constant variable.

number定数に10を代入した後、20に値を変更しようとすると、JavaScriptエンジンはエラーを投げます。

ポイント　constの使用時の注意点

• constで宣言された変数は再代入が不可能ですが、オブジェクトや配列のプロパティは変更できます。
• 初期化時に値を割り当てる必要があります。宣言のみで初期化を行わないとエラーになります。

const settings = { volume: 10, brightness: 70 };
settings.volume = 20; // これは可能
console.log(settings); // 出力: { volume: 20, brightness: 70 }

constはプログラム内の固定値を扱う際に非常に役立ち、コードの意図を明確にすることができます。値が変更されることを期待しない変数にconstを使用することで、プログラムの安全性と可読性を高めることができます。

function testVar() {
  var x = 1;
  if (true) {
    var x = 2; // 同じ変数xを再宣言しています
    console.log(x); // 出力: 2
  }
  console.log(x); // 出力: 2 (関数スコープのため、ifブロック外でも値は2)
}

testVar();

function testLet() {
  let y = 1;
  if (true) {
    let y = 2; // ブロックスコープ内で新たにyを宣言
    console.log(y); // 出力: 2
  }
  console.log(y); // 出力: 1 (ブロックスコープのため、元のyの値は変わらない)
}

testLet();

function testConst() {
  const z = 1;
  console.log(z); // 出力: 1

  // z = 2; // エラー: "z" is read-only

  if (true) {
    const z = 2; // ブロックスコープ内で新たにzを宣言
    console.log(z); // 出力: 2
  }
  console.log(z); // 出力: 1 (ブロックスコープのため、元のzの値は変わらない)
}

testConst();


const obj = { key: 'value' };
console.log(obj.key); // 出力: value

obj.key = 'newValue'; // オブジェクトのプロパティは変更可能
console.log(obj.key); // 出力: newValue

// obj = {}; // エラー: "obj" is read-only

スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）

参考　JavaScriptの変数の基本

配列（Array）は複数のデータを１つの変数名で管理するためのデータ構造。そのため、変数だけでは表現できない複数の値のセット（都道府県の一覧や、西暦の一覧とか）を表現することが可能になります。

このページでは、プログラミング初心者向けでも理解できるよう「配列とは何か」という基本的な内容についても補足しつつ、JavaScriptでの実践的な利用方法をサンプルコード付きでわかりやすく解説します。

// 配列の宣言
let fruits = ["Apple", "Banana", "Cherry"]; // 配列リテラルを使用
let numbers = new Array(1, 2, 3); // Array コンストラクタを使用

// 配列へのアクセス
console.log(fruits[0]); // "Apple"
console.log(numbers.length); // 3

// 配列の操作
// 追加
fruits.push("Durian"); // 末尾に追加
fruits.unshift("Strawberry"); // 先頭に追加

// 削除
fruits.pop(); // 末尾の要素を削除
fruits.shift(); // 先頭の要素を削除

// 検索
let index = fruits.indexOf("Banana"); // "Banana"のインデックスを検索
let hasApple = fruits.includes("Apple"); // "Apple"が含まれているか確認

// ソート
numbers.sort((a, b) => a - b); // 昇順でソート

// 変換
let doubledNumbers = numbers.map(number => number * 2); // 各要素を2倍にする

// 結合
let allFruits = fruits.concat(["Mango", "Pineapple"]); // 他の配列と結合

// 分割
let firstTwoFruits = fruits.slice(0, 2); // 最初の2つの要素を抽出

// 結果を表示
console.log(fruits);
console.log(numbers);
console.log(doubledNumbers);
console.log(allFruits);
console.log(firstTwoFruits);

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

そもそも配列とは何か？

配列とは簡単に言うと「物事を一列に並べたもの」です。日常生活での例を挙げるなら、本棚に並べられた本の列や、スーパーマーケットのレジに並ぶ人々の列が分かりやすい例かもしれません。これらの例は、本や人がそれぞれ１つ１つの要素として配列に並んでいます。

JavaScriptや他のプログラミング言語における配列もこの概念を踏襲しています。配列は、数字、文字列、オブジェクトなど、異なるデータ型の要素を含むことができる箱のようなもの。配列を使うことで、複数の要素を一つの変数に格納し、それらを一括で管理することが可能になります。

例えば、5人の生徒の名前を管理する場合、各生徒の名前を別々の変数に保存する代わりに、配列を使用して１つの変数にすべての名前を格納することができます。この場合、配列を使うことで、コードをシンプルに保ちながら効率的にデータを扱うことができます。

let 生徒の名前 = ["佐藤", "鈴木", "高橋", "田中", "伊藤"];

JavaScript：配列の宣言

JavaScriptで配列を作成する方法はいくつかありますが、主に以下の2つの方法が最も一般的に使用されます。

1. 配列リテラルの使用　←こちらが主流
2. Array コンストラクタの使用

１つ１つ順を追って説明します。

パターン1：配列リテラルの使用

配列リテラルとは[]のこと。[]内に要素を列挙することで配列を直接定義することができます。これはJavaScriptにおける配列を作成する最も簡単で読みやすい方法で現在広く一般的に用いられている方法です。

配列リテラルを使用することで、初期値を持つ配列を即座に作成できます。

let numbers = [1, 2, 3, 4, 5];
let fruits = ["Apple", "Banana", "Cherry"];

letキーワードを利用し変数と同じように宣言することで、例えば↑では「1」「2」「3」「4」「5」という５つの値を持つ「numbers」という配列を宣言しています。

let mixedArray = [1, "Hello", true, { name: "John" }, [1, 2, 3]];

↑のmixedArrayは、JavaScriptにおける配列の柔軟性と動的な特徴を示す１つの例で、配列が異なるデータ型の要素を同時に保持できることを示しており、以下のような異なる型の5つの要素を含んでいます。

1. 数値 (1)
2. 文字列 ("Hello")
3. ブーリアン (true)
4. オブジェクト ({ name: "John" })
5. 配列 ([1, 2, 3])

数値や文字列といった基本的なJavaScriptのデータ型はもちろん、オブジェクトやさらに別の配列をネストすることもできます。JavaScriptの配列は非常に柔軟に扱うことができ、異なる型の要素を同一の配列内に混在させることができるため、複雑なデータ構造を容易に構築することができます。

あまり複雑な構造にしてしまうとかえってコード全体が読みにくくなってしまうという欠点はありますが、シーンに応じて自由なデータ構造を扱えるというのはJavaScriptの大きなメリットの１つです。

ちなみに、空の配列を作成することもできます。

let emptyArray = [];

空の配列は、初めは何も持っていないけれど、後からデータが集まってくるような状況で利用します。買い物に行くときの買い物かごのようなもので、店に入ったときは空ですが、店内を回りながら必要なものをかごに入れていく、そんな感じです。

パターン2：Array コンストラクタの使用

Array コンストラクタを使用して配列を作成する方法もあります。new Array()により、新しい配列インスタンスが生成されます。この方法は、特定の長さの配列を事前に確保したい場合や、コンストラクタに渡した単一の数値引数によって配列のサイズを指定したい場合に便利です。

let arrayWithSize = new Array(5); // 長さが5の空の配列を作成
let arrayWithElements = new Array("Apple", "Banana", "Cherry");

ただし、この方法には以下のような注意点があります。

注意点１　単一数値引数の挙動

Array コンストラクタに単一の数値引数を渡すと、その数値に応じた長さを持つ空の配列が生成されます。この挙動は、他のデータ型の引数を渡した時とは異なり直感的でない結果をもたらすことがあります。

let array = new Array(5);
console.log(array); // [ <5 empty items> ]
console.log(array.length); // 5

この例では、長さが5であるが内容が未定義の要素を持つ配列が作成されます。配列に実際のデータが含まれていないため、この特性は混乱を招く可能性があります。

注意点２　数値以外または複数の引数

Array コンストラクタに数値以外の引数、または複数の引数を渡すと、それらの引数を要素とする配列が生成されます。

let arrayWithStrings = new Array("Apple", "Banana", "Cherry");
console.log(arrayWithStrings); // ["Apple", "Banana", "Cherry"]

Array コンストラクタのこれらの特性を理解し、それぞれのケースにおいて最適な方法を選択することが、効率的かつバグの少ないコードを書くための鍵です。

JavaScript：配列へのアクセス

配列の特定の要素にアクセス（＝参照）するには、配列名の後に[インデックス]を記述します。インデックスは0から始まるため、配列の最初の要素にアクセスするには[0]を、2番目の要素にアクセスするには[1]を使用します。

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // 最初の要素にアクセス: "Apple"
console.log(fruits[1]); // 2番目の要素にアクセス: "Banana"

配列の特定の要素を変更する場合も、同様にインデックスを使用します。指定したインデックスの位置に新しい値を代入することで、元の値を上書きします。

let fruits = ["Apple", "Banana", "Cherry"];

fruits[2] = "Durian"; // 3番目の要素を"Durian"に変更
console.log(fruits); // ["Apple", "Banana", "Durian"]

配列の長さとアクセス

JavaScriptの配列は動的な長さを持ちます。lengthプロパティを使用して、配列の長さを取得することができます。これを利用して、配列の最後の要素にアクセスしたり、ループで配列をイテレートする際に便利です。

console.log(fruits.length); // 配列の長さを取得: 3
let lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // 配列の最後の要素にアクセス: "Durian"

不正なインデックスへのアクセス

存在しないインデックスへのアクセスを試みると、undefinedが返されます。これは、配列の範囲外の要素にアクセスしようとしたときのJavaScriptの挙動です。

console.log(fruits[5]); // 存在しない要素にアクセス: undefined

まとめると、JavaScriptで配列へアクセスするにはインデックスを用いるということ。インデックスを適切に利用することで、任意の位置にある要素を効率的に読み書きすることが可能になります。配列の動的な性質を理解し、lengthプロパティや適切なインデックスを使いこなすことで、配列の操作がより柔軟になります。

JavaScript：配列の操作

配列を操作するための方法は多岐にわたります。（データの追加、削除、検索、ソート、変換など）

ここでは、より詳細にいくつかの主要な操作方法について解説します。

配列への追加と削除

ポイント１　push()

配列の末尾に１つ以上の要素を追加し、新しい長さを返します。

let numbers = [1, 2, 3];
numbers.push(4); // 配列の末尾に4を追加
console.log(numbers); // [1, 2, 3, 4]

ポイント２　pop()

配列の末尾から要素を削除し、その要素を返します。

let numbers = [1, 2, 3];
numbers.push(4); // 配列の末尾に4を追加
console.log(numbers); // [1, 2, 3, 4]

numbers.pop(); // 末尾の要素4を削除
console.log(numbers); // [1, 2, 3]

ポイント３　unshift()

配列の先頭に１つ以上の要素を追加し、新しい長さを返します。

let numbers = [1, 2, 3];
numbers.push(4); // 配列の末尾に4を追加
console.log(numbers); // [1, 2, 3, 4]

numbers.pop(); // 末尾の要素4を削除
console.log(numbers); // [1, 2, 3]

numbers.unshift(0); // 配列の先頭に0を追加
console.log(numbers); // [0, 1, 2, 3]

ポイント４　shift()

配列の先頭から要素を削除し、その要素を返します。

let numbers = [1, 2, 3];
numbers.push(4); // 配列の末尾に4を追加
console.log(numbers); // [1, 2, 3, 4]

numbers.pop(); // 末尾の要素4を削除
console.log(numbers); // [1, 2, 3]

numbers.unshift(0); // 配列の先頭に0を追加
console.log(numbers); // [0, 1, 2, 3]

numbers.shift(); // 先頭の要素0を削除
console.log(numbers); // [1, 2, 3]

配列の要素検索

ポイント１　indexOf()

指定された要素を配列内で検索し、見つかった場合はそのインデックスを、見つからない場合は-1を返します。

let numbers = [1, 2, 3];

let index = numbers.indexOf(2);
console.log(index); // 1

ポイント２　find()

テスト関数に合格する最初の要素の値を返します。該当する要素がなければundefinedを返します。

let numbers = [1, 2, 3];

let index = numbers.indexOf(2);
console.log(index); // 1

let found = numbers.find(element => element > 2);
console.log(found); // 3

ポイント３　includes()

配列が特定の要素を含んでいるかどうかを確認します。含んでいればtrue、そうでなければfalseを返します。

let numbers = [1, 2, 3];

let index = numbers.indexOf(2);
console.log(index); // 1

let found = numbers.find(element => element > 2);
console.log(found); // 3

console.log(numbers.includes(2)); // true

配列のソート

ポイント１　sort()

配列の要素をその場でソートし、ソートされた配列を返します。デフォルトでは文字列としてソートされますが、比較関数を提供することで数値のソートなどカスタマイズできます。

let unsortedNumbers = [4, 1, 3, 2];
unsortedNumbers.sort((a, b) => a - b); // 数値の昇順でソート
console.log(unsortedNumbers); // [1, 2, 3, 4]

配列の変換

ポイント１　map()

配列内の全ての要素に対して与えられた関数を呼び出し、その結果からなる新しい配列を生成します。

let numbers = [1, 2, 3];

let doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6]

ポイント２　filter()

テスト関数を満たすすべての要素からなる新しい配列を生成します。

let numbers = [1, 2, 3];

let filtered = numbers.filter(number => number > 1);
console.log(filtered); // [2, 3]

配列の結合と分割

ポイント１　concat()

１つまたは複数の配列を結合して、新しい配列を作成します。

let numbers = [1, 2, 3];

let moreNumbers = [4, 5];
let combined = numbers.concat(moreNumbers);
console.log(combined); // [1, 2, 3, 4, 5]

ポイント２　slice()

配列の一部を抜き出して新しい配列オブジェクトを返します。元の配列は変更されません。

let numbers = [1, 2, 3];

let sliced = numbers.slice(1, 3); // index 1から3までの要素を抽出（3は含まれない）
console.log(sliced); // [2, 3]

これらは配列を操作するための基本的なメソッドの一部です。これらのメソッドを適切に組み合わせて使用することで、複雑なデータ構造の操作やデータの処理が可能になります。

// 配列の宣言
let fruits = ["Apple", "Banana", "Cherry"]; // 配列リテラルを使用
let numbers = new Array(1, 2, 3); // Array コンストラクタを使用

// 配列へのアクセス
console.log(fruits[0]); // "Apple"
console.log(numbers.length); // 3

// 配列の操作
// 追加
fruits.push("Durian"); // 末尾に追加
fruits.unshift("Strawberry"); // 先頭に追加

// 削除
fruits.pop(); // 末尾の要素を削除
fruits.shift(); // 先頭の要素を削除

// 検索
let index = fruits.indexOf("Banana"); // "Banana"のインデックスを検索
let hasApple = fruits.includes("Apple"); // "Apple"が含まれているか確認

// ソート
numbers.sort((a, b) => a - b); // 昇順でソート

// 変換
let doubledNumbers = numbers.map(number => number * 2); // 各要素を2倍にする

// 結合
let allFruits = fruits.concat(["Mango", "Pineapple"]); // 他の配列と結合

// 分割
let firstTwoFruits = fruits.slice(0, 2); // 最初の2つの要素を抽出

// 結果を表示
console.log(fruits);
console.log(numbers);
console.log(doubledNumbers);
console.log(allFruits);
console.log(firstTwoFruits);

参考　データ型とは？

データ型とは、変数や値が持つことができる「種類」を指します。数値、文字列、ブーリアン（true/false）といった基本的なデータ型から、より複雑なオブジェクトや関数に至るまで、JavaScriptでは多様なデータ型を扱うことができます。

このページでは、JavaScriptの基本的なデータ型とそれぞれの型がどのように使われるのか、また型変換および動的型付けという概念ついても触れていきます。JavaScriptのデータ型を理解することは、より効率的にコードを書き、エラーを減らすための第一歩。この記事を通して、JavaScriptの基礎を固めておきましょう！

上記のデータ型の制限と取り扱いを１個１個丁寧に解説します。まずは、JavaScriptの特徴の１つ「動的型付け」の概念から解説を始めます。

参考　HTML CSS JavaScriptの違い・役割を３分で解説

JavaScriptの「動的型付け」

JavaScriptは動的型付け言語に分類されます。動的型付けとはその名の通りプログラムの実行過程で「自動的にデータ型が設定される」ということ。

JavaScriptエンジンは、コードの実行時に変数の型を推測して決定します。例えば、数値を代入するとその変数は自動的に数値型に。後にその変数に文字列を代入すれば、型は文字列型に変わります。動的型付けを行わないプログラミング言語では変数の宣言時に必ずデータ型を指定する必要がありますが、JavaScriptではこのデータ型の宣言が必須ではありません。

これは数値を入れる変数（＝箱だよ）！というのが一般的だったりするのですが、JavaScriptでは「あいうえお」が入っているということは文字列（string）だな！というように判断するということです。

参考　let（変数の宣言）

この特性はJavaScriptの柔軟性の１つで、開発者がより速くコードを書けるようにする一方で、型関連のエラーを引き起こしやすくしてします。本当は「10」という値を文字列として扱いたいのに自動的に数値として定義してしまい後からバグになってしまう・・・というような感じですね。

ちなみに、JavaScriptのこの性質を回避し「自分で明示的にデータ型を指定する」ように発展させた言語にTypeScriptというものがあります。ある意味で１つの言語を作り出してしまうほど、動的型付けは便利でやっかいな性質を持つということ。

「動的型付け」の理解はそれだけ重要なんだな！と理解しましょう！

早速JavaScriptの動的型付けを理解するために、いくつかのサンプルコードを通じて実例をお見せします。↓の例を確認しながら、JavaScriptがどのように変数の型を実行時に決定するか？に注目してください。

サンプルコード　変数に異なる型の値を代入

let data = 42; // 最初は数値型
console.log(typeof data); // 出力: "number"

data = "JavaScript"; // 同じ変数に文字列を代入
console.log(typeof data); // 出力: "string"

↑の例では、data 変数が最初に数値型(number)であることを typeof 演算子で確認しています。その後、同じ変数に文字列を代入しており、typeof で確認すると、変数の型が動的に文字列型(string)に変更されていることがわかります。

つまり、42 は数値なのでJavaScriptではその変数を「数値型」として扱っていたが、後から「"JavaScript"」が代入されたので今度は「文字列型」として扱うようになったということ。

このように、JavaScriptでは自動的に変数のデータ型を決定・変換します。

let example = "こんにちは";
console.log(typeof example); // 出力: "string"

サンプルコード　動的型付けによる演算

let result = 5 + 7; // 数値同士の加算
console.log(result); // 出力: 12

result = "5" + 7; // 文字列と数値の加算（連結）
console.log(result); // 出力: "57"

result = "5" * "2"; // 文字列の乗算（数値に変換されて計算）
console.log(result); // 出力: 10

↑の例では、JavaScriptがどのように異なる型の値を扱うかを示しています。注目すべきポイントは、文字列と数値を+演算子で結合すると、数値が文字列に変換され結果として文字列が返される点です。また、*演算子を使用した場合、文字列が数値に暗黙的に変換され、計算が実行される点に注目しましょう。

動的型付けのメリット

動的型付けのメリットは、データ型を強く意識することなくコーディングが可能になるという点です。「そもそもデータ型って何？」というのをそこまで理解していなくても感覚的にコーディングすることが可能になることが１番のメリットだと言えます。

1. 柔軟性: 変数に異なる型のデータを自由に代入できるため、開発が迅速に行えます。
2. 簡潔さ: 型宣言が不要なため、コードが簡潔になります。

動的型付けのデメリット

逆に動的型付けのデメリットは、自動的にデータ型が決定される故に「意図しないデータ型変換が行われてしまう」という点。本当は「001」という値を文字列として扱いたかったが、数値型に変換され「1」として演算されてしまうようなバグが発生するイメージです。

1. 型安全性の欠如: コンパイル時ではなく、実行時に型エラーが発生する可能性があるため、バグを見つけにくくなる場合があります。
2. パフォーマンス: 型チェックが実行時に行われるため、パフォーマンスに影響を与えることがあります。

JavaScriptの動的型付けは変数がプログラム実行中にさまざまな型のデータを保持できる柔軟性を提供します。しかしこの柔軟性は型関連のバグを引き起こす可能性もあるため、開発者は型変換の仕組みと、それに伴う挙動を正確に理解しておく必要があります。上記のサンプルコードを参考に、動的型付けの概念を探索し、JavaScriptでの効率的なコーディングに活かしてください。

JavaScriptのデータ型

JavaScriptでは基本となるデータ型が6つあります。この６つのデータ型をしっかり理解し適切に使い分けることでJavaScriptのコーディングスキルが徐々に向上していくことでしょう。

１つ１つサンプルコード付きでわかりやすく解説していきます。

数値 (Number)

JavaScriptにおける数値(Number)型は、整数や浮動小数点数を含む幅広い数値を扱うことができるデータ型です。数値型は演算、金額の計算、測定値の処理など、多岐にわたる用途で使用されます。JavaScriptの数値は内部的には64ビットの浮動小数点形式で表現され、非常に大きな数値や非常に小さな数値の精密な表現が可能です。ここでは、数値型の特徴と使用方法について詳しく見ていきましょう。

let decimal = 42; // 10進数の整数
let hex = 0x2A; // 16進数の整数（42と等価）
let octal = 0o52; // 8進数の整数（42と等価）
let binary = 0b101010; // 2進数の整数（42と等価）
let floatingPoint = 3.14; // 浮動小数点数
let bigNumber = 2.99792458e8; // 光速（m/s）を指数表記で

console.log(decimal, hex, octal, binary, floatingPoint, bigNumber);

// 特別な数値の例
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log("not a number" / 2); // NaN

ポイント　数値の表現

1. 整数
   • 10進数、16進数（0xで始まる）、8進数（0oで始まる）、2進数（0bで始まる）のリテラルを使用して表現可能。
2. 浮動小数点数
   • 小数点を含む数値や、指数表記（eまたはEを使用）で表される数値。

ポイント　特別な数値

1. Infinity
   • 無限大を表す特別な値で、何かを0で割ったときなどに発生する。
2. -Infinity
   • 負の無限大を表す。
3. NaN (Not a Number)
   • 「数値ではない」という特別な値で、数学的に無効な操作の結果として返される。

JavaScriptの数値型は、その柔軟性と包括性により、さまざまな数値計算を可能にしますが、特別な数値や精度の問題に注意が必要です。

文字列：String

文字列(String)型は、テキストデータを扱うためのデータ型です。文字列型は、文字の列（例: "こんにちは"、"Hello, world!"）を表現し、Webページ上のテキスト表示、ユーザー入力の処理、テキストベースのデータの操作など、多くの場面で使われます。文字列は、シングルクォート(')、ダブルクォート(")、またはバックティック(``)で囲むことによって作成されます。

シングルクォートとダブルクォートは、基本的に同じように文字列を定義しますが、テキスト内でクォートを使用したい場合は、異なる種類のクォートを外側と内側で使い分けることが一般的です。

let singleQuoted = 'テキスト';
let doubleQuoted = "テキスト";
let withQuotes = 'シングルクォート\' とダブルクォート"';
console.log(singleQuoted, doubleQuoted, withQuotes);

ダブルクォーテーションでも、シングルクォーテーションでも意味は全く同じです。ただし、両者を併用することはできません。

let strNG = "Hello World!!';　//"と`は併用できません。

文字列の操作

JavaScriptのStringオブジェクトには、文字列を操作するための多くのメソッドが用意されています→テキストの検索、置換、分割、結合などが容易に行えます。

• 検索
  • indexOf(), includes() などを使用して、特定の文字列が含まれているかを検索。

let sentence = "Hello, JavaScript!";
let searchWord = "Java";

// 文字列が含まれるか確認
console.log(sentence.includes(searchWord)); // 出力: true

// 特定の文字列が最初に現れる位置を検索
console.log(sentence.indexOf("Java")); // 出力: 7
console.log(sentence.indexOf("python")); // 存在しない場合は-1を返す 出力: -1

• 置換
  • replace() を使用して、文字列内の一部を置き換える。

let oldString = "Hello, JavaScript!";
let newString = oldString.replace("JavaScript", "World");

console.log(newString); // 出力: "Hello, World!"

• 分割
  • split() を使用して、文字列を配列に分割する。

let fruits = "apple,orange,banana,grape";
let fruitArray = fruits.split(",");

console.log(fruitArray); // 出力: ["apple", "orange", "banana", "grape"]

• 結合
  • + 演算子や concat() メソッドを使用して、複数の文字列を結合。

let firstName = "Taro";
let lastName = "Yamada";
let fullName = firstName + " " + lastName; // + 演算子による結合

console.log(fullName); // 出力: "Taro Yamada"

// `concat` メソッドによる結合
let greeting = "Hello, ";
console.log(greeting.concat(fullName)); // 出力: "Hello, Taro Yamada"

• 切り出し
  • substring(), slice() などを使用して、文字列の一部を切り出す。

let sentence = "Hello, JavaScript!";
// `substring` を使用した切り出し
console.log(sentence.substring(7, 11)); // 出力: "Java"

// `slice` を使用した切り出し
console.log(sentence.slice(7, -1)); // "JavaScript" の最後の"!"を除いて全てを取得

文字列の不変性

JavaScriptの文字列は不変（immutable）です。つまり、文字列が一度作成されると、その文字列を直接変更することはできません。文字列を変更するには、新しい文字列を作成する操作が必要です。

let original = "Hello";
let modified = original.replace("H", "J");
console.log(original); // "Hello"
console.log(modified); // "Jello"

論理型：Boolean

論理型（Boolean型）は、真偽値を扱うデータ型であり、true（真）またはfalse（偽）のいずれかの値を取ります。この型は、条件分岐やループの制御、論理演算など、プログラムの流れを決定する際に重要な役割を果たします。

Boolean型の値は、直接trueまたはfalseを使用するか、Boolean()関数を用いて他のデータ型の値をBoolean型に変換することで作成できます。

let isTrue = true;
let isFalse = false;

// Boolean()関数を使った変換例
let truthyValue = Boolean(1); // 数値の1はtrueに変換される
let falsyValue = Boolean(0); // 数値の0はfalseに変換される

console.log(isTrue); // 出力: true
console.log(isFalse); // 出力: false
console.log(truthyValue); // 出力: true
console.log(falsyValue); // 出力: false

真偽値を返す表現

JavaScriptでは、特定の演算子や関数式が評価された結果として真偽値が返される場合があります。例えば、比較演算子や論理演算子の結果は真偽値になります。

let result = 10 > 5; // 比較演算子の結果は真偽値
console.log(result); // 出力: true

let isEven = 4 % 2 === 0; // 4は偶数か？
console.log(isEven); // 出力: true

let hasValue = !!'文字列'; // 真偽値に強制変換
console.log(hasValue); // 出力: true

null

nullは特別な値の１つで、「何もない」「空」または「存在しない値」を意味します。nullは意図的に変数に「値がない」ことを示すために使われることが多く、オブジェクトやデータが期待されるが、何らかの理由で利用不可能または未定義の場合に利用されます。nullは後述するundefinedと密接に関連していますが、両者の間には重要な違いがあります。

ポイント　nullの特徴と使用例

• 明示的な「何もない」の表現
  • プログラマが変数に意図的に「値がない」状態を設定するために使用する。
• オブジェクトのプレースホルダー
  • オブジェクトを参照する予定の変数が一時的にオブジェクトを持たない場合にnullを割り当てることがあります。

let book = null; // まだ本の情報がない、または本の情報をリセットしたい場合
console.log(book); // 出力: null

nullの型

JavaScriptにおけるnullの型に関しては少し特異な振る舞いを見せます。→typeof演算子を使用すると、nullの型はobjectとして返されます。これは、JavaScriptの初期設計の名残であり、nullが実際にはプリミティブ型であるにも関わらず生じる挙動です。

console.log(typeof null); // 出力: object

この振る舞いはJavaScriptの混乱の原因となることがありますが、nullが特別な値であることを理解しておけば、適切に扱うことができます。nullは、変数に「値がまだ設定されていない」または「オブジェクトが存在しない」ことを明示的に示すために重要な役割を果たします。

undefined

undefinedは、変数が宣言されたが、まだ値が割り当てられていないときのデフォルトの値です。nullと同様に、undefinedもJavaScriptの基本的なデータ型の一つであり、特別な意味を持ちます。

let notAssigned;
console.log(notAssigned); // 出力: undefined

function doNothing() {}
console.log(doNothing()); // 出力: undefined

let emptyObject = {};
console.log(emptyObject.noSuchProperty); // 出力: undefined

ポイント　undefinedの特徴

• 変数のデフォルト値
  • 新しく宣言された変数は、自動的にundefinedという値を持つ。
• 関数の返り値
  • 何も値を返さない関数からの返り値は、undefinedになる。
• 未定義のプロパティ
  • オブジェクトから存在しないプロパティを読み取ろうとすると、undefinedが返される。

JavaScriptでは、undefinedは変数が初期化されていないことを示すために使われますが、これを直接チェックすることはあまり推奨されません。変数が「定義されていない」かどうかを確認するには、typeof演算子を使用するか、より一般的には変数がnullまたはundefinedでないことを確認する方法があります。

undefinedの明示的な使用は稀であり、ほとんどの場合はJavaScriptエンジンによって内部的に扱われます。しかし、変数が初期化されていない場合の挙動を理解し、適切に扱うことは、エラーを防ぐ上で重要です。

Symbol

JavaScriptのSymbolは、ES6（ECMAScript 2015）で導入された新しいデータ型です。シンボルは、一意で不変の値を生成することができ、主にオブジェクトのプロパティキーとして使用されます。シンボルによって作成される値は、他のどんなシンボルとも重複しないため、名前の衝突を避けることができる特性を持っています。

let symbol1 = Symbol("description");
let symbol2 = Symbol("description");

console.log(symbol1 === symbol2); // 出力: false

↑のコードでは、symbol1とsymbol2は同じ説明文字列を持っていますが、それぞれが一意のシンボルであるため、等価比較はfalseを返します。

// 数値 (Number)
let number = 42;
console.log(number); // 42

// 文字列 (String)
let string = "Hello, JavaScript!";
console.log(string); // Hello, JavaScript!

// 文字列の結合
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

// 論理型 (Boolean)
let isTrue = true;
let isFalse = false;
console.log(isTrue, isFalse); // true false

// 論理演算
let andOperation = true && false;
let orOperation = true || false;
console.log(andOperation, orOperation); // false true

// 未定義 (undefined)
let undefinedVariable;
console.log(undefinedVariable); // undefined

// 空の値 (null)
let nullVariable = null;
console.log(nullVariable); // null

// シンボル (Symbol)
let symbol1 = Symbol("unique");
let symbol2 = Symbol("unique");
console.log(symbol1 === symbol2); // false

// 特別な数値
let infinity = 1 / 0;
let notANumber = "text" / 2;
console.log(infinity, notANumber); // Infinity, NaN

// 文字列の操作
let sentence = "JavaScript is fun!";
console.log(sentence.includes("fun")); // true
console.log(sentence.split(" ")); // ["JavaScript", "is", "fun!"]
console.log(sentence.replace("fun", "awesome")); // JavaScript is awesome!

// オブジェクトのプロパティとしてのシンボル
let id = Symbol("id");
let person = {
    name: "John",
    [id]: 123
};
console.log(person[id]); // 123

スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）

随時アップデート中 / ブックマーク推奨

Webページを開発するための必須スキル「HTML」「CSS」「JavaScript」を初心者向けに０から分かりやすく解説します。

現代では様々なWebページ・Webアプリケーションを作るためのツールやフレームワークが存在していますが、結局はHTML / CSS / JavaScriptの基本理解が必要不可欠。逆に言えばこの３つの言語を理解することで様々なWebページやWebアプリケーションを自由に作成することが可能になります。

つまるところ、この3つさえ理解してしまえば、ある程度の現場で通用するスキルが身につけられた！と言えるようになるでしょう。

このページでは、右も左も分からないIT初心者が「自分一人でWebページ・Webアプリケーションを作成できるようになる！」ことを目標に、HTML / CSS / JavaScriptの基本を0から解説。それぞれのトピックごとにページを分割しており、このページからトピックページで飛んでいくことで学習が完結します。

１トピックあたり数分で学習できるように設定しているので、自分のペースで電車の中や自宅・カフェ・勉強スペースなどでのトレーニングに役立ててください。

千里の道の一歩から・・・！ということで１個１個整理しながら学習していきましょう。それでは早速「そもそも、HTMLとCSSとJavaScriptって何？」という点から解説を始めます。

HTML / CSS / JavaScript とは？

Webページを「家を建てる」ようなイメージでざっくり表したのが以下の図です。

HTML（HyperText Markup Language）は、Webページの構造を定義する言語であり、文章や画像、リンクなど、ページ内の要素を配置し、意味を持たせます。

CSS（Cascading Style Sheets）は、HTMLで構築されたWebページの見た目を整えるためのスタイリング言語です。色、フォント、レイアウトなど、デザインに関するあらゆる要素を制御し、見栄えを整える力を持っています。

JavaScriptは、Webページに動的な機能やインタラクティブな要素を追加するプログラミング言語であり、HTMLとCSSだけでは実現できないアプリケーションのような機能を持たせることができます。

参考　HTML/CSS/JavaScriptの違いをわかりやすく解説

ザックリいえば、HTMLが「骨組み」CSSが「見た目」JavaScriptが「動き」です。この３つを有機的に組み合わせることで１つのWebページ・Webアプリケーションが完成します。基本となるのはずばり「HTML（＝骨組み）」です。

このページでは初心者向けに基本の「き」となるHTMLの概念や動作原理から解説していきます。

HTML入門

まずは、Web開発の最も基本となるHTMLから学習を始めていきます。

この章では、HTMLの基本的な概念や役割を学び、Webページの骨組みを構築する方法を身につけます。文章や画像、リンク、リスト、テーブルなど、Webページに必要な要素を整理し、読み手に伝わるように表現します。

また同時にHTMLの基本構造を理解し、タグや要素の概念を把握することから始めていきます。主要なHTMLタグを紹介し、実際にページ構造を作成する方法を学んでいきます。さらに、HTML文書の構造化やセマンティックマークアップの重要性を解説し、より効果的なWebページを構築する方法を学びます。

HTMLをマスターすることで、あなたはWebページの基本的な構造を自由に築くことができるようになります。このセクションを通して、Web開発の根幹をなすHTMLの魅力と力を存分に体感しましょう！

ステップ1-1：HTMLの概要と役割

【初心者向け】マークアップ言語とは？３分でわかりやすく解説

マークアップ言語って何？短時間でわかりやすく学びたい方へ、3分でマスターできる解説記事です。HTML、XML、Markdownなど、基本概念から実例までシンプルにご紹介。これであなたもマークアップ言語のプロに！

it-biz.online

2023.04.05

HTMLとは？初心者向け/簡単にわかりやすく３分で解説

初心者向けにHTMLを簡単に解説！HTMLとは何か、その役割や基本的な構成をわかりやすく説明します。たった3分でHTMLの基本を理解し、ウェブ開発への第一歩を踏み出しましょう！

it-biz.online

2023.06.30

ステップ1-2：HTMLの基本構造/基本ルール

この章では、HTMLの基本構造と構文ルール、その他「属性」などの基礎知識について整理していきます。

実際にコーディングしていくに際して必要となる知識を網羅的に学習することが可能です。

【初心者向け】HTMLの書き方の基本/基礎を３分で解説

【HTML入門編】HTMLの書き方を初心者向けにわかりやすくまとめました。HTMLって何？イメージがわきづらい方もこのページをご覧になれば「何となく」のイメージをつかめるはずです。

it-biz.online

2023.07.10

【HTML】タグの "属性" についてわかりやすく３分で解説

HTMLタグの属性について、初心者にもわかりやすく解説。3分で基本的な属性の概念と使い方を把握し、ウェブページ作成のスキルアップに役立てましょう。

it-biz.online

2023.03.20

【HTML】インライン要素とブロック要素の違いを３分でわかりやすく解説

HTMLのインライン要素とブロック要素の違いをわかりやすく解説！3分で理解できるコンパクトなガイド。要素の配置、幅と高さ、余白と境界線、要素の含有についての違いを簡潔に説明します。

it-biz.online

2023.04.20

ステップ1-3：HTMLの基本タグ

この章ではHTMLの基本的なタグについて学習していきます。

実は、覚えるべきタグの数は多くありません。複雑なWebページも、実は複数の基本タグの組み合わせで構成されています。この章では、HTMLのタグの中で覚えておきたい基本タグを学びます。

【HTML】headタグ：意味と使い方・重要性を１分で解説

HTMLのheadタグの意味と使い方、重要性を1分で簡潔に解説。ウェブページのメタデータ、タイトル、キャラクターセット、SEO対策などを理解し、効果的なウェブページを構築しましょう。

it-biz.online

2024.01.18

【HTML】pタグ（段落タグ）とは？３分でわかりやすく解説

<p>タグ（段落タグ）の基本的な概念、使い方、および使用例をわかりやすく解説します。この3分で読める記事で、HTML文書における段落の作成方法を理解し、コンテンツの構造と可読性を向上させましょう。

it-biz.online

2023.04.04

【HTML】hタグ（見出し）タグ：h1~h6を３分でわかりやすく解説

【Webエンジニア向け】hタグ（見出し）タグ：h1~h6 の意味と使い方、注意点をわかりやすく３分で解説します。

it-biz.online

2023.03.14

【HTML】aタグ（リンク）の基本を３分でわかりやすく

【Webエンジニアを目指すなら】初心者向けにHTMLのaタグ（リンクタグ）の基本・使い方をサンプルコード付きで解説。target属性・title属性の使い方まで網羅的にご説明します。

it-biz.online

2023.03.14

【HTML】リスト（ulタグ・olタグ・liタグ）の使い方を３分で解説

HTMLのリスト（ulタグ・olタグ・liタグ）を効果的に使用する方法を３分でわかりやすく解説します。無順序リストや順序付きリストの作成、入れ子構造の理解、スタイリングについても簡潔にサンプルコード付きでご説明します。

it-biz.online

2023.04.12

【HTML】説明リスト（dlタグ・dtタグ・ddタグ）を３分でわかりやすく解説

HTMLの説明リスト（dlタグ・dtタグ・ddタグ）の基本的な使い方と構造を短時間で解説。用語と説明をペアで表示する説明リストの作成方法、適切な使用例、アクセシビリティへの配慮など網羅的にご説明します。

it-biz.online

2023.04.12

【HTML】spanタグ：使い方と実践的な例を３分でわかりやすく解説

スタイリングの秘密兵器：spanタグの活用法とHTMLでの使い方をIT初心者向けに１からわかりやすくサンプルコード付きで解説します。初心者から上級者になるために、spanタグのHTMLにおける活用法とポイントをご説明します。

it-biz.online

2023.03.18

【HTML】divタグの使い方とコツを３分でわかりやすく解説

HTMLにおけるdivタグの基本的な使い方と、実際のWebページでの活用例、そしてdivタグを使う際のコツや注意点について、3分でわかりやすく解説します。初心者でも理解しやすいように、図解付きで丁寧に説明します。

it-biz.online

2024.03.21

【HTML】img（画像タグ）を３分でわかりやすく解説

【初心者向け】HTML imgタグの基本を理解し、画像を効果的に表示する方法を学びましょう。src、alt、width、height属性の使い方や注意点、アクセシビリティやSEO対策など、初心者にも分かりやすい解説が盛りだくさんです。

it-biz.online

2023.04.04

【HTML】tableタグ：テーブル（表）の作成方法を３分でわかりやすく

HTMLでテーブル（表）を作りたい初心者必見！<table>タグを使った基本的な作成方法を、3分わかりやすく解説します。サンプルコード付きの説明であなたのWebサイトに簡単に表を実装できます。HTMLの表組みをすぐに理解したい方はぜひご覧ください。

it-biz.online

2025.04.22

【HTML】form：入力フォームの作成方法を３分で解説

【IT初心者向け】HTMLで入力フォームを作成する方法を解説します。formタグ・labelタグ・textareタグ（各type属性）・selectタグ・inputタグを０から解説していきます。

it-biz.online

2024.03.19

【HTML】linkタグとは？外部リソースの参照を１分で解説

HTMLの<link>タグの役割と使い方をわかりやすく解説。<link>タグはスタイルシートなどの外部リソースをWebページに組み込むための重要な要素。読み込み順序、パフォーマンスへの影響、相対パスと絶対パスの選択、セキュリティ対策など、<link>タグを利用する際の重要な注意点も網羅的にご説明。

it-biz.online

2024.03.05

ステップ1-4：応用的なHTMLの知識

お疲れ様でした。ここからはHTMLに関する最後の章です。

この章ではセマンティックHTMLなど、HTML5から利用できるようになった新機能、また実践の現場で必要となる応用的な知識について学習していきます。

セマンティックHTMLとは？初心者向け３分でわかりやすく解説

初心者向けにセマンティックHTMLをわかりやすく3分で解説！HTMLの基本概念や、セマンティックタグの使い方、メリットを簡単に学び、効果的なウェブページ作成に役立てましょう。

it-biz.online

2023.08.02

CSS入門

CSS（Cascading Style Sheet）は、Webページのデザインやレイアウトをコントロールするための言語です。HTML（HyperText Markup Language）でWebページの構造を作成した後、CSSを使ってデザインやスタイルを適用することができます。

Webページを家に例えると、HTMLが家の骨組みや間取りを決めるのに対して、CSSは家具の配置や壁の色などを決める役割を担います。

ステップ2-1：CSSの基本概念と導入

この章ではCSSとは何か？という基本解説から始め、CSSの基本構文を学習していきます。

【初心者向け】CSSとは？３分でわかりやすく簡単に解説

【初心者向け】CSSとは？３分でわかりやすく簡単に解説 - CSS（Cascading Style Sheets）の基本概念、セレクタとプロパティについて、初心者にも理解しやすい言葉で解説します。Webページのデザインやレイアウトをコントロールする方法を短時間で学べます。

it-biz.online

2023.04.18

【CSS】セレクタとは？主要な書き方10個を３分で解説

【初心者向け】CSSセレクタを簡単に理解するためのガイド。要素セレクタ、クラスセレクタ、IDセレクタ、属性セレクタなど、主要な10個のセレクタの使い方を3分で習得できる解説記事です。スタイリングの基本をマスターしましょう。

it-biz.online

2023.04.19

【CSS】疑似クラスとは？初心者向けにわかりやすく３分で解説

疑似クラスって何？CSSの疑似クラスを初心者向けにわかりやすく解説。3分で基本概念を把握し、要素の状態や特定条件でスタイルを適用する方法を学びましょう。

it-biz.online

2023.04.19

【CSS】疑似要素とは？初心者向けにわかりやすく３分で解説

疑似要素とは何か？初心者向けにわかりやすく解説するこの記事で、CSSの疑似要素がどのように機能し、効果的なデザインを作成するためにどのように活用できるのかを3分で学びましょう。

it-biz.online

2023.04.19

【HTML】id属性/class属性の違い・使い分けを３分でわかりやすく解説

【HTML】id属性とclass属性の違いを簡潔に解説。ページ内での一意性やCSS適用、JavaScriptでの利用を含む使い分け方法を3分で理解できるわかりやすいガイド。これを読めば、属性の選択に迷わなくなるでしょう！

it-biz.online

2023.04.20

【HTML】CSSの読み込み方法３点：わかりやすく１分で解説

【初心者向け】HTMLとCSSの読み込み方法を簡単に理解できるように、インラインスタイル、内部スタイルシート、外部スタイルシートの3つの方法をわかりやすく3分で解説。効率的なWebページ制作のためのポイントを押さえましょう。

it-biz.online

2024.03.05

ステップ2-2：ボックスモデルとレイアウト

【CSS】ボックスモデルを３分でわかりやすく解説

ボックスモデルを3分で理解しましょう！この解説では、コンテンツエリア、パディング、ボーダー、マージンの4つの領域について簡潔かつわかりやすく説明します。ウェブデザインの基本となるボックスモデルを効果的に学びましょう。

it-biz.online

2023.04.18

【CSS】box-sizing（border-box）を３分で解説

CSSのbox-sizingプロパティ（特にborder-box）をわずか3分で解説します。要素のサイズ計算を簡単にし、予測可能なレイアウトを実現する方法を学びましょう。レスポンシブデザインやグリッドシステムにも最適です。

it-biz.online

2023.04.18

ステップ2-3：テキスト/フォント/背景とカラーのスタイリング

JavaScript入門

Webエンジニアと呼ばれるようになるには、やはりJavaScriptの基本理解は欠かせません。ここからは、JavaScriptの基本を０から１０まで網羅的に学習していきましょう。

ステップ3-1：基本構文とデータ型

【JavaScript入門】基本文法/基礎文法を5分で

JavaScriptの基本ルールとその応用を初心者にも分かりやすく解説。大文字と小文字の区別、空白と改行の扱い、セミコロンの重要性、コメントの書き方、予約語の使用禁止について、具体的なサンプルコードを用いて詳しく説明します。これを読めば、JavaScriptの基礎をしっかりと理解できるようになります。

it-biz.online

2024.01.30

JavaScript：変数宣言（let/const/var）を３分で解説

JavaScript初心者向けガイド：変数の宣言方法をvar, let, constの違いを中心に解説。関数スコープ、ブロックスコープ、巻き上げ、再代入の可否などの基本概念を明確に理解し、実用的なサンプルコード付きでわかりやすくご説明します。

it-biz.online

2024.03.29

【JavaScript】データ型の基本と動的型付けの仕組みを１分で

JavaScriptの動的型付けと基本的なデータ型（数値、文字列、論理型、未定義、空の値、シンボル）について初心者向けに解説。数値の特殊なケース、文字列操作方法、および論理演算の基本もカバーしています。プログラミングの基礎を固め、効率的なコーディングを目指しましょう。

it-biz.online

2024.03.21

JavaScript：テンプレートリテラルを１分で完全解説

【JavaScript入門】初心者向けにテンプレートリテラル（テンプレート文字列）の使い方をサンプルコード付きで解説します。テンプレートリテラルをマスターすれば、${変数}/${式}のような形で、文字列に変数の値や式の結果を埋め込むことができます。

it-biz.online

2024.02.20

JavaScript：配列（Array）とは？初心者向けに３分でわかりやすく解説

【初心者向け】JavaScriptで配列を利用する方法を画像・サンプルコード付きで解説します。「そもそも配列って？」「変数と何が違うの？」そんな疑問をお持ちの方でも、最後まで理解できるよう全ての用語を分かりやすく解説しています。

it-biz.online

2024.03.22

【JavaScript】if文で条件分岐の書き方の基本とコツを３分で解説

JavaScriptのif文の基本から応用までを簡潔に解説。初心者向けにelseやelse ifの使い方、論理演算子の活用方法をサンプルコード付きで紹介します。条件分岐をマスターして、効率的なプログラミングを始めましょう。

it-biz.online

2024.02.02

【JavaScript】3分で学べる！比較演算子（"==="の意味）

【JavaScript入門】JavaScriptで用いる比較演算子を整理して解説します。等価演算子（==）と厳密等価演算子（===）の違い、厳密不等価演算子（!==）など、初心者にとって理解しづらい概念もサンプルコードを用いて丁寧に解説します。

it-biz.online

2020.02.04

【JavaScript】1分で理解できる！switch文を用いた条件分岐（switch~case/dafault）

【初心者向け】JavaScriptのswitch文の使い方をなかなか理解できない！という方向けに、switch文の使い方を１から解説します。実際にswitch文を利用したサンプルコード付きで解説し、dafaultオプションの使い方などこれさえ覚えておけば間違いなし！という要点を絞って整理しています。

it-biz.online

2020.02.13

JavaScript：while文を用いたループ処理の基本とコツを１分で

JavaScriptでのwhileおよびdo...whileループの効果的な使用方法を解説。明確な終了条件の設定、カウンターの適切な更新方法、そして最低一回の実行を保証するdo...whileの特性に焦点を当てた実践的なサンプルコードを提供します。

it-biz.online

2024.03.11

JavaScript：for文を用いたループ処理を３分で解説

【初心者向け】JavaScriptの基本―。for文を利用したループ処理（繰り返し処理）の使い方・構文ルールを解説しています。JavaScript学習中の方でもサクッと理解できるようサンプルコードを用いて端的に分かりやすく要点を絞って説明しています。

it-biz.online

2024.02.19

JavaScript：forEachメソッド-配列のループ方法を１分で解説

【初心者向け】JavaScriptのforEachメソッドの使い方とその特徴を解説。基本的な使用法、非同期処理の扱い、配列の変更時の注意点など、forEachを効率的に使いこなすための重要なポイントを網羅的に紹介。プログラミングの知識を深め、より良いコードを書くためのガイドとして必見です。

it-biz.online

2024.02.14

【JavaScript】関数：functionの使い方とコツを３分でわかりやすく

【JavaScript入門】JavaScriptのfunction（関数）の意味と利用方法、コーディング方法を丸っと解説します。パラメータ（引数）の使い方やローカル変数/グローバル変数の差異など、function（関数）利用時に知っておきたい内容を３分でまとめます。

it-biz.online

2025.05.07

【JavaScript】１分で理解する！=>アロー関数の基本

【JavaScript入門】アロー関数（=>）の使い方をまとめました。サンプルコード付きで初心者でも理解しやすいように解説しています。関数って何？関数式って何？という方でも、このページを読めば理解できるよう詳細解説記事へのリンク付きです。

it-biz.online

2025.01.10

【JavaScript】関数式（無名関数）とは？関数宣言との違いを3分で解説

【JavaScript入門】JavaScriptにおける「関数宣言(Function Declaration)」と「関数式(Function Expression)」の違いを端的に分かりやすく解説します。関数式で用いられる無名関数（匿名関数）や、「巻き上げ」の有無についてサンプルコードを用いながら説明します。

it-biz.online

2024.03.29

JavaScript：コールバック関数とは？３分でわかりやすく解説

JavaScriptでのコールバック関数の役割と基本的な使い方を徹底開設。この記事では、コールバック関数がどのようにして非同期処理を管理し、プログラムの流れを柔軟に制御するのかを簡潔にご説明。さらに、コールバック関数の利用例と、その適切な使用方法についても紹介します。

it-biz.online

2024.03.11

JavaScriptのオブジェクトとは？基本と使い方のコツを３分で解説

【超・初心者向け】JavaScriptの「オブジェクト」という概念が難しく挫折しかけている人のために、JavaScriptのエンジニアが要点を絞って分かりやすく解説します。プロパティって？メソッドって？オブジェクトってつまり何者？という疑問に３分でお答えします。

it-biz.online

2024.02.07

Javascript：クラスとは何か？を３分で【初心者向け】

JavaScriptのクラスに関する基本的な概念、継承、カプセル化、ポリモーフィズム、静的メソッドとプロパティについて解説します。初心者から中級者向けに、クラスの使い方とオブジェクト指向プログラミングの鍵となる概念を学ぶことができます。

it-biz.online

2025.01.17

JavaScript：documentオブジェクトの意味と使い方を３分で

【初心者向け】JavaScriptのdocumentオブジェクトの基本と使い方を初心者にも分かりやすく解説。DOM操作、要素の取得・変更、イベントハンドリングの方法を学び、サンプルコードを用いて実践的な知識を身につけましょう。

it-biz.online

2024.02.07

【JavaScript】alertメソッドの使い方―３分で学ぶアラート(ポップアップ)表示

本ページでは、JavaScriptの初心者向けにalertメソッドの使い方を０から解説します。alertメソッドは、JavaScript内であらかじめ用意されているwindowオブジェクトのメソッドです。alertメソッドを利用することで、以下の画像のように「ポップアップ画面」を表示することが可能に...

it-biz.online

2020.01.27

ステップ3-2：DOMとイベント処理

【初心者向け】DOM入門：Webページ操作の基本を３分でわかりやすく

DOM（Document Object Model）とは何かを初心者向けに３分でわかりやすく解説します。Webページをツリー構造として表現し、JavaScriptと連携して動的な変更を可能にするDOMの基本概念とサンプルコードを紹介します。

it-biz.online

2023.12.15

【JavaScript】イベントリスナーとは？３分でわかりやすく解説

【超・初心者向け】この記事では、JavaScriptにおけるイベントリスナーの基本概念から、イベントリスナーの追加と削除方法に至るまで、初心者にも理解しやすい形で段階的に解説します。イベントリスナーを利用し、Webページ上でより豊かなユーザーインタラクションを実現する方法をご説明します。

it-biz.online

2025.05.07

ステップ3-3：JavaScriptによるWeb開発

Angularとは？初心者向けに１０分でわかりやすく

Angularの概要やプロジェクト構成、コンポーネント・データバインディング・モジュール（NgModule）・ルートコンポーネントなどを初心者向けにわかりやすく解説します。フォルダ構成の具体例や、TypeScript・HTML・CSSの連携、実際の画面例、Angularを基礎から理解するのに最適な内容です。

it-biz.online

2025.01.07

ステップ3-4：応用トピックスと最新トレンド

Web開発の基本をマスターしたあなたへの次のステップ

おめでとうございます！あなたはHTMLやCSS,JavaScriptの基本を学習し、Web開発の世界への扉を開きました。

しかし、それだけでは十分ではありません。

Webページの骨格を作る言語の基本は理解できましたが、Web開発の真の魅力は、その先に広がる可能性を探求することです。プログラミングスクールでは、HTMLだけでなく、CSSやJavaScriptを学ぶことで、より魅力的でインタラクティブなウェブサイトを構築できるようになります。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

// 数値を受け取り、それに10を加えた後、コールバック関数にその結果を渡して実行する関数
function addAndDisplay(number, callback) {
    let result = number + 10; // 10を加算
    callback(result); // 加算結果をコールバック関数に渡して実行
}

// 加算結果を受け取り、表示するコールバック関数
function displayResult(result) {
    console.log('The result after addition is: ' + result);
}

// addAndDisplay関数を呼び出し、その結果を表示するコールバック関数を渡す
addAndDisplay(5, displayResult); // "The result after addition is: 15" を表示

参考　JavaScript：関数の基本

とは言え、定義とコードだけを見せられても少し難しいと思いますので、このページでは簡単なサンプルコードを見ていきながら、徐々にそのイメージが湧きやすくなるようにご説明していきます。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

コールバック関数とは？

プログラミングの基本知知識の１つ。コールバック関数はその名の通り「後で呼び出すために渡される関数」だと言えます。特に非同期操作（データを取得する、時間がかかる計算をするなど）を行う際に便利なテクニックの１つで、操作が完了したらその結果に基づいて何かアクションを起こしたいような場合にコールバック関数を使用します。

これは、日常生活の例えを使ってみるとイメージしやすくなるかもしれません。

日常生活での例え　「友人に頼んで後で電話をかけ直してもらう」状況

1. 友人への依頼（親関数）: 「忙しいから、30分後にもう一度電話して」
2. 友人が約束を守り30分後に行動（コールバック関数）: 30分後に、友人はあなたに電話をかけ直します。
3. 電話を受けた時（コールバック関数の実行）: あなたは、電話がかかってきた時点で、何か特定の行動を取ります（例えば、話を聞く、情報を共有するなど）。

この例ではコールバック関数は「後で呼び出される約束（関数）」です。この約束（関数）は、事前に指定された条件が満たされた時（この場合は30分経過した時）に実行されます。

敢えて非常に簡単な表現をすると、関数から呼び出される関数が「コールバック関数」だと言えるでしょう。

まずは非常にシンプルなサンプルコードから見てみましょう。

// setTimeout関数は、指定した時間が経過した後に関数（コールバック）を実行します。
// ここでは、2秒後に「Hello, Callback!」とログに表示するシンプルな例です。

setTimeout(function() {
    console.log('Hello, Callback!');
}, 2000);

// 上記の例で、setTimeoutが親関数、渡された匿名関数がコールバック関数になります。
// 「2秒後に呼び出して」という約束をsetTimeoutにして、2秒後にコンソールにメッセージが表示されます。

↑のコード例では、setTimeout関数（親関数）に2つの引数を渡しています。1つ目は実行されるべきコールバック関数（匿名関数で「Hello, Callback!」を表示）、2つ目はタイマーが切れるまでの時間（ミリ秒）。このとき、コールバック関数は、指定した時間（この例では2000ミリ秒、または2秒）が経過した後に自動的に呼び出されます。

基本的なコールバック関数

この章では最も基本的なコールバック関数の使用方法をご説明します。関数を別の関数に引数として渡し、内部で実行します。

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

function smile() {
    console.log(':)');
}

greet(smile);

// 実行結果
// Hello!
// :)

このサンプルコードでは２つの関数が定義されています：greetとsmile。

1. greet関数
   • 引数として別の関数（コールバック関数）を受け取る。greet関数が呼び出されると、まず"Hello!"をコンソールに表示し、その後に引数で受け取ったコールバック関数（この例ではsmile関数）を実行。
2. smile関数
   • 関数は、コンソールに":)"を表示する単純な関数。

コードの実行フローは↓の通り。

1. greet(smile);が呼び出され、smile関数がgreet関数に引数として渡される。
2. greet関数が実行され、最初に"Hello!"をコンソールに表示。
3. greet関数の内部で、引数として受け取ったsmile関数（コールバック関数）を実行。
4. smile関数が実行され、コンソールに":)"が表示される。

このサンプルコードのポイントは、ある関数（この例ではgreet）の実行中に、引数として渡された別の関数（この例ではsmile）を呼び出すことで、処理の流れを柔軟に制御できる点にあります。このように、コールバック関数を使うことで、特定のタイミングで任意の追加処理を挿入することが可能になります。

パラメータを伴うコールバック関数

コールバック関数にパラメータを渡す方法を示します。↓のサンプルでは、引数として関数に数値とコールバック関数を渡し、計算結果をコールバック関数を通じて処理する方法を示しています。

function calculate(x, y, callback) {
    const result = x + y;
    callback(result);
}

function displayResult(res) {
    console.log('Result: ' + res);
}

calculate(5, 7, displayResult);

// 実行結果
// Result: 12

1. calculate関数
   • 2つの数値(xとy)とコールバック関数(callback)を引数として受け取ります。関数内で、これら2つの数値の和を計算し、その結果をコールバック関数に渡して実行。
2. displayResult関数
   • calculate関数から渡された計算結果を引数として受け取り、それをコンソールに表示。

プログラムの流れは↓の通り。

1. calculate(5, 7, displayResult);が呼び出される。ここで、5と7が加算される数値として、displayResultがコールバック関数としてcalculate関数に渡される。
2. calculate関数が実行され、xとyの和12を計算。
3. calculate関数内で、計算結果12をdisplayResult関数に渡して、このコールバック関数を実行。
4. displayResult関数が計算結果を受け取り、"Result: 12"としてコンソールに表示。

ポイントは、コールバック関数を利用して計算結果を処理することで、関数の処理を柔軟に拡張できる点にあります。このようにコールバック関数にパラメータを渡すことで、関数の実行後にさまざまな処理を実行することが可能になります。

非同期処理でのコールバック関数

JavaScriptの非同期処理、特にsetTimeoutを使用した非同期処理でコールバック関数を使用する例を示します。

function delayedGreeting(callback) {
    setTimeout(function() {
        console.log('Hello after 2 seconds');
        callback();
    }, 2000);
}

function smileAgain() {
    console.log(':) Again');
}

delayedGreeting(smileAgain);

// 実行結果
// Hello after 2 seconds
// :) Again

このサンプルでは、JavaScriptのsetTimeout関数の動作を模倣して、非同期処理でコールバック関数を使用する方法を示しています。

1. delayedGreeting関数
   • 引数としてコールバック関数を受け取る。関数内では、2秒間の待機（非同期処理を模倣）が行われ、その後に"Hello after 2 seconds"をコンソールに表示。最後に引数で受け取ったコールバック関数を実行。
2. smileAgain関数
   • コンソールに":) Again"を表示するシンプルな関数。

コードの実行フローは↓の通り。

1. delayedGreeting(smileAgain);が呼び出され、smileAgain関数がdelayedGreeting関数にコールバックとして渡される。
2. delayedGreeting関数が実行され、最初に2秒間待機。この待機期間は、非同期処理の完了を待つことを表しています。
3. 2秒後、"Hello after 2 seconds"がコンソールに表示される。
4. 最後に、delayedGreeting関数内でsmileAgainコールバック関数が実行され、コンソールに":) Again"が表示されます。

このサンプルコードのポイントは、非同期処理（この例では2秒間の遅延）の完了後に特定の処理（コールバック関数）を実行する方法を示している点です。このようにコールバック関数を使用することで、非同期操作が完了した後に、自動的に追加の処理を実行することが可能になります。

複数のコールバック関数を使う

複数のコールバック関数を使って、異なる条件下で異なる処理を実行する方法を示します。これにより、より複雑なロジックを管理できます。

function fetchData(successCallback, errorCallback) {
    const data = {
        name: 'John Doe',
        age: 30
    };
    // 仮定: データの取得に成功
    if (data) {
        successCallback(data);
    } else {
        errorCallback('No data found');
    }
}

fetchData(
    function(data) { console.log('Success:', data); },
    function(error) { console.log('Error:', error); }
);

// 実行結果
// Success: {'name': 'John Doe', 'age': 30}

このサンプルでは、データの取得処理を模擬して成功時とエラー時に異なるコールバック関数を実行する方法を示しています。

1. fetchData関数
   • データ取得処理。成功時のコールバック関数(successCallback)とエラー時のコールバック関数(errorCallback)を引数として受け取る。関数内で、データ取得が成功したと仮定して、成功時のコールバック関数にデータを渡して実行します。データ取得が失敗した場合（この例ではシミュレートしていませんが）、エラー時のコールバック関数を実行します。
2. onSuccess関数
   • データ取得が成功した場合にfetchData関数から呼び出されるコールバック関数。取得したデータをコンソールに表示します。
3. onError関数
   • データ取得が失敗した場合にfetchData関数から呼び出されるコールバック関数。エラーメッセージをコンソールに表示します。

コードの実行フローは以下の通り。

1. fetchData関数がonSuccess関数とonError関数を引数として受け取りながら呼び出される。
2. fetchData関数内で、データの取得が成功したと仮定（data変数に値が設定されているため）。そのため、成功時のコールバック関数onSuccessが実行される。
3. onSuccess関数が取得したデータを引数として受け取り、コンソールにSuccess:と共に表示。

このサンプルのポイントは、成功時とエラー時の処理をそれぞれ異なるコールバック関数で定義し、処理の結果に応じて適切なコールバック関数を呼び出すことで、処理の成功や失敗に柔軟に対応できる点にあります。このパターンは、非同期処理の結果に基づく複雑なフロー制御に特に有用です。

コールバック地獄

複数の非同期処理をネストして行う例を示します。このような書き方は「コールバック地獄」と呼ばれ、読みにくさや管理の難しさの原因になることを理解することが重要。

function step1(callback) {
    setTimeout(() => {
        console.log('Step 1 completed');
        callback();
    }, 1000);
}

function step2(callback) {
    setTimeout(() => {
        console.log('Step 2 completed');
        callback();
    }, 1000);
}

function step3(callback) {
    setTimeout(() => {
        console.log('Step 3 completed');
        callback();
    }, 1000);
}

step1(function() {
    step2(function() {
        step3(function() {
            console.log('All steps completed');
        });
    });
});

// 実行結果
// Step 1 completed
// Step 2 completed
// Step 3 completed
// All steps completed

実際の開発では、プロミス(Promises)やasync/awaitなどのモダンなJavaScriptの機能を使用して、このような「コールバック地獄」を避けることが推奨されます。

コールバック関数はあまりにもネストしすぎると、人間にとって理解しづらいコードになってしまう点が注意ポイントです。

// Web APIを呼び出し、結果を取得した後にコールバック関数を実行する例
function fetchData(url, callback) {
    fetch(url) // Web APIを呼び出し
        .then(response => response.json()) // レスポンスをJSON形式で解析
        .then(data => callback(data)) // 解析したデータをコールバック関数に渡して実行
        .catch(error => console.error('Error:', error)); // エラーが発生した場合の処理
}

// データ取得が成功した時の処理を定義するコールバック関数
function handleData(data) {
    console.log('Fetched data:', data);
}

// fetchData関数を呼び出し、URLとコールバック関数を引数に渡す
fetchData('https://api.example.com/data', handleData);

スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）