JavaScript | コンピューター

【JavaScript】decodeURIComponentとdecodeURIの違いとは？使い分けをわかりやすく解説

decodeURIComponentとはJavaScriptでURLの一部（コンポーネント）をデコードしたい場合は、decodeURIComponent()メソッドを使用します。このメソッドは、encodeURIComponent()によってエンコードされた文字列を元の形式に戻すためのもので、セミコロン（;）・スラッシュ（/）・クエスチョンマーク（?）・アンパサンド（&）といった予約文字も含めて、すべてのエンコード文字をデコードするのが特徴です。サンプルコード以下のコードを実行すると、URLコンポーネントのエンコードとデコードの動作を確認できます。<!DOCTYPE html&g

【JavaScript】DIVの外側をクリックしたときにDIVを非表示にする方法

DIVの外側をクリックしたときにDIVを非表示にする方法 Webアプリケーションを開発していると、モーダルウィンドウやドロップダウンメニューなど、「ユーザーが要素の外側をクリックしたら閉じる」という動作を実装したい場面がよくあります。JavaScriptを使えば、この機能はとてもシンプルに実現できます。基本的な仕組みポイントは、document全体にクリックイベントを設定し、クリックされた要素（e.target）のIDが対象のDIVと一致しない場合に、そのDIVを非表示にすることです。以下のコードを実行して、実際の動作を確認してみてください。サンプルコード <!DOCTYP

JavaScriptで連想配列（ハッシュ）を使う方法｜オブジェクトとMapの使い方を解説

JavaScriptの配列（Array）は、0から始まる数値インデックスでのみ要素へアクセスできます。そのため、PHPのような「連想配列」は標準ではサポートされていません。しかし、オブジェクトやMapを活用すれば、キーと値のペア（ハッシュ）と同じことを簡単に実現できます。本記事では、その具体的な方法をサンプルコード付きで解説します。配列は数値インデックスで動作するまず、通常のJavaScript配列の挙動を確認しましょう。以下の例では、数値インデックスを使って値を代入しています。サンプルコード <!DOCTYPE html> <html> <body>

JavaScriptの論理OR演算子（||）とは？使い方と動作の仕組みを解説

論理OR演算子（||）とはJavaScriptにおける || は論理OR演算子と呼ばれるもので、2つのオペランド（被演算子）のうち、どちらか一方でも「真（truthy）」と評価される値であれば、条件全体が true になります。両方のオペランドが「偽（falsy）」である場合にのみ、結果は false となります。基本的な動作左辺が truthy な値 → そのまま左辺の値を返す左辺が falsy な値 → 右辺の値を返すこの性質を利用すると、単なる条件判定だけでなく、「デフォルト値の設定」などにも活用できます。コード例以下は、|| 演算子をJavaScriptで使用する基本的な例です。<

JavaScriptの論理AND演算子（&&）とは？基本から使い方まで解説

JavaScriptにおける論理AND演算子（&&）は、2つの条件がどちらも真（true）である場合にのみ、全体の結果が真になる演算子です。片方でも偽（false）であれば、結果は偽になります。論理AND演算子の基本的な動作 &&演算子は、左右のオペランド（被演算子）を評価し、両方が真とみなせる値の場合にtrueを返します。それ以外の場合はfalseを返します。条件A条件BA && B truetruetrue truefalsefalse falsetruefalse falsefalsefalse サンプルコード以下のコード

JavaScriptで関数の呼び出しを遅延させる方法｜setTimeout()の基本と使い方

JavaScriptで関数の実行を遅らせたい場合には、setTimeout() 関数を使用します。setTimeout()は、指定したミリ秒（1/1000秒）が経過した後に、指定された関数を一度だけ実行するための組み込みメソッドです。setTimeout() の構文setTimeout(functionname, milliseconds, arg1, arg2, arg3...)各パラメータの意味は以下のとおりです。functionname －実行したい関数の名前、または関数そのものを指定します。milliseconds －遅延させる時間をミリ秒単位で指定します。例えば5000ミリ秒は5

JavaScriptの乗算代入演算子（*=）とは？意味と使い方をわかりやすく解説

乗算代入演算子（*=）は、右オペランドと左オペランドを掛け合わせ、その計算結果を左オペランドに代入する演算子です。つまり、「a *= b」は「a = a * b」と同じ意味になります。基本的な書き方乗算代入演算子は次のように記述します。 x *= y; // x = x * y と同じ意味毎回変数名を繰り返し書く必要がないため、コードが簡潔になり、可読性も向上します。使用例以下のコードを実行して、乗算代入演算子の動作を確認してみましょう。 <html> <body>

JavaScriptでオプションの関数パラメータを宣言するにはどうすればよいですか？

JavaScriptでオプションの関数パラメータを宣言する方法JavaScriptでオプション（任意指定）の関数パラメータを宣言するには、デフォルト引数を使用します。デフォルト値をあらかじめ設定しておくことで、関数呼び出し時にその引数が省略されても自動的にデフォルト値が適用され、エラーを防ぎながら柔軟な関数を定義できます。以下のコードを実行して、オプションパラメータの宣言を試してみましょう。例<html> <body> <script> &n

JavaScript関数で無制限の引数を扱う方法｜argumentsオブジェクトの使い方

JavaScriptでは、関数に渡す引数の個数を事前に固定しなくても、arguments オブジェクトを使えば任意の数の引数を受け取ることができます。argumentsオブジェクトとは？arguments は、関数が呼び出されたときに自動的に利用できる特別なオブジェクトです。宣言された仮引数の数に関わらず、実際に渡されたすべての引数を配列のような形式（Array-like object）で保持します。arguments.length：実際に渡された引数の個数を取得できます関数名.length：関数定義時に宣言された仮引数の個数を取得できますこの2つを比較することで、「想定していた引数の数」と「

JavaScriptでiframeから親ウィンドウの関数を呼び出す方法を解説

iframe内から親ウィンドウ（親ページ）で定義された関数を呼び出すには、window.topを使用します。window.topは、最上位階層にある親ウィンドウへの参照を返すプロパティで、これを経由することでiframeの中からでも親ウィンドウの関数や変数にアクセスできます。サンプルコード以下のコードは、iframe内のリンクをクリックした際に、親ウィンドウ側で定義されたdisplay()関数を呼び出す例です。実際にブラウザで動作を確認してみてください。<!DOCTYPE html> <html> <body> &nb

JavaScriptで関数にコメントする標準的な方法とは？JSDocの基本と書き方

JavaScriptで関数にコメントを記述する際の事実上の標準は、JSDocと呼ばれる記法です。JSDocは、関数の目的・引数・戻り値などを構造化された形式で文書化するためのもので、多くのエディタやドキュメント生成ツールが対応しています。 JSDocの基本的な書き方関数の直前に、/** で始まり */ で終わるブロックコメントを記述します。各行はアスタリスク（*）で始めるのが一般的なスタイルです。以下は、2つの数値を加算する関数へのJSDocコメントの例です。 /** * 2つの数値を加算します * @param {Number} num1 - 1つ目の数値 * @param {N

JavaScript関数のreturn文は省略できる？値を返す方法をわかりやすく解説

return文は省略可能JavaScriptの関数では、return文は省略できます。つまり、関数は必ずしも値を返す必要はありません。ただし、return文を記述する場合は、関数内の最後の文として書くのが基本です。例えば、関数に2つの数値を引数として渡し、その積（掛け算の結果）を呼び出し元のプログラムに返してもらう、といった使い方ができます。なお、return文を省略した場合や、returnの後に値を指定しなかった場合はundefinedが返される点に注意しておきましょう。また、return文が実行されると、その時点で関数の処理は終了します。サンプルコード以下の例では、2つの引数を受け取り、そ

JavaScriptでJSONオブジェクトを解析する方法【初心者向けに解説】

JSON.parse()メソッドとはJavaScriptでJSON形式の文字列（テキストデータ）をオブジェクトに変換するには、標準組み込みのJSON.parse()メソッドを使用します。このメソッドは、引数として渡されたJSON文字列を解析し、対応するJavaScriptオブジェクトを返します。基本的な構文は以下の通りです。JSON.parse(text[, reviver])text：解析対象となるJSON形式の文字列reviver（省略可能）：変換結果を加工するためのコールバック関数サンプルコード以下は、JSON.parse()を使ってJSONオブジェクトを解析する具体例です。イベント情報

JavaScriptの==と===、どちらを使うべきか？等価演算子の違いを徹底解説

JavaScriptにおける==と===の違いとは？JavaScriptには2種類の等価演算子が存在し、それぞれ動作が大きく異なります。適切に使い分けることは、バグの少ない安全なコードを書く上で非常に重要です。==（ダブルイコール）：抽象的等価演算子==は「抽象的等価比較演算子」と呼ばれ、比較を実行する前にオペランドを同じ型へ変換（型強制）してから比較します。そのため、異なる型同士でも値が一致していればtrueを返します。5 == 5 // true 5 == 5 // true 5 == 5 // true 0 == false // trueこのように、文字列の5と

JavaScriptの関数宣言と関数式の違いとは？基本をわかりやすく解説

JavaScriptでは、関数を定義する方法として主に「関数宣言（Function Declaration）」と「関数式（Function Expression）」の2つがあります。どちらも同じように動作する関数を作成できますが、構文や挙動には重要な違いがあります。この記事では、それぞれの特徴と具体的な書き方をコード例とともに解説します。関数宣言（Function Declaration） JavaScriptでは「function」キーワードを使って関数を宣言します。関数を定義する際は、「function」キーワードに続けて、一意な関数名、パラメータのリスト（空でも可）、そして波括弧 {

JavaScriptで日付に月数を加算する方法をわかりやすく解説

JavaScriptで日付（Dateオブジェクト）に月数を加算するには、まずgetMonth()メソッドで現在の月を取得し、そこに加算したい月数を足します。さらにsetMonth()メソッドと組み合わせれば、日付そのものを指定した月数だけ進めることも可能です。なお、getMonth()が返す月の値は「0〜11」の範囲である点に注意してください。1月が0、12月が11として返されるため、人間が普段使う月の数値として表示するには1を加算する必要があります。サンプルコード以下のコードは、現在の日付を取得して表示し、続いて月の値に1を加算した結果を出力する例です。そのままブラウザで実行できます。

JavaScriptで数値を検証する方法｜isNaN()関数の使い方を解説

JavaScriptである値が数値かどうかを検証したい場合は、isNaN() 関数を使用します。この関数は、引数に渡された値が「数値ではない（Not-a-Number）」かどうかを判定し、結果を真偽値（true / false）で返します。 isNaN()の基本的な動作 isNaN() の戻り値は以下のように解釈できます。 true を返した場合 → その値は数値ではない false を返した場合 → その値は数値として有効つまり、戻り値が false であれば、検証対象の値は数値であると判断できます。サンプルコード次のコードでは、ボタンをクリックすると複数の値に対して isNaN(

JavaScriptで文字列を整数に変換する方法｜parseInt()の使い方を解説

JavaScriptで文字列を整数に変換するには、parseInt()メソッドを使用します。このメソッドは引数として渡された文字列を解析して整数を返し、変換できない値が渡された場合にはNaN（Not a Number）を返します。サンプルコード次のコードを実行すると、文字列を整数に変換した結果を確認できます。「Check」ボタンをクリックすると、画面に変換結果が表示されます。 <!DOCTYPE html> <html> <body> <button onclick = &quo

JavaScriptでURLをデコードする方法｜decodeURI()の使い方と実例付き解説

JavaScriptでURLをデコードするには、decodeURI()メソッドを使用します。このメソッドは、encodeURI()でエンコードされたURIを、人間が読める元の形式へと戻すために使われます。decodeURI()の基本構文decodeURI(encodedURI)引数にはエンコード済みのURI文字列を渡し、戻り値としてデコード後の新しい文字列が返されます。サンプルコード以下は、URLを一度エンコードしてからデコードし、その結果を画面に表示するシンプルな例です。ボタンをクリックすると処理が実行されます。<!DOCTYPE html><html><bod

なぜJavaScriptではインクリメント（++）・デクリメント（--）演算子の使用を避けるべきなのか？

JavaScriptにおけるインクリメント演算子（++）とデクリメント演算子（--）は、コードを短く書ける便利な演算子ですが、予期しない結果を引き起こす原因になることがあります。そのため、多くのコーディング規約ではこれらの演算子の使用を避け、+= 1 や -= 1 を使うことを推奨しています。ここでは、その主な理由を具体例とともに解説します。予期しない結果をもたらす主な要因 1. 代入文での前置・後置の違い前置（++a）と後置（a++）では、値が返されるタイミングが異なります。代入文の中で使うと、意図しない値が変数に格納されてしまうことがあります。 <html> <bod