JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptの関数に任意の数の引数を渡す方法【argumentsオブジェクトの使い方】

    JavaScriptでは、関数を呼び出すときに渡せる引数の数に制限がありません。そのため、宣言された仮引数の数と実際に渡す引数の数が一致していなくても、エラーにならずに動作します。この仕様が、Javaのような言語で見られる伝統的なオーバーロード(多重定義)がJavaScriptではサポートされていない理由でもあります。 argumentsオブジェクトとは argumentsは、アロー関数以外のすべての関数内で利用できるローカル変数(オブジェクト)です。関数の中でargumentsオブジェクトを参照することで、その関数に渡された引数へアクセスできます。argumentsには、関数が呼び出され

  2. JavaScriptでオブジェクトをディープコピー（深いコピー）する方法

    オブジェクトのディープコピー（深いコピー）とは、コピー対象のオブジェクト内に含まれるネストされたすべてのオブジェクトまで完全に複製することです。コピーと元のオブジェクトは一切の参照を共有しないため、片方を変更してももう片方には一切影響しません。最も手軽な方法は、オブジェクトをJSON文字列に変換してから、再びJavaScriptオブジェクトへ戻すというものです。ただし、この方法ではメソッド（関数）や undefined、Symbol などはコピーできない点に注意が必要です。サンプルコードlet obj = {     foo: 1,  &nbs

  3. JavaScriptのイベントバブリングとキャプチャリングを初心者向けにわかりやすく解説

    JavaScriptでイベント処理を扱う際、イベントバブリングとイベントキャプチャリングという2つの重要な概念を理解しておくことは不可欠です。これらは、ネストされた要素に対してイベントリスナーが登録されている場合に、イベントハンドラが呼び出される順序を決定する仕組みです。 イベントバブリングとは？ イベントバブリングとは、ある要素が別の要素の中にネストされていて、両方の要素が同じ種類のイベント（例：クリック）に対するリスナーを登録している場合に、イベントがまず最も内側の要素で捕捉・処理され、その後外側の要素へと伝播していく動作のことです。 イメージとしては、水中で泡（バブル）が下から上へ浮か

  4. JavaScriptのArray#sort()関数が内部で使用するソートアルゴリズムとは？

    JavaScriptで配列を並べ替える際に使われるArray#sort()。しかし、その内部でどのようなソートアルゴリズムが動いているのか、正確に答えられる方は意外と少ないかもしれません。実は、ECMAScript（JavaScript）の仕様では、Array.sortの実装に使用するアルゴリズムを特定していません。この点は実装者（各JSエンジンの開発元）に委ねられており、その結果、エンジンごとに異なるソートアルゴリズムが採用されています。Mozilla（SpiderMonkey）の場合：マージソートMozillaが開発する「SpiderMonkey」JSエンジンでは、マージソート（merge

  5. 【JavaScript】通常の関数とアロー関数の3つの違いを徹底解説

    MDN（Mozilla Developer Network）によると、アロー関数（Arrow Function）は、通常の関数式をより簡潔に記述できる構文ですが、this、arguments、super、new.target といったキーワードに対する独自のバインディングを持ちません。そのため、アロー関数はメソッドとして使うには不向きであり、コンストラクターとしても利用できません。 本記事では、JavaScriptにおける通常の関数とアロー関数の3つの重要な違いを、実際のコード例とともにわかりやすく解説します。 1. アロー関数は独自の「this」を持たない アロー関数には自分自身の thi

  6. 【JavaScript】文字列を整数に変換するparseInt()関数の使い方

    JavaScriptで文字列を整数に変換するには、parseInt()関数を使用します。この関数は、引数として渡された文字列の中に数値が含まれている場合、その数値を整数として返します。一方、文字列に数値が一切含まれていない場合は、NaN（Not a Number：数値ではない）を返します。また、parseInt()関数はスペースを受け付けないという特徴があります。スペースを含む文字列が渡された場合は、スペースより前の部分にある数値だけが出力として返されます。parseInt()の構文parseInt(value);この関数は文字列を受け取り、それを整数に変換します。文字列の中に整数が存在しない

  7. JavaScriptのObject.create()メソッドで独自プロトタイプを使ってオブジェクトにアクセスする方法

    JavaScriptでは、Object.create()というメソッドを使用することで、既存のオブジェクトを基にした新しいオブジェクト（独自のプロトタイプ）を作成し、その既存オブジェクトへアクセスすることができます。このメソッドを使うと、既存のオブジェクトが持つプロパティを新しく作成したオブジェクトへ継承させることが可能です。ここでは、その仕組みと使い方をわかりやすく解説します。 Object.create()の構文 Object.create(既存のオブジェクト); このメソッドは引数として渡された既存のオブジェクトをプロトタイプとする新しいオブジェクトを生成します。そのため、既存オブジェク

  8. JavaScript配列の反復に「for…in」ループを使うのはなぜ悪い考えなのか？

    for...inループの問題点とはJavaScriptで配列を反復処理する場合、多くの場面では「for...in」ループよりも通常の「for」ループを使用する方が適切です。その理由は、「for...in」ループは配列のインデックス（キー）を返す仕様になっており、途中に存在する「空きインデックス（ホール）」については一切考慮されないためです。一方、通常の「for」ループは配列の値を順番に取り出し、空きインデックスには「undefined」が返されます。そのため、配列の構造を正確に把握しながらコードを書くことができ、開発者の混乱を防げます。構文1：for...inループfor (var x in

  9. JavaScript正規表現における\wと\Wの違いとは？

    \w と \W の違い JavaScriptの正規表現において、\w と \W には重要な違いがあります。\w は「単語文字（ワードキャラクタ）」、つまり英数字やアンダースコアにマッチするのに対し、\W は「単語文字以外の文字（ノンワードキャラクタ）」、たとえば & や ^、% などの記号にマッチします。なお、\w は文字クラス [A-Za-z0-9_] と同等、\W はその否定である [^A-Za-z0-9_] と同等と考えると理解しやすいでしょう。以下で詳しく見ていきましょう。 構文1 new RegExp(\\w, g); 上記のコードは、JavaScriptで「単語文字」を検

  10. JavaScriptの正規表現における\dと\Dの違いを徹底解説

    \dと\Dの違いとは？JavaScriptの正規表現には、\dと\Dという対になるパターンがあります。この2つはまったく逆の働きをするのが大きな特徴です。\dはテキスト内の数字（0〜9）にマッチし、\Dは数字以外の文字（アルファベット、記号、スペースなど）にマッチします。これらのパターンは、グローバル検索フラグである「g」と組み合わせて使われることが多く、これによりテキスト全体から該当するすべての文字を抽出できます。gフラグを使わない場合、最初にマッチした1文字だけが返される点に注意しましょう。書式1：\d（数字にマッチ）new RegExp(\\d, g);書式2：\D（数字以外にマッチ）n

  11. JavaScriptの通常関数とアロー関数の違いを徹底解説！thisとnewキーワードの挙動

    通常関数とアロー関数の違い アロー関数は、コードをより簡潔に記述するために用意された構文です。通常関数とアロー関数はどちらもほぼ同じように動作しますが、いくつかの重要な違いがあります。本記事では、それぞれの構文の違いに加えて、thisキーワードやnewキーワードの扱いについて、具体例を挙げながらわかりやすく解説します。 アロー関数の構文 let x = (params) => { // コード }; 通常関数の構文 let x = function functionname(params){ // コード }; thisキーワードの挙動の違い アロー関数は自身のthisを持ちません。そ

  12. React.jsでフォームを扱う方法：制御コンポーネント（Controlled Components）徹底解説

    通常のHTMLフォームでは、inputなどのフォーム要素が自身の値を内部的に保持しており、送信ボタンが押されたタイミングでまとめてデータが送信されます。シンプルなHTMLフォームの例<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name=&qu

  13. JavaScriptは値渡し？参照渡し？オブジェクトの受け渡しの仕組みをわかりやすく解説

    JavaScriptは基本的に「値渡し（pass by value）」の言語です。しかし、オブジェクトに関しては少し特殊で、渡される「値」の中身が参照（リファレンス）そのものになっています。この仕組みを理解すると、関数にデータを渡したときの挙動が明確になります。プリミティブ型（数値など）を渡した場合まず、数値などのプリミティブ型を例に見てみましょう。関数に引数として渡した値を関数内で変更しても、呼び出し元の変数には一切影響しません。コード例let i = 0; function increment(x) { x = x + 1 console.log(x) } incremen

  14. JavaScriptで実装するマージソートとクイックソートの徹底解説

    マージソート(Merge Sort)とは マージソートは、分割統治法(Divide and Conquer)に基づいたソートアルゴリズムです。最悪計算量は O(n log n) と非常に効率的ですが、その代償として追加の O(n) のメモリ領域が必要になるという特徴があります。 ここでは、このアルゴリズムを2つの関数、mergeSort と merge を作成して実装していきます。 merge(マージ) ― 2つの引数(部分的にソートされた2つの配列)を受け取り、要素を正しい順序で挿入しながら1つの配列に結合する関数です。 mergeSort(マージソート) ― 配列の左半分と右半分に対し

  15. JavaScriptで基数ソート（ラディックスソート）を実装する方法

    基数ソート（ラディックスソート）は、整数を「桁」の値に基づいてバケットへ振り分けることで整列を行うアルゴリズムです。クイックソートやマージソートのような比較ベースのソートとは異なり、数値同士を直接比較するのではなく、一の位・十の位・百の位といった桁ごとに段階的に並べ替えていく点が大きな特徴です。ここでいう「基数」とは、対象となる値がどの記数法に基づいているかを表すものです。一般的な10進数の場合、基数は10となり、各ステップでは0〜9までの10個のバケットが用意されます。基数ソートの基本的な流れ配列の中から最大値を求め、必要な桁数を把握します。下位の桁（一の位）から順に、各数値をその桁の値に応

  16. JavaScriptで特定のノードの最初・最後の子ノードを取得する方法

    JavaScriptでは、特定のノードの最初の子ノードと最後の子ノードを取得するために、それぞれ firstChild と lastChild プロパティが用意されています。この記事では、両者の基本的な使い方をサンプルコードと出力結果付きでわかりやすく解説します。 firstChild とは firstChild は、指定したノードの最初の子ノードを返すプロパティです。なお、テキストノードやコメントノードも「子ノード」に含まれるため、HTMLの書き方によっては意図しないノードが返ることがあります（詳細は後述の注意点を参照）。 構文 node.firstChild; 使用例 次の例では、u

  17. JavaScriptのgetElementByIdメソッドの仕組みと使い方を徹底解説

    getElementByIdとはgetElementById()は、指定した値と一致するID属性を持つ要素を取得して返すDOMメソッドです。HTML DOMにおける最も基本かつ頻繁に使われるメソッドのひとつであり、ページ上の要素を操作したいほぼすべての場面で活用されます。このメソッドの主な特徴は以下の通りです。指定したIDを持つ要素が存在しない場合、nullを返します。IDは1つのページ内で一意（ユニーク）である必要があります。同じIDを持つ要素が複数存在した場合は、ドキュメント内で最初に見つかった要素が返されます。要素の内部テキストやHTMLにアクセスするには、.innerHTMLプロパティ

  18. JavaScriptで配列の最初と最後の要素を取得する方法

    JavaScriptの配列は0から始まるインデックス（ゼロベース）で管理されています。つまり、最初の要素はインデックス「0」の位置にあり、最後の要素は「配列の長さ（length） − 1」の位置に存在します。そのため、最初と最後の要素には以下のようにアクセスできます。コード例arr[0] // 最初の要素 arr[arr.length - 1] // 最後の要素 // 実際の使用例 let arr = [1, test, {}, hello]; console.log(arr[0]); console.log(arr[arr.length - 1]);実行結果1 hello補足：より簡潔に書

  19. JavaScriptで配列の最初の要素と最後の要素を取得する方法

    配列とは、複数の要素をひとまとめにして管理するデータ構造です。各要素にはそれぞれ固有のインデックス番号が割り当てられており、このインデックスを使うことで任意の要素へアクセスできます。ただし、最後の要素に関しては、配列に含まれる要素数が分からなければインデックスも確定しないため、少し工夫が必要です。本記事では、これらの方法をわかりやすく解説します。 最初の要素へのアクセス JavaScriptでは配列のインデックスは「0」から始まるため、最初の要素の位置は常に分かっています。そのため、値の取得は非常に簡単です。配列を arr とすると、最初の要素の値は arr[0] で表されます。 サンプ

  20. JavaScriptのWeakMap.has()メソッドの使い方を徹底解説

    WeakMap.has()メソッドとはWeakMap.has()メソッドは、指定した要素がWeakMapオブジェクト内に存在するかどうかを確認するために使用されるメソッドです。このメソッドは、指定されたキーに対応する要素がWeakMapオブジェクト内に存在するかどうかを示す真偽値（boolean）を返します。要素が存在する場合はtrueが返され、存在しない場合はfalseが返されます。構文weakMap.has(obj);has()メソッドは、引数としてオブジェクトを受け取り、そのオブジェクトがWeakMap内に存在するかどうかを調べます。そして、その結果に基づいて真偽値（boolean）を出

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:163/297  20-コンピューター/Page Goto:1 157 158 159 160 161 162 163 164 165 166 167 168 169