JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでイベントを追加する最良の方法とは？addEventListener()の使い方を徹底解説

    任意の要素にイベントを追加する最良の方法は、addEventListener()メソッドを使用することです。このメソッドは、指定した要素に対してイベントリスナー（イベント発生時に実行される処理）を登録します。従来のonclick属性と異なり、1つの要素に複数のイベントハンドラを追加できるため、現代のWeb開発では標準的な手法とされています。 addEventListener()メソッドの基本構文 element.addEventListener(event, function, useCapture); event： 監視したいイベントの種類（例： 「click」「mouseover」「ke

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  3. JavaScriptのアロー関数（短縮関数）とは？thisの違いをサンプルコードで解説

    JavaScriptのアロー関数（短縮関数）とは？ アロー関数は、ES2015（ES6）で導入された関数の新しい記法で、「速記関数」「短縮関数」とも呼ばれます。従来のfunctionキーワードを使った関数式と比べて、はるかに短く簡潔に関数を記述できるのが大きな魅力です。 アロー関数最大の特徴は、thisへの独自のバインディングを持たないという点です。通常の関数では呼び出され方によってthisの値が変わりますが、アロー関数の場合は定義された場所の外側のスコープ（周囲のコンテキスト）からthisを受け継ぎます。これにより、ネストした関数の中でthisが意図しない値を指してしまうトラブルを簡単に回避

  4. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  5. JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

    JavaScriptには列挙型が組み込まれていない JavaScriptは、TypeScriptやJavaなどの言語と異なり、列挙型（Enum）を標準機能としてサポートしていません。そのため、JavaScriptで列挙型のようなものを実現するには、オブジェクトを使って自前で実装する必要があります。 本記事では、オブジェクトを利用してJavaScriptで列挙型を再現する方法を、実際のコード例とともにわかりやすく解説します。 オブジェクトで列挙型を実現する基本の考え方 JavaScriptで列挙型を作る最もシンプルな方法は、キー（名前）と値をペアにしたオブジェクトを定義することです。以下の例で

  6. JavaScriptでブラウザの閲覧履歴にアクセスする方法

    JavaScriptでは、window.historyオブジェクト（History API）を利用することで、ブラウザのセッション履歴にアクセスできます。現在のセッションで訪れたページの数を取得したり、プログラムから「戻る」「進む」の操作を実行したりすることが可能です。なお、セキュリティとプライバシー保護の観点から、JavaScriptで扱えるのは履歴の「件数」や「前後への移動」のみであり、ユーザーが訪れた具体的なURLを取得することはできない点に注意してください。以下は、JavaScriptで閲覧履歴にアクセスするためのサンプルコードです。サンプルコード<!DOCTYPE html&g

  7. JavaScriptのネイティブプロトタイプとは？仕組みと使い方を実例付きで解説

    ネイティブプロトタイプとは JavaScriptはプロトタイプベースの言語であり、「prototype」プロパティはその中核をなす重要な概念です。プロトタイプは、JavaScriptにおいて継承を実現するために使用されます。 ユーザー定義のカスタムオブジェクトだけでなく、String や Array といった組み込み（ネイティブ）オブジェクトもすべて prototype プロパティを持っています。このプロトタイプに新しいプロパティやメソッドを追加することで、既存オブジェクトの機能を自由に拡張できます。 ただし、ネイティブプロトタイプに対して行えるのは「編集」または「追加」のみであり、既存のプ

  8. JavaScriptでカスタムエラーを作成する方法【サンプルコード付き】

    JavaScriptでは、組み込みのErrorクラスを継承することで、アプリケーション固有のカスタムエラーを簡単に定義できます。カスタムエラーを活用すると、エラーの種類や原因を明確に区別でき、デバッグやエラーハンドリングの精度が大きく向上します。 カスタムエラーの基本 カスタムエラーを作成するには、ES6のclass構文でErrorクラスをextendsし、コンストラクタ内でsuper()を呼び出してエラーメッセージを親クラスに受け渡します。さらに、this.nameに独自のエラー名を設定することで、標準のErrorオブジェクトと明確に区別できるようになります。 実装例 以下は、JavaS

  9. JavaScriptのErrorクラスは拡張できる？カスタムエラーを作成する最適な方法

    JavaScriptでは、組み込みのErrorクラスを継承することで、独自のカスタムエラーを作成できます。最も推奨される方法は、ES2015（ES6）以降のclass構文とextendsキーワードを使って、標準のErrorクラスを拡張した新しいカスタムエラークラスを定義することです。カスタムエラーを利用すれば、エラーの種類を名前で判別したり、エラーコードなどの独自のプロパティを持たせたりできるため、アプリケーションの規模が大きくなっても、柔軟で分かりやすいエラーハンドリングを実現できます。カスタムエラーの実装例以下は、JavaScriptでErrorクラスを拡張するサンプルコードです。<

  10. JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

    JavaScriptを使って特定の要素上でマウスイベントを無効にする方法 Webページの開発において、特定の要素に対してクリックやホバーなどのマウス操作を一時的に無効にしたいケースがあります。JavaScriptでは、要素の style.pointerEvents プロパティを操作することで、マウスイベントの有効・無効を簡単に切り替えることができます。 pointer-events は本来CSSのプロパティですが、JavaScriptから動的に変更することも可能です。値を none に設定するとその要素はマウス操作を受け付けなくなり、auto に戻すと再びイベントが有効になります。 実装例（

  11. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  12. JavaScriptでエラーを再スローすることはできる？基本と実装方法を解説

    JavaScriptでは、一度catch句で捕捉した例外を、throw文によって再度スロー（再スロー）することが可能です。再スローを活用すれば、エラーのログ記録や一部の後処理を実行したうえで、最終的なエラー処理を上位の呼び出し元に委譲するといった、柔軟なエラーハンドリング設計が実現できます。 JavaScriptでエラーを再スローするコード例 以下は、入力された数値の大きさに応じてエラーを処理するか、再スローするかを切り替えるサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <

  13. JavaScriptの分割代入を使った関数パラメータの受け渡し方法

    JavaScriptでは、関数にオブジェクトを引数として渡す際、「分割代入（デストラクチャリング）」と呼ばれる構文を利用することで、オブジェクトの各プロパティを個別の変数として受け取ることができます。 さらに、各プロパティにデフォルト値を指定しておけば、対応するプロパティが存在しない場合でもエラーにならず、あらかじめ設定した値が使用されます。これにより、安全で柔軟な関数設計が可能になります。 サンプルコード 以下は、分割代入を使って関数のパラメータを受け取るJavaScriptのコード例です。 <!DOCTYPE html> <html lang="en&quo

  14. JavaScriptのTextEncoderとTextDecoderとは？文字列とバイト列の相互変換をわかりやすく解説

    JavaScriptでは、文字列とバイト列（バイナリデータ）を相互に変換したい場面がよくあります。そんなときに活躍するのが、TextEncoderとTextDecoderという2つの標準組み込みAPIです。本記事では、それぞれの役割と基本的な使い方を、実際に動くサンプルコードとともに解説します。 TextEncoderとは TextEncoderは、指定した文字列をUTF-8形式に変換（エンコード）するためのオブジェクトです。encode()メソッドに文字列を渡すと、変換結果がUint8Array（符号なし8ビット整数の配列）として返されます。 TextDecoderとは TextDecod

  15. JavaScriptで配列の平均値を計算する方法

    JavaScriptで配列の平均値を求めるには、配列内のすべての要素を合計し、その合計を配列の長さ（要素数）で割ります。要素の合計を求めるには、forEach()メソッドやreduce()メソッドを使うと簡単に実装できます。コード例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia

  16. JavaScriptで配列の中央値を計算する方法をわかりやすく解説

    中央値（メジアン）とは、数値データを小さい順に並べたときにちょうど中央に位置する値のことです。JavaScriptで配列の中央値を求めるには、まず配列をソートし、その後要素数に応じて処理を分けます。要素数が奇数の場合は中央の1つの要素を、偶数の場合は中央に近い2つの要素の平均値を中央値として返します。中央値の計算手順配列をソートする － 数値配列の場合、sort() メソッドに比較関数 (a, b) => a - b を渡して正しく昇順ソートします。中央のインデックスを求める － Math.floor(arr.length / 2) で中央位置を整数として取得します。要素数の判定を行う

  17. JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

    JavaScriptで画像をBlobに変換するには？Webアプリケーション開発では、画像などのファイルデータを「Blob（Binary Large Object：バイナリラージオブジェクト）」として扱いたい場面が多くあります。たとえば、画像のアップロード処理やCanvasへの描画、サーバーへのデータ送信などがその代表例です。JavaScriptでは、fetch()メソッドとBlobオブジェクトを組み合わせることで、URLから取得した画像を簡単にBlobへ変換できます。以下に実際のサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=&q

  18. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ

  19. 【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

    JavaScriptにおけるFileとFileReaderとは？ JavaScriptでは、<input type=file>要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。 さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。 サンプルコード 以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示し

  20. JavaScriptで多次元配列をフラット化する方法【flat()メソッドの使い方】

    JavaScriptでは、flat()メソッドを使うことで、入れ子になった多次元配列を簡単にフラット化（平坦化）できます。この記事では、実際のコード例とともに、多次元配列のフラット化の手順をわかりやすく解説します。 flat()メソッドとは flat()は、ES2019（ES10）で導入された配列メソッドで、ネストされた配列を指定した深さまで展開して新しい配列を返します。引数には展開する深さ（depth）を数値で指定します。 arr.flat() … 深さ1まで展開 arr.flat(2) … 深さ2まで展開 arr.flat(Infinity) … すべてのネストを完全に展開 実装例：ボ

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:135/297  20-コンピューター/Page Goto:1 129 130 131 132 133 134 135 136 137 138 139 140 141