-
JavaScriptのビット単位XOR演算子(^)とは?仕組みと使い方をわかりやすく解説
ビット単位XOR演算子(^)とはJavaScriptのビット単位XOR(排他的論理和)演算子「^」は、整数の引数の各ビットに対してブール値の排他的論理和演算を実行します。排他的論理和とは、2つのオペランドのどちらか一方だけが真である場合に真(1)となり、両方が真、または両方が偽の場合は偽(0)になる論理演算です。ビットごとの演算結果XOR演算では、対応する各ビットを比較し、ビットの値が異なる場合に「1」、同じ場合に「0」を返します。ビットAビットBA ^ B の結果000011101110使用例以下のコードを実行して、ビット単位XOR演算子の動作を確認してみましょう。変数aには2(2進数で「1
-
JavaScriptのカンマ演算子(,)とは?基本構文と実用的な使い方を解説
カンマ演算子とはJavaScriptのカンマ演算子(,)は、左から順にすべてのオペランドを評価し、最後のオペランドの値を返す演算子です。複数の式を1つの文にまとめて記述したい場合に活用できます。構文カンマ演算子の基本構文は以下のとおりです。expression1, expression2, …… expressionNforループでの使い方カンマ演算子を使うと、forループの初期化式や更新式で複数の変数を同時に扱うことができます。以下の例では、変数 a をインクリメントしながら、同時に変数 b をデクリメントしています。for (var a = 0, b = 5; a <= 5; a++
-
変数名を使ってJavaScriptの関数を読み込む方法【無名関数の基本】
変数名を使用してJavaScriptの関数をロードするには?JavaScriptにおいて、無名関数(匿名関数)は常に変数名を使って読み込まれます。無名関数とは、その名の通り「名前を持たない関数」のことで、識別子を定義せずに関数を作成できるのが特徴です。このような関数は他の関数の引数として渡すこともでき、実行する際には変数名を通じて呼び出します。無名関数の基本的な書き方以下のように、function式を変数に代入することで無名関数を作成できます。var func = function() { alert(これは無名関数です);}func(); //
-
JavaScriptでURLアドレスを検証する方法をわかりやすく解説
JavaScriptでURLアドレスを検証するには? JavaScriptでURLアドレスの妥当性を確認するには、正規表現(regex)を使うのが一般的な方法です。正規表現による検証では、正しい形式のURLであれば「true」を、誤った形式であれば「false」を返します。 正規表現パターンが対応するURLの構成要素 今回紹介するパターンは、以下のURL構成要素すべてに対応しています。 プロトコル:http または https(省略可能) ドメイン名:英数字とハイフンで構成されるドメイン IPアドレス(IPv4):ドット区切りの数値形式 ポート番号:コロンに続く数値(省略可能) クエリ文字列
-
JavaScriptで5秒後にWebページを自動的に読み込む方法
JavaScriptのsetTimeout()関数を使用すると、一定の時間が経過した後にWebページを読み込むことができます。この関数は、指定されたミリ秒数だけ処理を待機し、その後に関数や処理を実行します。setTimeout()の第1引数には実行したい関数を、第2引数には待機時間をミリ秒単位で指定します。例えば「5000」を指定すると、5秒後に処理が実行されます。サンプルコード以下のコードを実行すると、5秒後にWebページが読み込まれる動作を確認できます。<!DOCTYPE html> <html> <body> &
-
JavaScriptの==と===の違いとは?等価演算子の使い分けをわかりやすく解説
JavaScriptには、値を比較するための2種類の等価演算子があります。それが「==(ダブルイコール)」と「===(トリプルイコール)」です。一見似ていますが、動作は大きく異なり、この違いを理解することはバグの少ないコードを書くために非常に重要です。 ==(抽象的等価演算子)とは ダブルイコール(==)は抽象的等価比較演算子と呼ばれ、比較を行う前にオペランド(比較する値)を同じ型に変換してから評価します。この暗黙的な型変換により、異なる型同士でも「等しい」と判断されることがあります。 == の使用例 4 == 4 // true 4 == 4 // true(文字
-
JavaScriptの符号なし右シフト演算子(>>>)とは?意味と使い方を解説
)とは符号なし右シフト演算子(>>>)は、通常の右シフト演算子(>>)と非常によく似たビット演算子ですが、決定的な違いが一つあります。それは、左側からシフトされて入ってくるビットが常にゼロ(0)であるという点です。つまり、空いた左側のビットには必ず0が埋められます。通常の右シフト演算子(>>)では符号ビット(最上位ビット)が維持されるため、負の数をシフトすると左側に1が埋められます。一方、>>>は符号を考慮せずに常に0で埋めるため、オペランドが負の数であっても、結果は必ず正の整数になります。使用例以下のコードを実行して、符号なし右シフ
-
JavaScriptで5秒後にWebページを自動リダイレクトする方法【setTimeout活用】
Webページを5秒後に自動的に別のURLへ転送(リダイレクト)したい場合は、JavaScriptのsetTimeout()メソッドを使うのが最もシンプルで確実な方法です。setTimeout()は、指定した時間(ミリ秒)が経過した後に関数を一度だけ実行します。その関数内でwindow.location.hrefに移動先のURLを代入することで、任意のページへリダイレクトさせることができます。実装例:5秒後にリダイレクトするコード以下のコードをブラウザで開くと、ページが表示されてから5秒後に指定したURLへ自動的に遷移します。<!DOCTYPE html><html>&n
-
JavaScriptを使わずに一定時間後にWebページをリダイレクトする方法
METAタグを使ったリダイレクトの基本HTMLページから別のページへリダイレクトするには、METAタグを使用します。METAタグのhttp-equiv属性に「refresh」を指定し、content属性の値としてHTTPヘッダーに相当する情報を設定します。content属性の値は、ページをリダイレクトさせるまでの秒数を表します。この方法を利用すれば、訪問者を新しいホームページへ自動的にリダイレクトできます。ページを即座に読み込ませたい場合は、content属性の値を「0」に設定してください。コード例以下は、現在のページを2秒後に別のページへリダイレクトするサンプルコードです。<!DOCT
-
JavaScriptのtypeof演算子とは?使い方と戻り値の一覧をわかりやすく解説
typeof演算子は、単一のオペランドの直前に配置される単項演算子(unary operator)です。オペランドには任意の型の値を指定でき、演算の結果として、そのオペランドのデータ型を示す文字列が返されます。たとえば、オペランドが数値であれば「number」、文字列であれば「string」、真偽値であれば「boolean」と評価されます。 この演算子は、変数の型を動的に判定したい場合や、条件分岐の中で型チェックを行いたい場合に非常に便利です。 typeof演算子の戻り値一覧 以下の表は、typeof演算子が各データ型に対して返す文字列の一覧です。 データ型typeofが返す文字列 N
-
JavaScriptの剰余(モジュロ)演算子「%」とは?使い方とサンプルコード
JavaScriptの剰余演算子(%)は、整数の除算を行った際の「余り」を出力する演算子です。英語ではModulus(モジュラス)やModulo(モジュロ)と呼ばれ、数値が偶数か奇数かの判定、周期処理、配列のインデックス操作など、さまざまな場面で活用されます。基本的な使い方以下のコードを実行すると、剰余演算子(%)の動作を確認できます。変数aを変数bで割った余りが計算され、結果として表示されます。<html> <body> <script> &nbs
-
JavaScriptの乗算演算子(*)とは?基本的な使い方を解説
JavaScriptにおける乗算演算子(*)は、2つのオペランド(被演算子)を掛け合わせるための算術演算子です。数値同士の掛け算を行い、その積を結果として返します。乗算演算子の基本構文result = a * b;上記のように、*記号を使って左辺と右辺の値を掛け合わせることができます。サンプルコード以下のコードを実行すると、JavaScriptで乗算演算子がどのように動作するかを確認できます。<html> <body> <script>
-
JavaScriptでURLからホスト名を抽出する方法をわかりやすく解説
JavaScriptでURLからホスト名(ドメイン名)の部分だけを取り出したい場合は、URLオブジェクトが持つhostnameプロパティを使うのが最も簡単です。 URLオブジェクトとhostnameプロパティ URLコンストラクタにURL文字列を渡してインスタンスを作成すると、そのURLを構成する各要素(プロトコル、ホスト名、パス、クエリなど)に個別にアクセスできるようになります。このうちホスト名はhostnameプロパティで取得できます。 サンプルコード 以下は、実際に動作するシンプルなデモです。 <!DOCTYPE html> <html> <body>
-
JavaScriptの条件演算子(三項演算子)とは?基本構文と使い方を解説
JavaScriptの条件演算子(三項演算子とも呼ばれます)は、まず式を評価してその結果が真(true)か偽(false)かを判定し、評価結果に応じて2つの値のうちどちらか一方を返す演算子です。if文を使わずに簡潔に条件分岐を記述できるため、実務でも頻繁に利用されています。条件演算子の構文番号演算子と説明1?:(条件演算子)条件が真(true)であれば値Xを、そうでなければ値Yを返します。基本的な書き方条件式 ? 値X : 値Y;この構文では、まず「条件式」が評価されます。結果がtrueであれば「値X」が返され、falseであれば「値Y」が返されます。サンプルコード以下のコードを実行すると、J
-
JavaScriptの自己実行関数(IIFE)の目的とは?使い方をわかりやすく解説
自己実行関数の主な目的は、その関数内で宣言された変数が関数の内部でのみ有効になるという点にあります。自己実行関数の中で宣言された変数は、デフォルトでは外部からアクセスできず、関数内部のコードからのみ参照可能です。これにより、グローバルスコープの汚染を防ぎ、他のコードとの変数名の衝突を回避できます。このような関数は「即時実行関数式(IIFE:Immediately Invoked Function Expression)」と呼ばれ、定義された瞬間に自動的に実行される関数です。基本の構文自己実行関数の基本的な構文は以下のとおりです。(function() { &n
-
JavaScriptの「||」演算子とは?varステートメントでの使い方を解説
「||」演算子とはJavaScriptにおける「||」は論理OR(論理和)演算子です。2つのオペランドのうち、どちらか一方でも非ゼロ(truthyな値)であれば、条件式全体が true になります。両方のオペランドが false の場合のみ、結果は false となります。また、「||」演算子には短絡評価(ショートサーキット評価)という特徴があります。左側のオペランドがすでに true と評価できる場合、右側のオペランドは評価されません。この性質を利用して、変数にデフォルト値を設定する際にもよく使われます。使用例以下は、var ステートメントで宣言した変数に対して「||」演算子を使用する例です
-
JavaScriptのnull合体演算子とは?使い方をわかりやすく解説
JavaScriptのnull合体演算子とは「null合体演算子」とは、左辺の値がnullまたはundefinedである場合に、代わりに右辺の値(デフォルト値)を返す演算子です。C#では ?? がnull合体演算子として広く知られていますが、実はJavaScriptにもES2020から同じ ?? 演算子が導入されています。従来の論理和演算子(||)との違い以前のJavaScriptでは、デフォルト値の設定に ||(論理和)演算子がよく使われてきました。|| は2つのオペランドのうちどちらか一方でも真と評価されれば条件式全体がtrueになる論理演算子です。ただし、左辺がfalseと評価されるすべ
-
JavaScriptのdelete演算子とは?オブジェクトのプロパティを削除する方法
delete演算子とは JavaScriptでは、オブジェクトから特定のプロパティを削除したい場合に、deleteキーワード(delete演算子)を使用します。delete演算子は、指定したオブジェクトのプロパティを完全に取り除くためのもので、削除後はそのプロパティにアクセスしてもundefinedが返されます。 基本的な構文 delete オブジェクト名.プロパティ名; 使用例 以下のコードは、オブジェクトからrankプロパティを削除する実際の例です。ブラウザで実行して動作を確認してみましょう。 <!DOCTYPE html> <html>  
-
JavaScriptで2つの数値の差を求める関数を作成する方法
JavaScriptで2つの数値の差(差分)を取得したい場合は、Math.abs()メソッドを関数内で使用するのが最もシンプルで確実な方法です。Math.abs()とは?Math.abs()は、引数として渡した数値の絶対値を返す組み込みメソッドです。通常、単純に「num1 - num2」と計算すると、引数の順序によって結果が負の数になる可能性があります。しかしMath.abs()を使えば、どちらの順序で引き算しても常に正の値(または0)が返されるため、「差」を正確に表現できます。実装例以下のコードは、2つの数値の差を求める関数を定義し、その結果を画面に出力するサンプルです。実際にブラウザで動作
-
JavaScriptにおけるシングルクォートとダブルクォートの違いとは?
JavaScriptでは、文字列を囲む引用符としてシングルクォート()とダブルクォート()のどちらを使用しても、動作上の違いはありません。しかし、プロジェクト内ではどちらか一方に統一することが強く推奨されます。コードの一貫性が保たれることで可読性が向上し、チーム開発の際にも混乱を防ぐことができます。 シングルクォートとダブルクォートは機能的に同等 JavaScriptにおいて、両者の間に機能的な差は存在しません。どちらの引用符を使っても同じ文字列として扱われます。ただし、文字列の中に同じ種類の引用符を含めたい場合は、バックスラッシュ(\)によるエスケープ処理が必要です。 // ダブルクォー