JavaScript

配列の偶数番目の位置にある数値へアクセスしたい場合、配列の要素そのものを順にループするのではなく、位置（インデックス）に対してループ処理を行うのがポイントです。要素を直接ループしてしまうと、偶数番目の位置以外の値まで取得してしまうため、意図した結果になりません。偶数番目の位置の要素を取得する仕組みインデックスに対してループを行い、「if文」という条件分岐を使って現在の位置が偶数かどうかを判定します。位置が偶数であれば、その位置に対応する配列の値を取り出して表示します。サンプルコード以下の例では、forループですべての位置（インデックス）を走査し、空文字列を使って偶数番目の位置の値を組み立ててい

Object.assign()メソッドとはObject.assign()は、1つ以上のソースオブジェクトのプロパティをターゲットオブジェクトにコピーするためのメソッドです。内部的にはソースオブジェクトに対して「get」、ターゲットオブジェクトに対して「set」を使用するため、ゲッターとセッターも呼び出されます。戻り値は、プロパティと値がコピーされたターゲットオブジェクトそのものです。また、ソースにnullやundefinedが含まれていてもエラーはスローされないという特徴があります。構文Object.assign(target, ...sourceObjects);このメソッドは、第1引数にタ

sleep()関数とは sleep()を使うと、関数の実行を一定時間だけ一時停止させることができます。CやPHPなどのプログラミング言語ではsleep(sec)、JavaではThread.sleep()、Pythonではtime.sleep()、Goではtime.Sleep(2 * time.Second)のように呼び出します。 しかし、JavaScriptにはこうしたsleep関数は標準で用意されていません。幸い、Promiseとasync/await構文のおかげで、sleep()と同等の処理を非常に簡単に実装できるようになりました。この記事では、その方法をわかりやすく解説します。 sle

superキーワードとはsuperキーワードは、オブジェクトの親クラス（スーパークラス）が持つ関数やプロパティにアクセスし、呼び出すために使用されます。super.prop や super[expr] といった式は、クラスおよびオブジェクトリテラル内の任意のメソッド定義の中で利用できます。このキーワードは、extendsキーワードを使って別のクラスを継承した「派生クラス（サブクラス）」の中で活用されるのが一般的です。基本構文super(arguments);実行例以下の例では、「Person」というクラスの特性を、「Student」という別のクラスへ継承しています。両方のクラスにはそれぞれ固有

Boolean関数とは開発を進めていると、「はい／いいえ」のように真偽（yes/no）で判断したい場面に遭遇することがあります。そんなときに活躍するのが Boolean() 関数です。この関数は、引数として受け取った値や式を評価し、その結果を true（真） または false（偽） のどちらか一方のみで返します。ここでは、Boolean() 関数の基本的な構文から具体的な使用例まで、詳しく解説していきます。構文Boolean(exp);Boolean() 関数は、引数として渡された式を評価し、その式が有効な値を持つかどうかに応じて true または false を返します。例1：さまざまな値

JavaScriptの組み込みコンストラクターとは？JavaScriptには、あらかじめ言語側で用意されている組み込みコンストラクター（ビルトインコンストラクター）が多数存在します。代表的なものとして、Object()、String()、Number()、Boolean()、Array()、RegExp()などが挙げられます。これらはnewキーワードと組み合わせて使うことで、各データ型に対応したオブジェクトを簡単に生成できます。ただし、注意点があります。Mathオブジェクトはこれらの組み込みコンストラクターには含まれません。なぜなら、Mathはグローバルオブジェクトであり、静的なプロパティやメ

JavaScriptでは、childElementCountプロパティを使用することで、特定のタグ内に含まれる要素の数を取得できます。このプロパティが返すのは要素の「数」のみであり、要素名などの詳細な情報は含まれません。構文document.getElementById(myDIV).childElementCount;使い方は非常にシンプルで、対象となるタグのIDを指定するだけで、そのタグ内に存在する子要素の数が返されます。使用例次の例では、divタグの中に2つのp要素が配置されています。childElementCountプロパティを使って要素の数を取得し、その結果を画面に出力しています。&

JavaScriptで子ノードを新しいノードに置き換えるには、replaceChild()メソッドを使用します。処理の手順としては、まず新しいノードを作成し、その後replaceChild()を呼び出して、古いノードを新しいノードと入れ替えるという流れになります。 構文 node.replaceChild(newnode, oldnode); replaceChild()は「新しいノード」と「古いノード」の2つの引数を受け取り、指定された古いノードを新しいノードで置き換えます。 使用例 次の例では、最初に順序なしリスト（ul要素）の中に「Boost」「Horlicks」「Maltova」の3つ

HTMLの構造では、ある要素（element）の中に別の要素が入れ子になっていることがよくあります。たとえば、div要素の中にspan要素が含まれているケースなどです。 JavaScriptでは、.contains()メソッドを使うことで、あるノードが別のノードを含んでいるかどうかを簡単に判定できます。このメソッドは、条件が満たされればtrueを、満たされなければfalseを返します。 構文 node.contains(node); 使用例 次の例では、span要素がdiv要素の中に配置されています。そのため、コードを実行すると.contains()メソッドはtrueを返し、その結果が出力画面

JavaScriptには、要素から指定した名前の属性ノードを属性オブジェクトとして取得するためのgetAttributeNode()メソッドが用意されています。もし指定した属性が存在しない場合は、戻り値としてnullまたは空文字列（）が返されます。 構文 element.getAttributeNode(attributename); このメソッドは、指定された属性ノードを表す属性オブジェクトを返します。返されたオブジェクトの .value プロパティにアクセスすることで、属性の実際の値を文字列として取得できます。 使用例 以下の例では、異なるクラスを持つ2つの見出しタグが定義されています。g

JavaScriptには、HTML形式のテキストを要素の内外にある指定した位置へ挿入できるinsertAdjacentHTML()メソッドが用意されています。このメソッドで指定できる合法的な位置は、次の4つです。afterbegin：要素内部の先頭（開始タグの直後）afterend：要素自身の直後（終了タグの直後）beforebegin：要素自身の直前（開始タグの直前）beforeend：要素内部の末尾（終了タグの直前）それぞれの位置には固有の役割があり、目的に応じて使い分けることが重要です。ここからは、代表的な使用例を見ていきましょう。例1：afterend を使った挿入次の例では、「ins

JavaScriptで既存の要素を指定位置に挿入するには？JavaScriptには、すでにDOM上に存在する要素を任意の位置に挿入するためのinsertAdjacentElement()メソッドが用意されています。同じタグ名の要素が複数存在する場合は、getElementsByTagName()などで取得した NodeList を配列と同様にインデックスで操作することで、目的の要素を正確に選択できます。構文node.insertAdjacentElement(position, element);positionに指定できる4つの値"beforebegin"：対象ノードの直

JavaScriptには、ある子ノードの前に別のノードを子として挿入するためのinsertBefore()メソッドが用意されています。このメソッドを使うと、2つのリスト間で要素を自由に移動させたり、任意の位置にノードを挿入したりすることができます。insertBefore()メソッドの構文node.insertBefore(newnode, existingnode);第1引数には挿入したい新しいノード（newnode）を、第2引数には基準となる既存の子ノード（existingnode）を指定します。新しいノードは、指定した既存ノードの直前に挿入されます。例1：リスト間で要素を入れ替える次の例

JavaScriptには、リスト要素の兄弟を取得するためのプロパティとして node.nextSibling が用意されています。リスト内の任意の要素さえ特定できれば、その兄弟要素を簡単に見つけ出すことができます。この記事では、nextSibling プロパティの基本構文と、実際のコード例を使った使い方をわかりやすく解説します。基本構文node.nextSibling;例1：最初の要素の兄弟を取得する次の例では、3つのリスト要素（li）を用意しています。nextSibling プロパティを使って、最初の要素の兄弟要素を取得し、その結果を出力画面に表示します。<html> <b

JavaScriptでは、リストなどの要素から子ノードを削除するために、removeChild() メソッドが用意されています。このメソッドを使うと、リスト内の項目をインデックス位置を指定して自由に削除できます。本記事では、その基本的な使い方を具体例とともにわかりやすく解説します。 構文 node.removeChild(node); 親ノードに対して removeChild() を呼び出し、引数として削除したい子ノードを渡します。戻り値として、削除されたノードが返されます。 例1：指定した位置の子ノードを削除する 次の例では、リストに 3つの要素 が存在しますが、子ノードを1つ削除した後は残

ローカルストレージから要素（データ）を取得するには、まずブラウザがWeb Storage APIに対応しているかどうかを確認する必要があります。その後、localStorage.setItem()メソッドを使ってデータを保存し、localStorage.getItem()メソッドで保存済みのデータを取り出します。 なお、ローカルストレージに保存したデータは、ユーザーまたはスクリプトによって明示的に削除されない限り保持されます。ただし、ブラウザのプライベートモードや各種設定によっては保存が制限される場合があるため、実際に利用する際は事前に対応状況をチェックしておきましょう。 ローカルストレージに

sessionStorageとはWebブラウザにはlocalStorageとsessionStorageという2つのプロパティが用意されており、どちらもキーと値のペア（key/value pairs）をブラウザ内に保存できます。sessionStorageは、データを1つのセッション（タブやウィンドウを開いている間）だけ保持するためのオブジェクトです。ブラウザやタブを閉じると、保存していたデータは自動的に削除されます。仕組み自体はlocalStorageとほぼ同じですが、データの寿命が「セッション単位」である点が最大の違いです。sessionStorageを利用する際は、まず使用しているブラウ

JavaScriptには、指定された値が有限の数値であるかどうかを判定するためのisFinite()メソッドが用意されています。引数に渡した値が数値であれば、文字列形式（例えば123など）であってもtrueが返され、数値として評価できない場合はfalseが返ります。ここでは、その基本的な使い方を具体例とともに詳しく見ていきましょう。 基本構文 isFinite(value); このメソッドは引数として1つの値を受け取ります。渡された値が有限の数値と評価できればブール値のtrueを返し、それ以外の場合はfalseを返します。 サンプルコード1：数値を渡す場合 次の例では、整数や負の小数、0

緯度と経度の取得geolocation プロパティは、ユーザーの現在位置を特定するための Geolocation オブジェクトを返します。このオブジェクトは navigator.geolocation を通じて提供されます。位置情報はユーザーのプライバシーに関わるため、ユーザーが許可を承認しない限り、位置データにはアクセスできません。構文navigator.geolocation;このメソッドは引数を受け取らず、ユーザー位置の緯度と経度を返します。使用例次の例では、読み取り専用プロパティである position.coords と JavaScript の geolocation プロパティを組

JavaScriptでは、従来escape()関数を使って文字列をエンコードすることができました。しかし、escape()関数は現在非推奨（deprecated）となっているため、今後はencodeURI()またはencodeURIComponent()を使用するのが推奨されます。構文1：escape()escape(string);構文2：encodeURIComponent()encodeURIComponent(str);encodeURI()とencodeURIComponent()の違いencodeURI()はURL全体を対象とし、URL構造に必要な「/」「?」「&」などの記号はエン