JavaScript | コンピューター

JavaScriptモジュールを動的にロードする方法

JavaScriptモジュールを動的にロードするJavaScriptでは、ESモジュール機能を利用することで、コードを複数のファイルに分割し、必要なときに読み込むことができます。ここでは、JavaScriptモジュールを動的にロードするためのサンプルコードを紹介します。注意：この例を実行するには、ローカルホスト（localhost）サーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORS制限によりエラーが発生する可能性があるため、必ずサーバー経由でアクセスしてください。HTMLファイル<!DOCTYPE html> <html lang=en> <

JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

JavaScriptでは、イベントハンドラ内で取得したイベントオブジェクトを、そのまま引数として別の関数へ渡すことができます。イベントオブジェクトには発生元の要素（event.target）やイベントの種類などの情報が含まれているため、複数の関数で同じイベント情報を共有したい場合にとても便利です。以下は、クリックイベントのイベントオブジェクトを受け渡し、ボタンのフォントサイズと文字色を変更するサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset=

JavaScriptでオブジェクトを含む「配列の配列」をループ処理する方法

JavaScriptでオブジェクトを含む多次元配列をループするには？JavaScriptでは、オブジェクトを含む配列の配列（入れ子構造の配列）をループ処理する際、forEach()メソッドをネストして使用し、さらにfor...inループで各オブジェクトのプロパティにアクセスするのが一般的な方法です。以下に、具体的な実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device

JavaScriptでスタックを実装する方法【サンプルコード付きで解説】

スタック（Stack）は、最後に追加した要素が最初に取り出される「LIFO（Last In, First Out）」方式の基本的なデータ構造です。本記事では、JavaScriptを使ってスタックを実装する方法を、ブラウザ上で実際に動作するサンプルコードとともにわかりやすく解説します。スタックの基本操作 push：スタックの一番上に新しい要素を追加します。 pop：スタックの一番上から要素を取り出して削除します。要素がない場合はアンダーフローとして扱います。 display：スタック内に格納されているすべての要素を表示します。サンプルコード以下は、JavaScriptでスタックを実装し

JavaScriptでキュー（Queue）を実装する方法を徹底解説

キュー（Queue）とは？キューは先入れ先出し（FIFO：First In First Out）というルールに従うデータ構造です。最初に追加した要素が最初に取り出される仕組みで、レジの待ち行列のように「並んだ順番どおりに処理したい」場面でよく使われます。 JavaScriptでは、配列とクラス（またはプロトタイプ）を組み合わせることで、簡単にキューを実装できます。キューの基本的な操作は次の3つです。 enqueue（エンキュー）：キューの末尾に要素を追加する dequeue（デキュー）：キューの先頭から要素を取り出す display（表示）：キューの中身をすべて画面に表示する以下は、H

JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値（カンマ区切り）として渡します。 apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。サンプルコード <!DOCTYPE html> <html lang=ja>

JavaScriptで関数をコールバックとして渡す方法

JavaScriptで関数をコールバックとして渡すJavaScriptでは、関数は第一級オブジェクト（ファーストクラスオブジェクト）として扱われるため、他の値と同じように変数に代入したり、引数として別の関数に渡したりすることができます。このように引数として渡され、後から呼び出される関数をコールバック関数と呼びます。コールバックを活用することで、処理の柔軟性が高まり、再利用可能なコードを書くことができます。以下は、add2() 関数を multiply9() 関数のコールバックとして渡すサンプルコードです。コード例<!DOCTYPE html> <html lang="

JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

JavaScriptでは、オブジェクトのprototypeプロパティに値を追加することで、プロパティを複数のインスタンス間で共有できます。prototypeに登録されたプロパティは、そのコンストラクタから生成されたすべてのインスタンスから共通して参照されます。この手法には大きなメリットがあります。各インスタンスごとに同じ値のプロパティを個別に定義する必要がないため、コードの重複を減らし、メモリの使用量も抑えられるのです。たとえば、学校名のように全生徒で共通する情報は、prototypeにまとめておくのが理想的です。実装例：prototypeでプロパティを共有するコード以下は、JavaS

JavaScriptでプロトタイプを使ってメソッドを共有する方法

JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS

JavaScriptの静的プロパティとは？クラス関数に直接定義する方法を解説

JavaScriptの静的プロパティ（Static Properties）とは JavaScriptにおける静的プロパティは、クラスのprototypeプロパティではなく、クラス関数そのものに割り当てられるプロパティです。この特徴により、オブジェクトをインスタンス化することなく、直接アクセスして呼び出すことができます。通常のインスタンスプロパティは各オブジェクトごとに生成されますが、静的プロパティはクラス全体で共有される単一の値として扱われます。そのため、設定値やユーティリティ的なデータなど、全インスタンスで共通して使いたい情報を格納するのに適しています。静的プロパティの基本的な書き方コ

【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

JavaScriptでは、instanceof 演算子を使うことで、あるオブジェクトが特定のクラス（コンストラクタ関数）のインスタンスであるかどうかを簡単に判定できます。instanceof 演算子とは？instanceof 演算子は、左辺のオブジェクトが右辺に指定したコンストラクタ関数のプロトタイプチェーン上に存在するかどうかを評価し、その結果を真偽値（true / false）として返します。この仕組みを利用することで、オブジェクトがどのクラスから生成されたものなのかを実行時に動的にチェックできます。コード例以下は、ボタンをクリックしたときに student1 オブジェクトが Studen

JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-

【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。押さえておきたいポイントプリミティブ型: 値が同じであれば == や === の比較で true になるオブジェクト型: 同じインスタンス(同一の参照

文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum

【JavaScript】カンマ区切りの文字列配列をオブジェクト配列に変換する方法

カンマ区切りの文字列（JSON形式の文字列）で構成される配列を、オブジェクトの配列に変換したいケースはよくあります。そんなときに役立つのが、JavaScriptのJSON.parse()メソッドです。このメソッドを使えば、文字列として格納されたJSONデータを簡単にJavaScriptオブジェクトへ変換できます。以下は、文字列の配列をオブジェクトの配列に変換するサンプルコードです。サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

複数の値でJavaScript配列の要素を検索する方法

JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=

JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta

JavaScriptで2つのオブジェクトをマージする方法を解説

JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev

JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】

JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&

【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法

JavaScriptでは、filter()メソッドとjoin()メソッドを組み合わせることで、条件を満たす要素だけを抽出し、それらを任意の区切り文字で1つの文字列に結合できます。本記事では、配列の中から「2で割り切れる要素（偶数）」だけを取り出して結合する具体例を、動作するサンプルコードとともに解説します。処理の流れ：filter() と join() の役割 filter()：コールバック関数が true を返した要素だけを集めた新しい配列を作成します。元の配列は変更されません。 join()：配列内のすべての要素を、引数で指定した区切り文字で連結し、1つの文字列として返します。引数