JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptの配列findIndex()関数の使い方をわかりやすく解説

    JavaScriptのfindIndex()関数は、配列の中から指定した条件を満たす最初の要素を見つけ、そのインデックス番号を返すメソッドです。条件に合う要素が見つかった場合、その要素のインデックスが返されます。もし条件を満たす要素がひとつも存在しない場合は、-1が返されるという特徴があります。findIndex()の基本的な使い方以下は、findIndex()関数を使ったサンプルコードです。ボタンをクリックすると、配列内の「lion」という要素のインデックスを取得して表示します。サンプルコード<!DOCTYPE html> <html lang="ja"

  2. JavaScriptのArray.from()メソッドとは？使い方と実例をわかりやすく解説

    Array.from()メソッドは、配列風オブジェクト（array-like）や反復可能オブジェクト（iterable）から、新しい配列オブジェクトを作成するための便利なメソッドです。文字列、Map、Set、NodeListなど、さまざまなデータを手軽に配列へ変換できます。 Array.from()の基本的な動作 例えば、文字列「HelloWorld」に対してArray.from()を使用すると、1文字ずつ分割された新しい配列が生成されます。以下に実際のコード例を示します。 サンプルコード <!DOCTYPE html> <html lang="ja"&g

  3. JavaScript DataView()とは？ArrayBufferのバイナリデータを読み書きする方法

    JavaScript の DataView は、ArrayBuffer（バイナリデータ）に対して、さまざまな数値型の読み書きを行うための低レベルインターフェースを提供するオブジェクトです。DataView を使うことで、1バイト単位で細かく制御しながら、Int16、Int32、Float64 など複数の数値型として同じバッファにアクセスできます。なお、ArrayBuffer はそのままでは直接操作できないため、DataView や TypedArray を介してアクセスする必要があります。DataView の主なメソッドsetInt16(offset, value)：指定したオフセット位置に

  4. JavaScriptのDateコンストラクタープロパティとは？使い方を実例で解説

    JavaScriptのDateコンストラクタープロパティは、その日付オブジェクトを生成した元となるコンストラクター関数（Date()）を返すプロパティです。すべてのJavaScriptオブジェクトが持つconstructorプロパティの一つで、Dateオブジェクトに対して使用すると、function Date() { [native code] }という形式の関数定義が出力されます。 このプロパティを活用することで、あるオブジェクトが本当にDateインスタンスであるかを確認したり、動的に新しいDateオブジェクトを生成したりすることができます。以下に、実際の動作を確認できるサンプルコードを紹介

  5. JavaScriptの関数呼び出しの基本！()を使ってコードを実行する方法

    JavaScriptにおける関数の呼び出し（インボケーション）とはJavaScriptでは、一度定義した関数は、関数名の後ろに () を付けることで呼び出すことができます。これを「関数の呼び出し（インボケーション）」と呼びます。関数は定義しただけでは実行されません。呼び出しを行って初めて、関数定義の中括弧 { } 内に記述されたコードが実際に実行されます。以下は、JavaScriptで関数を呼び出す方法を実装したサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <met

  6. JavaScriptの関数パラメーターとは？使い方をサンプルコードで解説

    JavaScriptでは、関数を呼び出すときにさまざまなパラメーター（引数）を渡すことができます。関数側では、渡されたパラメーターを受け取り、それに対して任意の処理を実行することが可能です。また、1つの関数は複数のパラメーターを受け取ることができ、それぞれのパラメーターはカンマ（,）で区切って指定します。さらに、JavaScriptには arguments オブジェクトが用意されており、仮引数として宣言した変数とは別に、実際に関数へ渡されたすべての引数へアクセスできます。以下のサンプルコードでは、Array.from(arguments) を使って受け取った引数を配列化し、順番に画面へ出力して

  7. JavaScriptのジェネレーター関数とは？yieldの仕組みと使い方を実例で解説

    JavaScriptのジェネレーター関数（Generator Function）は、yieldキーワードを使って値を順番に生成できる特別な関数です。通常の関数と異なり、一度値を返してもその内部状態（実行位置や変数など）が保持されるため、次に呼び出されたときには、前回yieldを実行した直後の続きから処理を再開できます。 ジェネレーター関数を呼び出すたびに、呼び出し元へ新しい値が1つずつ返されます。この仕組みにより、大量のデータを一括生成するのではなく、必要なタイミングで少しずつ値を取り出すことが可能になります。 ジェネレーター関数の基本的な特徴 関数宣言時に function* を使用して定

  8. JavaScriptの配列lengthプロパティとは？使い方とサンプルコードを解説

    JavaScriptのlengthプロパティは、配列に格納されている要素の総数（配列の長さ）を取得したり、設定したりできる便利なプロパティです。配列操作において最もよく使われるプロパティの一つであり、ループ処理や条件分岐など、さまざまな場面で活用されます。 lengthプロパティの基本 lengthプロパティは、以下のような特徴を持っています。 配列内の要素数を数値として返す 値を代入することで配列の長さを変更できる（短くすると要素が削除される） インデックスは0から始まるため、最後の要素のインデックスは「length - 1」になる サンプルコード 以下は、lengthプロパティを使って

  9. JavaScriptのArray.prototypeコンストラクタとは？配列に独自メソッドを追加する方法

    JavaScriptのArray.prototypeコンストラクタは、配列オブジェクトに新しいメソッドやプロパティを追加するための仕組みです。ここで追加したメソッドやプロパティは、その後作成されるすべての配列から利用できるようになります。 Array.prototypeの基本的な仕組み JavaScriptでは、すべての配列インスタンスはArray.prototypeを継承しています。そのため、このプロトタイプに独自のメソッドを定義すると、組み込みのmap()やfilter()と同じように、任意の配列から直接呼び出すことが可能になります。 次の例では、配列の偶数番目の要素を大文字へ、奇数番目の

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

    JavaScriptのarray.keys()メソッドは、配列の各要素のキー（インデックス番号）のみを格納した配列イテレータオブジェクトを生成するメソッドです。返されたイテレータをfor...ofループなどで反復処理すると、「0」「1」「2」といったインデックスを順番に取り出すことができます。 基本構文 arr.keys() このメソッドは引数を受け取らず、元の配列を変更しない（非破壊的な）ため、安全に利用できます。 サンプルコード 以下は、array.keys()メソッドを使用した具体的なコード例です。「CLICK HERE」ボタンをクリックすると、配列のキーが画面に表示されます。 &l

  11. JavaScriptのErrorオブジェクト「name」プロパティの使い方と実例

    JavaScriptにおけるErrorオブジェクトのnameプロパティは、発生したエラーの名前（種類）を読み取ったり、独自のエラー名を設定したりするために使用されます。エラーハンドリングを行う際に、どのような種類のエラーが発生したのかを判別するのに非常に役立ちます。 主なエラー名の一覧 JavaScriptには、あらかじめ定義されている標準的なエラー名がいくつか存在します。 Error — 汎用的なエラー SyntaxError — 構文エラー ReferenceError — 存在しない変数や参照のエラー TypeError — 型が期待と異なる場合のエラー RangeError — 値が

  12. 【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説

    JavaScriptのescape()関数とはJavaScriptのescape()関数は、文字列をエンコードするために使用される関数です。文字列内の特殊文字をASCII形式のエスケープシーケンス（%xx の形式）に変換します。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在の開発では使用が推奨されていません。URIのエンコード目的であれば、代わりにencodeURI()やencodeURIComponent()を使用することが標準的な方法です。escape()の使用例それでは、実際にJavaScriptのescape()関数を使用したサンプル

  13. JavaScriptのexec()メソッドとは？正規表現マッチングの使い方を徹底解説

    JavaScriptのexec()メソッドは、正規表現オブジェクトに対して文字列内のパターン一致検索を実行するためのメソッドです。指定した文字列の中に一致するテキストが見つかった場合はそのマッチ結果を返し、見つからなかった場合は null を返します。 exec()メソッドの基本構文 regexObj.exec(str) regexObj：検索を実行する正規表現オブジェクト（RegExpインスタンス） str：検索対象となる文字列 戻り値は、一致が見つかった場合にはマッチ情報を含む配列（index や input プロパティも付加される）、見つからなかった場合は null となります。

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

    JavaScriptのfocus()メソッドは、要素がフォーカス可能である場合に、その要素へフォーカスを移動させるために使用されるメソッドです。テキスト入力欄やボタンなど、ユーザー操作を受け付ける要素に対して呼び出すことで、プログラムから自動的にフォーカスを設定できます。フォーム入力時の利便性向上やアクセシビリティ対応など、さまざまな場面で活用されています。 以下は、JavaScriptのfocus()メソッドを使った具体的なサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head>

  15. JavaScriptのapply()メソッドとは？別オブジェクトで関数を再利用する方法を解説

    JavaScriptのapply()メソッドとは JavaScriptのapply()メソッドを使用すると、あるオブジェクト向けに定義したメソッドを、別のオブジェクトでもそのまま再利用できます。最大の特徴は、関数に渡す引数を配列としてまとめて指定できる点です。これにより、柔軟で使い回しやすい関数設計が可能になります。 apply()の基本構文は以下のとおりです。 func.apply(thisArg, [arg1, arg2, ...]) 第1引数（thisArg）：関数内でthisとして参照されるオブジェクトを指定します。 第2引数（argsArray）：関数へ渡す引数を配列形式で指定しま

  16. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ

  17. JavaScriptの関数定義とは？基本構文と書き方を実例で解説

    JavaScriptにおける関数定義は、基本的に以下の要素で構成されます。functionキーワード：関数であることを示す予約語関数名：呼び出し時に使用する識別子引数（パラメータ）：括弧内に記述する入力値波括弧 { }：実行されるJavaScriptの処理（ステートメント）を囲むブロック関数定義の2つの主な書き方JavaScriptでは、大きく分けて「関数宣言」と「関数式」という2つの方法で関数を定義できます。それぞれの特徴は次のとおりです。1. 関数宣言（function宣言）function helloWorld() { alert(HELLO WORLD); }functionキーワ

  18. JavaScriptのarray.includes()メソッドの使い方をわかりやすく解説

    array.includes()メソッドとはJavaScriptのarray.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するために使用されます。要素が存在すれば true、存在しなければ false を返します。基本構文arr.includes(searchElement[, fromIndex])searchElement：検索したい要素を指定します。fromIndex（省略可能）：検索を開始するインデックス位置を指定します。デフォルトは 0 です。なお、includes()メソッドは大文字と小文字を区別する点に注意してください。サンプルコード以下は、a

  19. JavaScriptのArray.isArray()メソッドとは？オブジェクトが配列かどうかを判定する方法

    Array.isArray()メソッドとはJavaScriptのArray.isArray()メソッドは、指定された値が配列（Array）であるかどうかを判定するための静的メソッドです。引数に渡したオブジェクトが配列であれば true を、そうでなければ false を返します。typeof 演算子では配列も object と判定されてしまうため、配列を正確に見分けたい場合には、この Array.isArray() メソッドを使用するのが確実です。基本構文Array.isArray(value)サンプルコード以下は、Array.isArray() メソッドを使ってオブジェクトが配列かどうかをチ

  20. JavaScriptでカーソルプロパティを操作する方法

    JavaScriptにおけるcursorプロパティは、要素上にマウスポインタを重ねたときに表示されるカーソルの種類を設定、または取得するために使用されます。このプロパティを使うことで、「crosshair（十字）」「pointer（指）」「wait（待機中）」など、さまざまなカーソルスタイルを動的に変更できます。以下に、JavaScriptでcursorプロパティを実装するサンプルコードを示します。実装例<!DOCTYPE html> <html> <head> <style>    body {    

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