JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptの数値（Number）の基本と実践サンプルコード

    JavaScriptでは、整数も小数もすべて「Number」型として扱われます。この記事では、数値変数の定義方法と、それらを使った簡単な演算の例を、動作するHTMLサンプルコードとともに紹介します。サンプルコード以下は、JavaScriptで数値を扱う基本的な例です。整数（22、99）と小数（1.523）を変数に格納し、ボタンをクリックすると画面に表示する仕組みになっています。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. JavaScriptのオブジェクトアクセサー（getter・setter）の使い方をわかりやすく解説

    オブジェクトアクセサーとは？JavaScriptでは、オブジェクトのプロパティへアクセスするためにgetter（ゲッター）とsetter（セッター）というキーワードを使用できます。getterは、プロパティが参照された際にその戻り値を返します。一方、setterは引数を受け取り、オブジェクト内のプロパティ値をその引数に設定します。これらを活用することで、プロパティの読み書きの際にバリデーションや計算処理などを柔軟に組み込むことが可能になります。getterとsetterの基本構文オブジェクトリテラル内でgetおよびsetキーワードを用いることで、通常のプロパティと同じ構文でアクセスできる特殊な

  3. JavaScriptのオブジェクトメソッドとは？使い方とサンプルコードを解説

    JavaScriptにおけるオブジェクトメソッドとは、オブジェクトに対して実行できる操作（アクション）のことです。オブジェクトは文字列や数値などのデータ（プロパティ）だけでなく、関数を値として持つことができ、この関数が「メソッド」として機能します。メソッド内では this キーワードを使用することで、そのオブジェクト自身が持つプロパティへアクセスできます。これは、オブジェクト指向プログラミングにおいて非常に重要な概念です。オブジェクトメソッドのサンプルコード以下は、ユーザーの入力した名前と年齢から、成人かどうかを判定するメソッドを持つオブジェクトを作成する例です。<!DOCTYPE ht

  4. JavaScriptオブジェクトのプロパティとは？基本とアクセス方法をわかりやすく解説

    JavaScriptオブジェクトのプロパティとは JavaScriptにおける「プロパティ」とは、オブジェクトに関連付けられた値のことです。オブジェクトは「プロパティ名（キー）と値」のペアの集まりで構成されており、ドット記法（object.property）やブラケット記法（object[property]）を使ってアクセスできます。 以下は、JavaScriptでオブジェクトのプロパティを実装したコード例です。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=

  5. JavaScriptのPromise（プロミス）とは？非同期処理の基本と使い方を解説

    JavaScriptのPromise（プロミス）は、作成された時点ではまだ値が確定していない非同期処理を扱うためのオブジェクトです。APIリクエストやファイルの読み込みなど、完了まで時間がかかる処理について、「いずれ結果を受け取る」という約束を表現します。Promiseは、以下の3つの状態を持ちます。pending（保留中）：処理がまだ完了しておらず、成功も失敗も確定していない初期状態fulfilled（履行済み）：処理が正常に完了し、結果の値が利用できる状態rejected（拒否済み）：処理が失敗し、エラーの理由が利用できる状態一度fulfilledまたはrejectedに遷移したPromi

  6. JavaScriptのProxy（プロキシ）オブジェクトとは？使い方をサンプルコードで解説

    Proxyオブジェクトとは JavaScriptのProxy（プロキシ）オブジェクトは、元のオブジェクトや関数をラップ（包み込む）し、プロパティへのアクセスや関数の呼び出しなどの基本的な操作に対して、独自のカスタム処理を挟むための仕組みです。 Proxyは次の2つの引数を受け取ります。 target：操作対象となる元のオブジェクト handler：カスタム動作（トラップ）を定義するオブジェクト handler内では、プロパティ取得時に呼ばれるget、プロパティ設定時に呼ばれるsetなど、さまざまなトラップを定義できます。 サンプルコード 以下は、Proxyオブジェクトを使って、オブジェク

  7. JavaScriptでランダムな数値を生成する方法｜Math.random()の使い方を解説

    JavaScriptのMath.random()関数は、0以上1未満の範囲でランダムな浮動小数点数を生成するために使用されます。戻り値は「0以上・1未満」であり、1自体は含まれない点に注意してください。この関数を活用すれば、サイコロのようなランダムな整数の生成や、くじ引き・シャッフル処理など、さまざまな場面で乱数を利用できます。Math.random()で1〜10のランダムな整数を生成する方法1から10までのランダムな整数を取得するには、Math.random()の結果に10を掛け、Math.floor()で小数点以下を切り捨てた後、1を加算します。数式で表すと以下のようになります。Math.

  8. JavaScriptでURLをリダイレクトする方法を解説

    Web開発において、ユーザーを別のページへ誘導する「リダイレクト」はよく使われる処理です。JavaScriptを使えば、ボタンクリックなどの操作に応じて簡単にURLを別のページへ切り替えることができます。JavaScriptでリダイレクトを実現する基本の書き方JavaScriptでページをリダイレクトするには、window.location.href に移動先のURLを代入します。以下のコードでは、ボタンがクリックされたタイミングで www.google.com へ遷移するようにしています。サンプルコード<!DOCTYPE html> <html lang="ja&

  9. JavaScriptの正規表現（RegExp）とは？基本の使い方を実例付きで解説

    正規表現（Regular Expression）とは、検索パターンを表す文字列のことです。あらかじめ定義したパターンをもとに、テキストの中から特定の文字列や条件に一致する部分を効率的に検索したり、置換したりすることができます。 JavaScriptでは、スラッシュ「/」で囲んでパターンを記述する方法と、RegExpオブジェクトを使う方法の2通りで正規表現を作成できます。また、パターンには「g（グローバル検索：すべての一致を対象）」「i（大文字・小文字を区別しない）」「m（複数行モード）」などのフラグを組み合わせることで、より柔軟な検索が可能です。 ここでは、replace() メソッドと正規

  10. JavaScriptのremoveEventListener()メソッドの使い方とサンプルコード解説

    JavaScript の removeEventListener() メソッドは、addEventListener() によって要素に登録されたイベントリスナーを削除するためのメソッドです。例えば、ボタンのクリック処理を一定回数だけ有効にしたい場合や、特定の条件を満たした時点でイベント処理を停止したい場合などに活用できます。 基本構文 element.removeEventListener(event, function, useCapture); event：削除対象のイベント名（例：click） function：削除する関数への参照 useCapture：登録時に指定したキャプチャ設

  11. JavaScriptでURLからGETパラメータの値を取得する方法

    JavaScriptでは、URLオブジェクトとsearchParamsプロパティを組み合わせることで、URLに含まれるGETパラメータ（クエリ文字列）の値を簡単に取得できます。本記事では、実際のコード例とともにその手順をわかりやすく解説します。 実装例 以下は、サンプルURL「https://www.google.com?imageSize=440&color=blue」から、imageSizeとcolorという2つのGETパラメータの値を取り出して画面に表示するコード例です。 <!DOCTYPE html> <html lang=ja> <head>

  12. JavaScriptのlastIndexプロパティとは？正規表現のマッチ位置を取得する方法

    lastIndexプロパティとは JavaScriptにおける「lastIndex」プロパティは、正規表現オブジェクトが持つプロパティの一つで、直前のマッチが終了した位置（インデックス）を返します。そして、次回の検索はその位置から再開されるという仕組みになっています。 重要な注意点として、lastIndexプロパティは「g」（グローバル）フラグが設定されている場合にのみ機能します。「g」フラグがない状態では、lastIndexは常に0のまま変化しないため、連続した検索を行うことができません。 以下は、JavaScriptでlastIndexプロパティを使用する際のコード例です。 サンプルコード

  13. JavaScriptのlengthプロパティで配列オブジェクトの長さを取得する方法

    JavaScriptにおけるlengthプロパティとはJavaScriptのlengthプロパティは、文字列や配列などのオブジェクトが持つ要素数（サイズ）を返すために使用されます。配列の場合は格納されている要素の個数、文字列の場合は文字数を取得できます。ここでは、文字列と配列オブジェクトの長さをlengthプロパティで取得するサンプルコードを紹介します。サンプルコード以下の例では、ボタンをクリックすると配列の長さが画面に表示される仕組みを実装しています。<!DOCTYPE html> <html lang="ja"> <head> <

  14. JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

    letキーワードとは 2015年（ECMAScript 2015／ES6）に導入されたletキーワードは、ブロックスコープを持つ変数を宣言するためのものです。letで宣言した変数は、それを囲む波括弧 { } の内側でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。 varとの主な違い スコープ： varは関数スコープですが、letはブロックスコープになります。 再宣言： 同じスコープ内であればvarによる再宣言は可能ですが、letで再宣言するとSyntaxErrorになります。 宣言前の参照： letで宣言した変数は、宣言より前にアクセスするとReferenceE

  15. JavaScriptのlocation.protocolプロパティとは？使い方とサンプルコードを解説

    JavaScriptのlocation.protocolプロパティとは？JavaScriptのlocation.protocolプロパティは、現在表示しているページのURLで使用されているプロトコルを文字列として返します。戻り値は「https:」や「http:」のように、末尾のコロンまで含まれる点に注意しましょう。このプロパティを活用すると、ページがHTTPS（暗号化された安全な通信）で配信されているかどうかを簡単に判定できます。たとえば、セキュリティの状態に応じて処理を切り替えたい場合や、HTTP接続時に警告を表示したい場合などに役立ちます。サンプルコード以下は、ボタンをクリックすると現在の

  16. JavaScriptのmatch()メソッドとは？正規表現で文字列を検索する方法を実例付きで解説

    JavaScriptのmatch()メソッドは、文字列に対して正規表現によるパターンマッチングを実行し、一致する箇所が見つかった場合にその結果を配列オブジェクトとして返すメソッドです。文章中から特定のパターンに該当する部分をすべて抽出したい場合などに活用できます。 match()メソッドの基本構文 string.match(regexp) 引数には検索に使用する正規表現を指定します。正規表現に「g」フラグを付けると、文字列内のすべての一致結果が配列に格納されて返されます。なお、一致するものが見つからなかった場合は「null」が返される点に注意してください。 match()メソッドの使用例 以下

  17. JavaScriptのMathオブジェクト入門！round・sqrt・powなど主要メソッドの使い方を実例付きで解説

    Mathオブジェクトとは JavaScriptのMathオブジェクトは、数値に対してさまざまな数学的操作を実行するための組み込みオブジェクトです。円周率（PI）などの数学定数や、四捨五入・平方根・べき乗といった計算に便利なメソッドが用意されています。 Mathオブジェクトはコンストラクタではないため、new演算子でインスタンスを生成する必要はありません。すべてのプロパティとメソッドは、Math.round() のように直接呼び出すことができます。 よく使われるMathオブジェクトの主なメソッド Math.round(x)：数値を最も近い整数に四捨五入して返します。 Math.sqrt(x)

  18. JavaScriptのmultilineプロパティとは？正規表現の「m」フラグ判定方法を実例付きで解説

    JavaScriptのmultilineプロパティは、正規表現オブジェクトに「m」フラグ（複数行モードの修飾子）が設定されているかどうかを判定し、設定されていれば true、されていなければ false を返す読み取り専用のプロパティです。「m」フラグが有効な場合、「^」（行頭）や「$」（行末）が文字列全体ではなく、改行で区切られた各行の先頭・末尾にマッチするようになります。multilineプロパティを参照すれば、そのフラグが実際に設定されているかをプログラムから簡単に確認できます。multilineプロパティのサンプルコード以下は、multilineプロパティの動作を確認できるHTMLのコ

  19. JavaScriptのNumber.MAX_VALUEとNumber.MIN_VALUEプロパティの使い方をわかりやすく解説

    JavaScript の Number.MAX_VALUE と Number.MIN_VALUE は、JavaScriptで扱える数値の上限と下限を示す静的プロパティです。この記事では、それぞれのプロパティが持つ値の意味と、実際に動作するサンプルコードを交えて詳しく解説します。 Number.MAX_VALUE・Number.MIN_VALUEとは？ Number.MAX_VALUE は、JavaScriptで表現できる最大の数値（約1.7976931348623157 × 10308）を返します。一方、Number.MIN_VALUE は「最小の負の数」ではなく、ゼロに最も近い正の数（約5

  20. JavaScriptのNumber()関数とは？使い方とサンプルコードを解説

    JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを

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