JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのObject.is()メソッドとは？使い方と「==」との違いを解説

    Object.is()メソッドとはObject.is() は、JavaScriptにおいて2つの値が「同じ」かどうかを判定するための静的メソッドです。等価性の比較を行う点では === や == と似ていますが、いくつかの重要な違いがあります。Object.is() が2つの値を「同じ」と判定する条件は以下の通りです。両方の値が undefined、または両方が null である両方が true、または両方が false である文字列の場合、長さ・含まれる文字・並び順がすべて同一である数値の場合、両者の符号（極性）が等しい両方が NaN である場合も「同じ」とみなされる（NaN === NaN

  2. JavaScriptのObject.seal()とObject.freeze()の違いとは？オブジェクトの変更制御を徹底解説

    Object.seal()とObject.freeze()の最大の違いは、「既存プロパティの値変更を許すかどうか」という点にあります。Object.seal()は既存プロパティの値変更を許可しますが、Object.freeze()はオブジェクトへの一切の変更を許しません。つまり、Object.freeze()で凍結されたオブジェクトは、どんな些細な変更からも完全に保護された（イミュータブルな）状態になります。Object.seal()とはObject.seal()メソッドは、既存プロパティの削除や新規プロパティの追加を防ぎます。しかし、既存プロパティの値そのものまでは保護されず、外部からの値の

  3. JavaScriptのProxy()オブジェクトとは？基本的な使い方とgetトラップの活用例を解説

    Proxy()オブジェクトとはECMAScript 6（ES2015）で導入された新機能のひとつがProxy()オブジェクトです。Proxy()は、プロパティの参照・代入・列挙・関数の呼び出しなど、オブジェクトに対する基本操作に独自のカスタム動作を定義するために使用されます。Proxy()を理解するうえで押さえておきたい、3つの重要なキーワードがあります。handler（ハンドラー）：トラップ（traps）を格納するプレースホルダーとなるオブジェクト。traps（トラップ）：プロパティへのアクセスを横取り（捕捉）し、独自の処理を差し込むための仕組み。target（ターゲット）：Proxyによっ

  4. JavaScriptの純粋関数とは？特徴とサンプルコードでわかりやすく解説

    純粋関数（Pure Function）とは 純粋関数とは、決定論的（deterministic）な関数のことです。つまり、同じ入力を渡せば、何度実行しても必ず同じ出力が返ってくる関数を指します。これは数学でいう「well-defined function（明確に定義された関数）」と同じ概念です。 純粋関数には、主に次の3つの特徴があります。 自分自身の引数だけに依存する スコープ外の変数を変更しようとしない 副作用（side effect）を一切生まない 逆に言えば、これらの条件をひとつでも満たしていない関数は「不純な（impure）関数」とみなされます。 純粋関数ではない例（1）：外部変

  5. JavaScriptでオブジェクトが封印されているかどうかを確認する方法

    JavaScriptでオブジェクトが「封印（シール）」されているかどうかを調べるには、Object.isSealed()メソッドを使用します。このメソッドは、オブジェクトの状態に応じて真偽値（boolean）を返します。 オブジェクトが封印されている条件 オブジェクトが封印されているとみなされるのは、以下の2つの条件がどちらも満たされている場合です。 オブジェクトが拡張不可能（extensibleではない）であること。つまり、新しいプロパティを追加できない状態になっていること。 すべてのプロパティが非コンフィギュラブル（non-configurable）であること。つまり、プロパティの削除

  6. JavaScriptで文字列からHTMLタグを削除する方法【正規表現の使い方を解説】

    JavaScriptでは、正規表現を活用することで、文字列に含まれるHTMLタグやXMLタグを簡単に取り除くことができます。<div>や<span>などのHTML要素は、「<」と「>」で囲まれた形で記述されるため、山括弧の中身ごと括弧も含めて空文字（）に置き換えれば、タグだけを効率的に除去できます。 基本構文 str.replace(/(<([^>]+)>)/ig, ); この正規表現の各部分は、次のような意味を持っています。 i フラグ：大文字・小文字を区別せずにマッチさせます。 g フラグ：文字列内のすべての一致箇所を置換対象にし

  7. JavaScriptで名前空間の汚染を回避するには？原因と対策を実例付きで解説

    名前空間の汚染を回避するにはJavaScriptは関数オーバーロードをサポートしていません。そのため、同じ名前の関数が複数定義されると、読み込まれた順序に応じて後から定義された関数が先の関数を上書きしてしまいます。これはJavaScriptに名前空間の仕組みが存在しないことを意味します。しかし、オブジェクトを利用すれば擬似的な名前空間を作成でき、名前の衝突（コンフリクト）を回避できます。var Tutorix = Tutorix || {};この1行は、「Tutorixオブジェクトがすでに存在する場合はそれを使い、存在しなければ新しい空のオブジェクトを作成する」という意味です。さらに、名前空間

  8. JavaScriptのfor...inループとfor...ofループの違いを徹底解説！正しい使い分けのポイント

    for...inとfor...ofの基本的な違い どちらのループ構文も繰り返し処理を行うためのものですが、最大の違いは「何を」反復処理するのかという点にあります。 for...inはオブジェクトのプロパティ名（キー）を列挙するのに対し、for...ofはオブジェクトが持つ値そのものを反復処理します。それぞれの特徴を具体例とともに見ていきましょう。 1) for...inループ for...inループは、オブジェクトの列挙可能なプロパティを順不同で反復処理します。注目するのは値ではなく、あくまでプロパティ名（キー）です。 次の例では、for...inループを使って配列のプロパティを反復処理し

  9. JavaScriptで正規表現を使って文字列の単語数をカウントする方法

    正規表現を活用すれば、JavaScriptで特定の文字列に含まれる単語数を簡単にカウントできます。本記事では、単語数を正確に求めるための基本的な手順をステップごとにわかりやすく解説します。 単語数カウントの基本手順 文章やフレーズは、通常スペースで区切られた単語の集まりで構成されています。しかし実際のテキストでは、単語同士が2つ以上の連続したスペースで区切られていたり、文字列の先頭や末尾に不要な空白が含まれていたりするケースがあります。こうした状況を考慮せずに単純に分割すると、正しい単語数を得られません。そのため、カウント前に以下の前処理を行うことが重要です。 ステップ1：文字列の先頭と末尾の

  10. JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

    JavaScriptで要素のCSSスタイルを変更する基本 JavaScriptを使えば、HTML要素に適用されているCSSスタイル（文字色、フォントサイズ、フォントスタイルなど）を動的に変更できます。要素を取得するには、getElementById()やgetElementsByClassName()といったメソッドを使用します。 取得した要素に対して「style」プロパティ経由でスタイル名を指定するだけで、ボタンのクリックなどをきっかけに、ページの見た目をリアルタイムに変化させることが可能です。 以下では、getElementById()メソッドを使って、要素のフォントスタイルやフォントサイ

  11. JavaScriptで数値と文字列を加算するとどうなる？連結が起こる仕組みをわかりやすく解説

    数値と文字列の加算で起こることJavaScriptでは、数値と数値を「+」演算子で足すと、通常どおり加算（計算）が行われます。しかし、数値と文字列を足そうとした場合には加算が成立せず、代わりに連結（concatenation）が実行されます。これは、「+」演算子のオペランドにひとつでも文字列が含まれていると、JavaScriptがその処理を文字列の連結として扱うためです。サンプルコード以下の例では、4つの変数 a・b・c・d を用意し、それぞれの計算結果と、typeof 演算子で調べたデータ型を出力して挙動を比較します。<!DOCTYPE html><html><

  12. JavaScriptでオブジェクトの関数プロパティをメソッドとして呼び出す方法

    JavaScriptで関数をメソッドとして扱う方法 JavaScriptのオブジェクトは、複数のプロパティ（キーと値のペア）によって構成されています。そして、値として関数を持つプロパティは「メソッド」と呼ばれ、オブジェクト名.メソッド名() の形式で呼び出すことができます。 プロパティをメソッドとして利用するには、対象のプロパティに関数を定義し、その関数の中でオブジェクト自身の他のプロパティを参照するだけです。このとき重要な役割を果たすのが this キーワードです。 thisキーワードのポイント メソッド内で使用される this は、そのメソッドが属するオブジェクト自身を指します。したがっ

  13. JavaScriptで不正なユーザーからメールアドレスを隠す方法

    Webサイト上にメールアドレスをそのまま掲載すると、スパムボットなどの不正なユーザーに収集されてしまう恐れがあります。そこで本記事では、JavaScriptを使ってメールアドレスの一部をマスク（隠蔽）し、不正なユーザーから保護する方法を解説します。 メールアドレスを隠す基本的な考え方 すべてのメールアドレスには必ず「@」記号が含まれています。この特徴を利用して、以下の手順でメールアドレスを隠します。 まずsplit()メソッドを使って、「@」を区切り文字としてメールアドレスを分割します。たとえば「batman@gmail.com」を分割すると、「batman」と「gmail.com」の2つの

  14. JavaScriptのWeakSet.has()メソッドの使い方をわかりやすく解説

    WeakSet.has()メソッドとはWeakSet.has()は、JavaScriptに標準で組み込まれているメソッドの一つで、指定したオブジェクトがWeakSet内に存在するかどうかを調べ、その結果を真偽値（boolean）として返します。そもそもWeakSetとは、オブジェクトを「弱い参照」としてコレクションに格納できる特殊なオブジェクトであり、他の場所から参照されなくなったオブジェクトはガベージコレクションによって自動的に回収されるという特徴を持っています。構文weakSet.has(obj);引数上記のコードのように、WeakSet.has()は引数「obj」を1つ受け取ります。この

  15. JavaScriptのAtomicsとは？アトミック操作とadd()メソッドの使い方

    Atomics（アトミックス）とはAtomicsは、JavaScriptにおいてアトミック操作（不可分操作）を静的メソッドとして提供する組み込みオブジェクトです。Mathオブジェクトのメソッドと同様に、Atomicsのメソッドやプロパティはすべて静的に提供されます。主にSharedArrayBufferオブジェクトと組み合わせて使用され、複数スレッド間での安全なデータ共有を実現します。アトミック操作はAtomicsモジュール上に実装されています。他のグローバルオブジェクトとは異なり、Atomicsはコンストラクタではありません。そのため、new演算子を使ってインスタンス化したり、関数として直接

  16. JavaScriptの値渡しと参照渡しをわかりやすく解説

    値渡し（Pass by Value）とは値渡しでは、関数を呼び出す際に、変数の「値そのもの」が引数として直接渡されます。そのため、関数の中で引数の値を変更しても、関数の外側にある元の変数には一切影響しません。JavaScriptは常に値渡しで動作するため、プリミティブ型（文字列や数値など）の値を書き換えても、元となるデータが変更されることはありません。次の例では、変数「a」に値1が代入されています。しかし、関数「change」の中で引数に対して値2を代入しています。JavaScriptは常に値渡しであるため、表示される結果は「2」ではなく「1」となります。コード例<html> &l

  17. JavaScriptで配列を空にする3つの方法【サンプルコード付きで解説】

    JavaScriptで配列を空にする方法はいくつかあります。それぞれ挙動や注意点が異なるため、状況に応じて適切な方法を選ぶことが大切です。 まず、例として次のような配列を用意します。 var array1 = [1,2,3,4,5,6,7]; 方法1：新しい空の配列を代入する array1 = []; このコードは、変数array1に新しい空の配列を代入することで、配列を空にします。 この方法がおすすめなのは、元の配列への参照が他に存在しない場合です。ただし注意が必要で、もし別の変数から同じ配列を参照していた場合、その参照先の配列は空にならず、元のデータがそのまま残ってしまいます。 サンプ

  18. JavaScriptオブジェクトにキーが存在するかどうかを確認する方法

    JavaScriptでオブジェクト内に特定のキー(プロパティ)が存在するかどうかを調べるには、主に2つの方法があります。それぞれ動作や特徴が異なるため、状況に応じて適切に使い分けることが重要です。 例として、次のような「employee」オブジェクトを用意します。 var employee = { name: Ranjan, age: 25 } このオブジェクトに「name」プロパティが存在するかどうかを確認してみましょう。 1) in演算子を使う方法 「in」演算子は、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンを通じて継承されたプロパティもチェック対象とし

  19. 【JavaScript】変数が配列かどうか判定する3つの方法（isArray・instanceof・constructor）

    JavaScriptでは、ある変数が配列（Array）であるかどうかを判定したい場面はよくあります。本記事では、代表的な3つの判定方法を、サンプルコードと出力結果付きでわかりやすく解説します。 1）Array.isArray() メソッド Array.isArray() メソッドは、引数として渡された変数が配列かどうかをチェックします。変数が配列であれば true を返し、そうでなければ false を返します。ES5以降で利用できる標準メソッドであり、現在最も推奨されている判定方法です。 構文 Array.isArray(variableName) 例 <html> <

  20. JavaScriptで文字列内の母音の数をカウントする方法をわかりやすく解説

    文字列内の母音の数を数えるとは 英語における母音は「a」「e」「i」「o」「u」の5つです。対象となる文字列の中には、これらの母音が大文字・小文字どちらで含まれている可能性もあるため、両方のケースに対応できるロジックを用意する必要があります。 処理の流れ 以下の例では、ユーザー定義関数 noOfVowels() を作成し、入力された文字列を先頭から読み込みながら、母音だけを集めた文字列 aAeEiIoOuU と照合していきます。この照合処理には indexOf() メソッドを活用します。 indexOf() メソッドは、指定した文字が対象の文字列内に存在する場合にそのインデックス位置を返し

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:172/297  20-コンピューター/Page Goto:1 166 167 168 169 170 171 172 173 174 175 176 177 178