JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのgetPrototypeOf()メソッドとは？具体例でわかる使い方とプロトタイプの確認方法

    JavaScriptのgetPrototypeOf()メソッドとは？ getPrototypeOf()メソッドは、ユーザーが作成したオブジェクトのプロトタイプ（内部スロット [[Prototype]]）を取得するために使用されるメソッドです。また、「2つのオブジェクトが同じプロトタイプを持っているかどうか」を比較したい場合にもよく活用されます。 以下に、getPrototypeOf()関数を使った具体的なコード例を示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta cha

  2. JavaScriptのgetTime()メソッドとは？使い方とサンプルコードを解説

    getTime()メソッドとはJavaScriptのgetTime()メソッドは、1970年1月1日0時0分0秒（UTC、いわゆる「エポック」）から経過した時間をミリ秒単位で返すDateオブジェクトのメソッドです。この値はUnixタイムスタンプとしても知られており、日付の比較や計算、有効期限の管理など、さまざまな場面で活用されています。以下に、getTime()メソッドを使った具体的なサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset=

  3. JavaScriptのglobalプロパティとは？正規表現の「g」修飾子の有無を判定する方法

    JavaScriptのglobalプロパティとはJavaScriptのglobalプロパティは、正規表現（RegExp）オブジェクトに「g（グローバル）」修飾子が設定されているかどうかを判定し、設定されていればtrue、されていなければfalseを返す真偽値のプロパティです。「g」修飾子が付いた正規表現は、文字列内の最初の一箇所だけでなく、一致するすべての箇所に対してマッチングを行います。globalプロパティを使えば、その設定が有効になっているかを実行時に確認できます。以下のコード例を見てみましょう。コード例<!DOCTYPE html> <html lang="

  4. 【初心者向け】JavaScriptのHistory（履歴）オブジェクトの使い方を解説

    HistoryオブジェクトとはJavaScriptのHistory（履歴）オブジェクトは、ユーザーが訪問したURLの履歴リストを管理するためのオブジェクトです。このオブジェクトを利用することで、ブラウザの「戻る」「進む」ボタンのような操作をプログラムから実行したり、履歴リスト内の特定のURLを読み込んだりすることができます。主なプロパティとメソッドhistory.length … 現在のセッションで訪問したページ数（履歴の長さ）を取得します。history.back() … 履歴を1つ前のページへ戻ります。history.forward() … 履歴を1つ先のページへ進みます。history.

  5. JavaScript即時呼び出し関数式（IIFE）とは？基本の使い方をわかりやすく解説

    JavaScriptにおける即時呼び出し関数式（IIFE：Immediately Invoked Function Expression）とは、定義された直後に自動的に実行される関数のことです。通常の関数とは異なり、後から手動で呼び出す必要がないのが最大の特徴です。IIFEの基本的な構文IIFEは、無名関数を括弧 () で囲み、その直後に実行用の括弧 () を続けて記述します。(function () { // ここに処理を書く })();サンプルコード以下は、JavaScriptでIIFEを使用した具体的なコード例です。<!DOCTYPE html> <html lan

  6. JavaScriptのInfinityプロパティとは？浮動小数点数の上限と下限を解説

    JavaScriptにおけるInfinityプロパティの概要 JavaScriptでは、浮動小数点数が表現できる最大値（Number.MAX_VALUE：約1.797693134862315 × 10308）を超えると、値は Infinity（正の無限大）として表示されます。逆に、表現できる最小の下限を超えて数値が小さくなりすぎた場合は -Infinity（負の無限大）として表示されます。 この仕組みは、JavaScriptがIEEE 754規格に基づく倍精度浮動小数点数を採用しているためです。計算結果が扱える範囲を外れると、エラーにはならず、自動的に無限大として処理される点が特徴的です。

  7. JavaScriptのJSON配列とは？基本構造と実装例をわかりやすく解説

    JSON（JavaScript Object Notation）は軽量なデータ交換形式であり、その配列はJavaScriptの配列とほぼ同じ形で表現されます。角括弧 [] の中に値をカンマ区切りで並べることで、文字列や数値、オブジェクトなど複数のデータをひとつにまとめて扱えます。以下は、JavaScriptのオブジェクト内にJSON配列を含めた基本的な例です。let obj = { name:Rohan, sports : [cricket,Football,volleyball,hockey] }この例では、「sports」というプロパティに4つのスポーツ名が配列として格納さ

  8. JavaScriptでJSONデータからHTMLを動的に生成する方法

    はじめにWeb開発において、APIから取得したJSONデータをHTMLとして画面に表示する処理は非常によく使われるテクニックです。本記事では、JavaScriptのfetchメソッドを使ってJSONデータを取得し、そのデータをもとにHTMLのテーブルを動的に生成する方法を解説します。補足： 本記事のサンプルコードでは「JSONPlaceholder」というサービスを利用しています。JSONPlaceholderは、テストやプロトタイプ開発のために用意された無料のダミー（フェイク）REST APIであり、実際のサーバーを構築しなくても手軽にJSONデータの取得を試すことができます。サンプルコード

  9. JavaScriptのJSON.parse()メソッドとは？基本の使い方とサンプルコードを解説

    JSON.parse()メソッドとはJSON.parse()メソッドは、JSON形式の文字列を解析（パース）し、そこからJavaScriptオブジェクトを生成するためのメソッドです。Web APIなどから受け取ったJSONデータをJavaScriptで扱える形に変換する際に、最もよく使われる手法の一つです。基本的な構文は以下の通りです。JSON.parse(text[, reviver])第1引数には解析対象のJSON文字列を指定し、省略可能な第2引数のreviver関数を使うと、変換後の値を加工することもできます。サンプルコード以下は、JSON.parse()メソッドを使ってJSON文字列を

  10. JavaScriptのJSON.stringify()とは？使い方とサンプルコードでわかりやすく解説

    JSON.stringify()メソッドとは？ JavaScriptのJSON.stringify()は、JavaScriptオブジェクトをJSON形式の文字列に変換するためのメソッドです。Webサーバーへデータを送信する際や、localStorageにデータを保存する際など、データを文字列として扱いたい場面で特に役立ちます。 基本構文 JSON.stringify(value, replacer, space) value：JSON文字列に変換したいオブジェクトや配列（必須） replacer：出力するプロパティを関数や配列で選択できる（省略可能） space：インデント用の空白の数。指定

  11. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  12. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ

  13. JavaScriptオブジェクトからプロパティを削除する方法｜delete演算子の使い方

    JavaScriptのオブジェクトからプロパティを削除するには、delete演算子を使用します。delete演算子を使うと、指定したプロパティがオブジェクトから完全に取り除かれます。なお、単にプロパティに undefined を代入した場合と異なり、delete演算子を使えばプロパティそのものをオブジェクトから削除できる点に注意してください。サンプルコード<!DOCTYPE html> <html> <body> <h1>JavaScript Object Properties Example</h1> <h2 class=&q

  14. JavaScriptでブラウザのオンライン・オフライン状態を検出する方法

    Webアプリケーションを開発していると、ユーザーが現在インターネットに接続しているかどうかを判定したい場面があります。JavaScriptでは、navigator.onLineプロパティを使うことで、ブラウザがオンライン状態かオフライン状態かを簡単に検出できます。 navigator.onLine プロパティとは navigator.onLineは、ブラウザの接続状態を真偽値（boolean）で返すプロパティです。 インターネットに接続している場合：true オフラインの場合：false このプロパティをボタンのクリックイベントなどと組み合わせることで、ユーザーの接続状況に応じた処理を実装

  15. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから

  16. JavaScriptのSymbol.toStringTagシンボルとは？オブジェクトの型説明をカスタマイズする方法

    Symbol.toStringTagは、JavaScriptにおける「ウェルノウンシンボル（Well-known Symbols）」の一つで、最もよく知られているシンボルです。これは文字列値を持つプロパティであり、オブジェクトが生成される際に、そのオブジェクトの型に関する説明（description）を付与するために使用されます。 通常、Object.prototype.toString()メソッドを呼び出すと「[object Object]」のような文字列が返されますが、Symbol.toStringTagを独自に定義することで、この表示内容を自由にカスタマイズできます。 Symbol.to

  17. JavaScriptのsymbol.valueOf()関数の使い方を徹底解説

    JavaScriptのsymbol.valueOf()関数とはJavaScriptのsymbol.valueOf()関数は、Symbolオブジェクトが持つプリミティブ値（Symbolそのもの）を返すメソッドです。SymbolはES6（ECMAScript 2015）で導入されたプリミティブ型の一つであり、一意で不変の値を生成するために使用されます。オブジェクトのプロパティキーとして利用することで、名前の衝突を防ぐことができます。基本構文symbol.valueOf()このメソッドは引数を受け取らず、呼び出し元のSymbolオブジェクトのプリミティブ値をそのまま返します。実装例以下は、symbo

  18. JavaScriptでオートコンプリート／サジェスト機能を実装する方法

    入力フォームに文字を打つと候補が自動的に表示される「オートコンプリート（サジェスト）機能」は、ユーザビリティを大きく向上させる定番のUIパターンです。JavaScriptでは、HTMLの<datalist>要素とkeyupイベントを組み合わせることで、シンプルかつ効率的にこの機能を実装できます。 実装のポイント この実装では以下の仕組みを利用します。 <datalist>要素：入力欄に候補リストを紐づけるためのHTML標準要素 keyupイベント：ユーザーがキーを入力するたびに検索処理を実行 部分一致検索：indexOf()を使い、大文字小文字を区別せずに入力値とタグ

  19. JavaScriptの日付取得メソッド一覧と使い方を徹底解説

    JavaScriptでは、Dateオブジェクトを使うことで、現在の日時や指定した日時から年・月・日・時刻などの情報を簡単に取得できます。以下は、日付情報を取得するための主要なメソッドの一覧です。 メソッド説明 getFullYear()年を4桁の数値で返します(例：2024)。 getMonth()月を数値で返します(0〜11)。0が1月、11が12月に対応するため注意が必要です。 getDate()日を数値で返します(1〜31)。 getHours()時を返します(0〜23)。 getMinutes()分を返します(0〜59)。 getSeconds()秒を返します(0〜59)。

  20. JavaScriptでspan要素のテキストを取得する方法

    JavaScriptで要素のテキストを取得するには、document.querySelector()で対象の要素を取得し、そのinnerHTMLプロパティを参照します。以下に、実際に動作するサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initi

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:146/297  20-コンピューター/Page Goto:1 140 141 142 143 144 145 146 147 148 149 150 151 152